React Native Video not loading local file

Question

I am adding video recording and preview feature to my react native app.For taking video i used the following code and once recorded i am able to get the output file.Now using the file uri i tried to preview this file to the users using react-native-video component.But it always shows blank screen, but the video is not loaded.


import { RNCamera, FaceDetector } from 'react-native-camera';

 <RNCamera
      ref={ref => {
        this.camera = ref;
      }}
      style={{width:width(100),height:height(100)}}
      type={RNCamera.Constants.Type.back}

      flashMode={RNCamera.Constants.FlashMode.on}
      permissionDialogTitle={"Permission to use camera"}
      permissionDialogMessage={
        "We need your permission to use your camera phone"
      }
    >

 async startRecording() {
        this.setState({ recording: true });
        var self = this;
         this.camera.recordAsync().
        then((data) => {
            self.setState({video:data.uri})
        })
    }

Once video variable is avaialbe i tried to load this using below code snippet :-

import Video from 'react-native-video';


 {this.state.video !== ''
                ?
                <Video source={{uri: this.state.video}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                                      
       onBuffer={this.onBuffer}                
       onError={this.videoError}               
       style={styles.backgroundVideo} />
       :
     <View/>
}

The version details are:-

"react-native": "0.61.5".
"react-native-video": "^5.0.2"
"react-native-camera": "^3.15.0"

This is video file im getting after camera recording finished "file:///data/user/0/com.dezzexvideo/cache/Camera/94d367ef-c6b8-43c3-844f-7d0d2c6d0ddf.mp4"

It could be a permission issue, does your app request storage access permissions? — emeraldsanto, Dec 19 '19 at 03:41

score 1 · Answer 1 · answered Dec 19 '19 at 05:19

The file path you mentioned file:///data/user/0/com.dezzexvideo/cache/Camera/94d367ef-c6b8-43c3-844f-7d0d2c6d0ddf.mp4 - seems to be cache directory file path.

So may be you cannot directly play video from cache directory. you can use react-native-fs.

Using RNFS first check the file exists on cache path

       if(await RNFS.exists(cachefilepath)){
          //then copy the video file to Document Directory using RNFS

         //copyFile(filepath: string, destPath: string): Promise<void>

         RNFS.copyFile(cachefilepath, RNFS.DocumentDirectoryPath).then({
         })

       } 
       //Play file from directory path

       <Video source={{uri: RNFS.DocumentDirectoryPath+filename}} ... />

score 0 · Answer 2 · answered Dec 15 '19 at 09:01

0

<Video source={{uri: "background"}} ... />

Your code is trying to load a local file name 'background.[mp4|...]' as media source, while the camera recording is data.uri. Also check whether data.uri contains a meaningful filename.

answered Dec 15 '19 at 09:01

tvanlaerhoven

709
5
15

Thanks but that was my mistake while posting the question – anbu selvan Dec 15 '19 at 10:50
Which platform are you testing this on? In case it's Android, check `adb logcat` output for ExoPlayer logs. Similarly on iOS, check logs for AVPlayer output. – tvanlaerhoven Dec 15 '19 at 21:43
no error even i tried to console log onError callback of Video Component but no error – anbu selvan Dec 19 '19 at 03:29

React Native Video not loading local file

2 Answers2