Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

}
like image 531
hermt2 Avatar asked Jul 17 '16 23:07

hermt2


2 Answers

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))
}
like image 137
Travis Nuttall Avatar answered Nov 01 '22 06:11

Travis Nuttall


Actually now, it changed, you only have to use the recordAsync() function to start recording.

and stopRecording() to stop the recording.

the recordAsync() return a file uri (.mp4 format) of app cache that you can reuse for your app. Enjoy

like image 35
kevin richard Avatar answered Nov 01 '22 06:11

kevin richard