react-native-media-recorder

Getting Started

Installation

Using npm

$ npm install react-native-media-recorder --save

Using yarn

$ yarn add react-native-media-recorder

Linking

There are two options for linking:

1. Automatic

react-native link react-native-media-recorder

2. Manual

If the automatic linking fails for some reason, you can do the linking manually as follows:

• add the following to yourAppName/android/settings.gradle file:

 include ':react-native-media-recorder'
 project(':react-native-media-recorder').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-media-recorder/android')

• add the following inside the dependencies closure of yourAppName/android/app/build.gradle file:

 implementation project(':react-native-media-recorder')

• add the following to your MainApplication.java file:

 import com.admedia.MediaPackage;

and also,

 @Override
 protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
     new MainReactPackage(),
     ....
     new MediaPackage()                    <== Add this
   );
 }

Usage

To record audio or video, first import the module to your app like so:

import { Audio, Video } from 'react-native-media-recorder';

After this, you can call any of the functions stated below for the recording activity. You can call the same functions on both Audio and Video objects to perform similar tasks. However, there are some differences in the parameters passed to prepare(options:object) function. The differences are clearly stated below.

Functions

    prepare(Object options)
    startRecording()
    stopRecording()
    isRecording()
    exitRecording()

Permissions

        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
        <uses-permission android:name="android.permission.RECORD_AUDIO" /

In addition, for video recording the following permissions are essential.

        <uses-permission android:name="android.permission.CAMERA"/>
        <uses-feature android:name="android.hardware.camera" android:required="true" />

Description

prepare(Object options):

Properties common to both Audio and Video Recording:

All the above properties except the outputFolder are optional. If you don't specify them, default values ,as described above, will be assigned to those properties during runtime.

Properties peculiar to Video Recording:

Sample code snippet

        import { Audio, Video } from 'react-native-media-recorder';
        .....
        .....

        _prepareMediaRecorder = () => {
            const params = { "outputFolder": "Music/" };
            Audio.prepare(params);  // to prepare an audio recording environment
            /* Video.prepare(params);   use this instead to prepare a video recording environment */
        } 

startRecording():

• explicitly calling stopRecording() function.
• pressing the STOP button which appears on the recording view.
• setting maxDuration property in the arguments passed to prepare() function.
• setting maxFileSize property in the arguments passed to prepare() function.
• explicitly calling exitRecording() function.
• pressing the back button.

Sample code snippet

        import { Audio, Video } from 'react-native-media-recorder';
        .....
        .....

        _startMediaRecording = () => {
          setTimeout(() => {
            Audio.startRecording(); // to start audio recording. 
            /*  Video.startRecording(); use this instead to start video recording */
          }, 1000);         
        } 

stopRecording():

Sample code snippet

            import { Audio, Video } from 'react-native-media-recorder';
            .....
            .....

            _stopMediaRecording = () => {
                Audio.stopRecording(); // stops audio recording activity
                /* Video.stopRecording();  use this instead to stop an ongoing video recording. */
            } 

isRecording():

Sample code snippet

            import { Audio, Video } from 'react-native-media-recorder';
            .....
            .....

            _checkMediaRecording = async () => {
                      Audio.isRecording().then((res) => {
                          if (res) Audio.stopRecording();
                      }).catch((err) => {
                          console.log(err);
                      });
                      
              /* the video counter part is: 
                      Video.isRecording().then((res) => {
                          if (res) Video.stopRecording();
                      }).catch((err) => {
                          console.log(err);
                      });  
              */
            } 

exitRecording():

Sample code snippet

            import { Audio, Video } from 'react-native-media-recorder';
            .....
            .....

            _exitMediaRecording = () => {
                Audio.exitRecording();
                /*  Video.exitRecording();  to exit video recording */
            } 

Issues or suggestions?

If you have any issues or if you want to suggest something , you can write it here.

Additional info

This is a component of a more comprehensive react-native-system-applications module developed by the same author.