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: about 1 month ago
JSON representation
The video recorder component that extends from react-native-camera. It works for both iOS & Android.
- Host: GitHub
- URL: https://github.com/phuochau/react-native-beautiful-video-recorder
- Owner: phuochau
- Created: 2017-04-21T06:21:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T02:04:02.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T21:46:30.073Z (8 months ago)
- Topics: hauvo, kevinvovn, react-native, react-native-camera, react-native-component
- Language: JavaScript
- Homepage: https://github.com/phuochau/
- Size: 5.54 MB
- Stars: 240
- Watchers: 11
- Forks: 70
- Open Issues: 33
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-native - react-native-beautiful-video-recorder ★125 - The video recorder component that extends from react-native-camera. It works for both iOS & Android. (Components / UI)
- awesome-reactnative-ui - react-native-beautiful-video-recorder - native-camera. It works for both iOS & Android.|<ul><li>Last updated : This week</li><li>Stars : 140</li><li>Open issues : 9</li></ul>|| (Others)
- awesome-react-native - react-native-beautiful-video-recorder ★125 - The video recorder component that extends from react-native-camera. It works for both iOS & Android. (Components / UI)
- awesome-reactnative-ui - react-native-beautiful-video-recorder - native-camera. It works for both iOS & Android.|<ul><li>Last updated : This week</li><li>Stars : 140</li><li>Open issues : 9</li></ul>|| (Others)
- awesome-react-native - react-native-beautiful-video-recorder ★125 - The video recorder component that extends from react-native-camera. It works for both iOS & Android. (Components / UI)
- awesome-react-native - react-native-beautiful-video-recorder ★125 - The video recorder component that extends from react-native-camera. It works for both iOS & Android. (Components / UI)
README
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
```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]