Camera Video not Working - React Native - ios

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

Answer 1

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