react-native-beautiful-video-recorder

The video recorder component that extends from react-native-camera. It works for both iOS & Android.

Features:

• Record video on iOS and Android.
• Support cameraOptions and recordAsyncOptions from react-native-camera

Installation

yarn add react-native-beautiful-video-recorder react-native-camera react-native-vector-icons

Follow react-native-camera & react-native-vector-icons for linking native libraries.

Please file an issue if you have any trouble!

Configuration

iOS

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>

Android

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" />

Usage

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>
	);
}

Properties

param	Info
cameraOptions	https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md
recordOptions	https://github.com/react-native-community/react-native-camera/blob/master/docs/RNCamera.md

Callback Data

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

• iOS codec: the codec of the recorded video. One of RNCamera.Constants.VideoCodec

• isRecordingInterrupted: (boolean) whether the app has been minimized while recording

Todo

• Support playback before saving.
• Switch camera.

License

MIT

Contact

kevinvovn@gmail.com