How to record a video with the react-native-camera

hermt2 picture hermt2 · Jul 18, 2016 · Viewed 14.2k times · Source

So I was working on a project that used the react-native video camera from https://github.com/lwansbrough/react-native-camera and had it working. The component would take videos and the data would print in Xcode's console. Unfortunately I lost this file and a couple others on my computer and am starting the app back from scratch. I have been attempting to recreate the camera with video recording capabilities but cannot get it to work. Does anybody know what I am doing wrong because I cannot seem to figure it out. The data will print out when I change the captureMode to camera but nothing will happen for video. Here is my component:

let startVideo = false;

class VideoCamera extends Component {
  constructor() {
    super()
    this.state = {
      captureMode: Camera.constants.CaptureMode.video,
    }
  }
  render() {
    return (
      <Camera
          captureMode={this.state.captureMode}
          ref="camera"
          style={styles.container}
      >
      <TouchableHighlight
          onPressIn={this._startRecord.bind(this)}
          onPressOut={this._endVideo.bind(this)}
      >
      <Icon
          name={'video-camera'}
          size={40}
          style={styles.recordButton}
      />
        </TouchableHighlight>
        </Camera>
      )
  }

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

}

Answer

Travis Nuttall picture Travis Nuttall · Jan 1, 2017

In your _recordVideo method you are passing an empty object to camera.capture, instead you should pass an object specifying the capture mode. Try this version of _recordVideo:

_recordVideo() {
  this.refs.camera.capture({mode: Camera.constants.CaptureMode.video})
    .then((data) => console.log(data))
    .catch((err) => console.log(err))
}