如何使用 React Native 相机录制和保存视频？

Question

我正在使用 react-native-camera RNCamera 组件来录制视频。主要任务是在聊天窗口录制上传和预览，但是我无法获取视频。RNCamerarecordAsync(options)命令将其作为缓存保存到本地缓存文件夹中，我无法从文件夹中获取它。我尝试使用 fetch-blob 但它返回的文件大小为 0。我做错了什么？

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

编辑。按照 recordAsync 选项下的文档，您会发现path：https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md

这就是我使用以下方法保存它的方式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是您从 Promise 之后获得的数据recordAsync。
对于图片，我使用的RNFS.writeFile是 base64 数据