Camera Video not Working - React Native

Question

Question

I have been trying to figure out why this is not working for some time. I have used a lot of example code, however I still cannot figure it out.

Code

 takeVideo() {
    console.log('started to take video');
    this.camera.capture({
      audio: true,
      mode: Camera.constants.CaptureMode.video,
      target: Camera.constants.CaptureTarget.disk
    }).then((data) => {
      this.setState({ path: data.path });
      console.log(data);
    }).catch((err) => console.log(err));
  }

  stopVideo() {
    this.camera.stopCapture();
    console.log(this.state.path);
  }

  renderCamera() {
    return (
      <View>
        <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.preview}
          aspect={Camera.constants.Aspect.fill}
          captureTarget={Camera.constants.CaptureTarget.disk}
          captureMode={Camera.constants.CaptureMode.video}
        >
          <TouchableHighlight
            style={styles.capture}
            onPressIn={this.takeVideo.bind(this)}
            onPressOut={this.stopVideo.bind(this)}
            underlayColor="rgba(255, 255, 255, 0.5)"
          >
            <View />
          </TouchableHighlight>
        </Camera>
      </View>
    );
  }

Whats not working

When I console.log(this.state.path) it outputs false which means that it does not change and the video did not record.

Info

This is on IOS
This works if I change Camera.constants.CaptureMode.video to Camera.constants.CaptureMode.still (.video => .still)
RN version: react-native-cli: 2.0.1 react-native: 0.44.0

Repo

I found this repo that is trying to do almost the exact same thing as me and is having the same issue. Here is the repo: https://github.com/MiLeung/record

Did you fill in NSCameraUsageDescription in your info.plist? Also, which lib for video are you using? — dejakob
Yes, I have added that. Is there any way that the issue could be with the emulator? — zoecarver
Can you invoke these functions: github.com/lwansbrough/… let me know the outcomes, I've tried this repo today and everything worked fine in android. I'd like to help if I can — eden
And also try this: captureTarget= {Camera.constants.CaptureTarget.cameraRoll}, where you define the camera in render — eden
Thanks for the help! How should I run the functions you sent me? Should I run them before capturing the video? Also, here is the error that occurred after I changed the captureTarget to cameraRoll: imgur.com/a/SgJSS — zoecarver

kGielo kGielo · Accepted Answer · 2017-08-21T07:06:32

Everything in your code is ok, however you're missing one important thing.

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

In code above, you're telling state, to set object path after saving the data.

But, there:

stopVideo() {
    this.camera.stopCapture();
    console.log(this.state.path);
}

You're fetching path object before saving the data.

Just try this:

this.camera.capture({
          audio: true,
          mode: Camera.constants.CaptureMode.video,
          target: Camera.constants.CaptureTarget.disk
}).then((data) => {
          this.setState({ path: data.path });
          console.log(this.state.path); // You should have your path set
          console.log(data);
}).catch((err) => console.log(err));

stopCapture function tells the native code, to stop recording and save video - what can take some time, so executing this.state.path immediately after stopCapture does not work.

For more info check this out https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/Promise