Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/phuochau/react-native-beautiful-video-recorder

The video recorder component that extends from react-native-camera. It works for both iOS & Android.
https://github.com/phuochau/react-native-beautiful-video-recorder

hauvo kevinvovn react-native react-native-camera react-native-component

Last synced: 2 months ago
JSON representation

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

Lists

README 

        
react-native-beautiful-video-recorder

===



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



![Sample](Screenshot.PNG)



## Features:

- Record video on iOS and Android.

- Support `cameraOptions` and `recordAsyncOptions` from `react-native-camera`



## Installation



```bash

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:



```

NSCameraUsageDescription

Your message to user when the camera is accessed for the first time



NSMicrophoneUsageDescription

Your message to user when the microsphone is accessed for the first time

```



### Android

Add permissions in your Android Manifest (required for video recording feature)



```



```



## Usage



```jsx

import VideoRecorder from 'react-native-beautiful-video-recorder';

....



start = () => {

	// 30 seconds

	this.videoRecorder.open({ maxLength: 30 },(data) => {

		console.log('captured data', data);

	});

}



render() {

	return (

		

			......

		  

		  	Start

		  

		   { this.videoRecorder = ref; }} />

		

	);

}

```



## 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

[email protected]