The video recorder component that extends from react-native-camera. It works for both iOS & Android.
- Record video on iOS and Android.
- Support
cameraOptionsandrecordAsyncOptionsfromreact-native-camera
yarn add react-native-beautiful-video-recorder react-native-camera react-native-vector-iconsFollow react-native-camera & react-native-vector-icons for linking native libraries.
Please file an issue if you have any trouble!
With iOS 10 and higher you need to add the "Privacy - Camera Usage Description" key to the info.plist of your project. This should be found in your_project/ios/your_project/Info.plist. Add the following code:
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microsphone is accessed for the first time</string>
Add permissions in your Android Manifest (required for video recording feature)
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
import VideoRecorder from 'react-native-beautiful-video-recorder';
....
start = () => {
// 30 seconds
this.videoRecorder.open({ maxLength: 30 },(data) => {
console.log('captured data', data);
});
}
render() {
return (
<View>
......
<TouchableOpacity onPress={this.start}>
<Text>Start</Text>
</TouchableOpacity>
<VideoRecorder ref={(ref) => { this.videoRecorder = ref; }} />
</View>
);
}The calback will be fulfilled with an object with some of the following properties:
-
uri: (string) the path to the video saved on your app's cache directory. -
videoOrientation: (number) orientation of the video -
deviceOrientation: (number) orientation of the device -
iOScodec: the codec of the recorded video. One ofRNCamera.Constants.VideoCodec -
isRecordingInterrupted: (boolean) whether the app has been minimized while recording
- Support playback before saving.
- Switch camera.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent