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.
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>
);
}
When I console.log(this.state.path)
it outputs false
which means that it does not change and the video did not record.
Camera.constants.CaptureMode.video
to Camera.constants.CaptureMode.still
( .video
=> .still
) react-native-cli: 2.0.1
react-native: 0.44.0
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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.