如何访问 react-native-camera 的视频功能？

Posted 2023-03-11

【中文标题】如何访问 react-native-camera 的视频功能？

【英文标题】：How do I access the react-native-camera's video capabilities?

【发布时间】：2016-06-22 07:12:55

【问题描述】：

我一直在尝试让 react-native-camera 的视频功能正常工作，但是我尝试了很多方法，但总是遇到同样的错误。这是我的代码：

class MainCamera extends Component 
  constructor() 
  super();
  this.render = this.render.bind(this)
  this.state =  cameraType: Camera.constants.Type.back 


  render() 

return (
  <View style=styles.container>
    <Camera
      ref='camera'
      style=styles.preview
      aspect=Camera.constants.Aspect.fill
      type=this.state.cameraType
      captureMode=Camera.constants.CaptureMode.video
      captureAudio=false
      target=Camera.constants.CaptureTarget.disk>

      <TouchableHighlight
        onPressIn=this.onPressIn.bind(this)
        onPressOut=this.stopVideo.bind(this)>
        <Icon name="video-camera" size=40 />
      </TouchableHighlight>
    </Camera>
  </View>
);
  

onPressIn() 
  recordVideo = setTimeout(this.takeVideo.bind(this), 100);


takeVideo() 
    this.refs.camera.capture(
      target: Camera.constants.CaptureTarget.disk
    )
      .then(data => 
        console.log(data);
      )
      .catch(err => console.log(err));
  

stopVideo() 
  this.refs.camera.stopCapture()
    .then(data => console.log(data))
    .catch(err => console.log(err));
  

当我在 stopCapture() 方法上使用 '.then' 承诺时，我收到错误“无法读取未定义的属性 'then'”，但如果我不添加 '.then'，则不会发生任何事情而且我没有收到任何数据。有人有什么建议吗？

【问题讨论】：

***.com/questions/48280005/…

【参考方案1】：

takeVideo() 
    this.refs.camera.capture(
      audio: true,
      mode: Camera.constants.CaptureMode.video,
      target: Camera.constants.CaptureTarget.disk
    )
      .then((data) => 
        console.log(data);
      )
      .catch((err) => console.log(err));
  

stopVideo() 
  this.refs.camera.stopCapture();

stopCapture() 函数不是承诺。

【讨论】：

好的，它现在需要视频。但我知道的唯一方法是将目标更改为“Camera.constants.CaptureTarget.cameraRoll”，然后检查我的相机胶卷以查看那里的视频。我的问题是它没有 console.log 任何数据，因为我想在我的应用程序中使用该视频数据做其他事情，而不仅仅是将视频文件保存到我的手机。

没关系，由于某种原因，它们只显示在 Xcode 的控制台中，而不显示在 Google Chrome 调试工具中。尽管如此，我正在获取数据。谢谢。

我很遗憾丢失了这个文件，我又从头开始重做这个项目。我的一切都与我记忆中的完全一样，但数据仍然不会打印出来。如果您仍然能够提供帮助，那就太好了。如果您可以看一下，我将在下面发布新组件。此评论框空间不足，无法发表。

【参考方案2】：

语法错误：

then((data) => 
    console.log(data);
  )

((data)=>) should be done instead of (data=>).

【讨论】：

stopVideo() this.refs.camera.stopCapture() .then((data) => console.log(data) ) .catch((err) => console.log(err)); 这是更新后的函数，我仍然得到同样的错误 cannot read 'then' of undefined

您是否更新了 takeVideo() 方法中的代码？如果仍然有问题，请发布您的控制台错误屏幕截图或移动屏幕截图

我确实更新了 takeVideo() 方法。这是我继续得到 [1] 的错误图像：i.stack.imgur.com/HIaU9.png

【参考方案3】：

旧文件不幸丢失后的新组件：

 class VideoCamera extends Component 
  constructor() 
    super()
    this.state = 
      captureMode: Camera.constants.CaptureMode.video,
      captureAudio: false,
      captureTarget: Camera.constants.CaptureTarget.cameraRoll,
    
  
  render() 
    return (
      <View style=styles.container>
        <Camera
            aspect=Camera.constants.Aspect.fill
            captureAudio=this.state.captureAudio
            captureMode=this.state.captureMode
            captureTarget=this.state.captureTarget
            ref="camera"
            style=styles.preview
        >
        <TouchableHighlight
            onPressIn=this._startRecord.bind(this)
            onPressOut=this._endVideo.bind(this)
        >
        <Icon
           name='video-camera'
           size=40
           style=styles.recordButton
        />
          </TouchableHighlight>
          </Camera>
         </View>
          )
      

  _startRecord() 
    startVideo = setTimeout(this._recordVideo.bind(this), 50)
  

  _recordVideo() 
    this.refs.camera.capture()
      .then((data) => console.log(data))
      .catch((err) => console.log(err))
   

  _endVideo() 
   this.refs.camera.stopCapture()
  

【参考方案4】：

相机打开，创建2个按钮来开始和停止下面的视频。

                <View style=styles.container>
                    <RNCamera
                        ref=ref => 
                            this.camera = ref;
                        
                        style=styles.preview
                        type=RNCamera.Constants.Type.back
                        flashMode=RNCamera.Constants.FlashMode.on
                        androidCameraPermissionOptions=
                            title: 'Permission to use camera',
                            message: 'We need your permission to use your camera',
                            buttonPositive: 'Ok',
                            buttonNegative: 'Cancel',
                        
                        androidRecordAudioPermissionOptions=
                            title: 'Permission to use audio recording',
                            message: 'We need your permission to use your audio',
                            buttonPositive: 'Ok',
                            buttonNegative: 'Cancel',
                        
                        onGoogleVisionBarcodesDetected=( barcodes ) => 
                            console.log(barcodes);
                        
                        captureAudio=true
                    />  

       <View style= flex: 0, flexDirection: 'row', justifyContent: 'center' >
                <TouchableOpacity onPress=this.takeVideo.bind(this) style=styles.capture>
                    <Text style= fontSize: 14 > VIDEO </Text>
                </TouchableOpacity>
                <TouchableOpacity onPress=this.stoprec.bind(this) style=styles.capture>
                    <Text style= fontSize: 14 > STOP </Text>
                </TouchableOpacity>
            </View>

还创建两种方法来录制视频和停止录制，如下所示。和下面的方法在上面的按钮中被调用。

 takeVideo = async () => 
        if (this.camera) 
            try 
                const options = 
                    quality: 0.5,
                    videoBitrate: 8000000,
                    maxDuration: 30
                ;
                const promise = this.camera.recordAsync(options);
                if (promise) 
                    this.setState( recording: true );
                    const data = await promise;
                    this.setState( recording: false );
                
             catch (error) 
                console.log(error);
            
        
    

//stop the recording by below method
    stoprec = async () => 
        await this.camera.stopRecording();
    

最后，如果你想要文件路径和所有你会得到的 data.uri

谢谢。希望能给出清晰的画面