Question

我在我的react native应用中添加了视频录制和预览功能。对于录制视频，我使用以下代码，一旦录制，我就可以获取输出文件。现在使用文件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})
        })
    }

一旦有视频变量可用，我便尝试使用以下代码片段加载此变量：-

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

版本详细信息是：-

“ react-native”：“ 0.61.5”。
“ react-native-video”：“ ^ 5.0.2”
“ react-native-camera”：“ ^ 3.15.0”

这是摄像机录制完成后获取的视频文件 “ file：///data/user/0/com.dezzexvideo/cache/Camera/94d367ef-c6b8-43c3-844f-7d0d2c6d0ddf.mp4”

Answer 1

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

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

Answer 2

您提到的文件路径 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}} ... />

反应本机视频不加载本地文件

2 个答案: