React Native Video 未加载本地文件

Question

我正在向我的 react 本机应用程序添加视频录制和预览功能。为了拍摄视频，我使用了以下代码，一旦录制，我就可以获取输出文件。现在使用文件 uri，我尝试将此文件预览到用户使用 react-native-video 组件。但它总是显示空白屏幕，但视频没有加载。

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})
        })
    }

一旦视频变量可用，我尝试使用下面的代码 sn-p 加载它：-

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/>
}

版本详情是：-

1. “react-native”：“0.61.5”。
2. “react-native-video”：“^5.0.2”
3. “react-native-camera”：“^3.15.0”

这是我在相机录制完成后得到的视频文件 "file:///data/user/0/com.dezzexvideo/cache/Camera/94d367ef-c6b8-43c3-844f-7d0d2c6d0ddf.mp4"

Answer 1

您提到的文件路径 file:///data/user/0/com.dezzexvideo/cache/Camera/94d367ef-c6b8-43c3-844f-7d0d2c6d0ddf.mp4 - 似乎是缓存目录文件路径。

所以可能你不能直接从缓存目录播放视频。你可以使用react-native-fs。

使用RNFS首先检查缓存路径上是否存在文件

       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}} ... />

Answer 2

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

您的代码正在尝试加载本地文件名“background.[mp4|...]”作为媒体源，而摄像头记录为data.uri。 还要检查data.uri 是否包含有意义的文件名。