Wondering what’s next for npm?Check out our public roadmap! »

    react-native-beautiful-video-recorder

    2.0.1 • Public • Published

    react-native-beautiful-video-recorder

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

    Sample

    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

    Install

    npm i react-native-beautiful-video-recorder

    DownloadsWeekly Downloads

    232

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    405 MB

    Total Files

    4703

    Last publish

    Collaborators

    • avatar