How to record and save video using react native camera?

Question

I'm using react-native-camera RNCamera component to record video. The main task is to record and upload and preview it in a chat window, but I can't get the video. RNCamera recordAsync(options) command saves it as cache into local cache folder and i can't get it from folder. I've tried to use fetch-blob but it returned file size 0. What i do wrong?

import {RNCamera} from 'react-native-camera';
import RNFetchBlob from 'react-native-fetch-blob';
constructor(props) {
    super(props);
     this.state = {
      path: "",
      recorded: false,
      isRecording: false,
    }
}

takeVideo() { 
    this.state.isRecording ?  this.stopRecord() : this.saveVideo();
    this.state.isRecording ? this.setState({isRecording: false}) : this.setState({isRecording: true})
  }

  async stopRecord(){
    this.camera.stopRecording();
    const { config, fs, android } = RNFetchBlob;
    const str = this.state.path;
    const fileName = str.substr(str.indexOf("Camera")+7, str.indexOf(".mp4"));
    const path = fs.dirs.CacheDir + '/Camera/'+fileName;

    const res = await fetch(str);
    const blob = await res.blob();

    console.log("BLOB", blob); // -- it returns - 
    /*
      'BLOB', { _data:
      { name: '07395974-32e0-4e43-8f7c-af5ec2d7267b.mp4',
        type: 'video/mp4',
        size: 0,
        lastModified: 0,
        offset: 0,
        lobId: '445db879-9795-4cd9-a8cf-d33d60a41a13' } }
    */
  }

  async saveVideo () { 
    if (this.camera) { 
      const options = { maxDuration: 10 }
      const data = await this.camera.recordAsync(options)
      this.setState({path: data.uri })
      this.setState({recorded: false})
      console.log("FILE", data.uri); // -- it returns - 

      //'FILE', 'file:///data/user/0/com.project/cache/Camera/07395974-32e0-4e43-8f7c-af5ec2d7267b.mp4'
    }
  };

render() {
      return (   
        <View style = {[styles.root, this.props.contentStyle]}>
          {this.props.header}
            <RNCamera
              // type = {RNCamera.Constants.Type.front}
                ref = {camera => {this.camera = camera}}
                style = {styles.preview}
                captureAudio = {true}
                ratio = "16:9"
                permissionDialogTitle={'Permission to use camera'} 
                permissionDialogMessage={'We need your permission to use your camera phone'}
            >
              <View style = {{flexDirection: 'column', alignItems:'center'}}>
                <TouchableOpacity onPress = {this.takeVideo}>
                  <Text style = {{backgroundColor: 'white'}}>[CAPTURE]</Text>
                </TouchableOpacity>
              </View>
            </RNCamera>
        </View>
      );
    }
  }

Answer 1

EDIT. Follow documentation under the recordAsync options, you'll find path: https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md

This is how I'm saving it using RNFS from 'react-native-fs':

let fileName = 'VID_currentDate.mp4';
RNFS.copyFile(data.uri, RNFS.PicturesDirectoryPath + '/Videos/' + fileName).then(() => {
    console.log("Video copied locally!!");
}, (error) => {
    console.log("CopyFile fail for video: " + error);
});`  

data.uri is the data you get from promise after recordAsync.
For pictures instead I'm using RNFS.writeFile with the base64 data