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()
}
}
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))
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With