How to Record Videos in ReactJS with Capacitor and Cordova Plugins

🔆Click Here for Ionic Framework ReactJS and VueJS Tips/Tutorials?🔆

I often see Ionic Framework developers getting confused about how to use the cordova plugins and Ionic Native plugins in Reactjs or Vuejs, which is still in beta, but there is not much to it.

Below is a quick step by step on how to integrate the video-capture-plus plugin into a reactjs application and deploy it to an ios device using Ionic Capacitor

We will be using a project from a previous post I wrote utilizing a custom react hook to upload files to firebase. The project will be modified to include the video capture plugin and then we will modify the firebase hook to upload the blob from the video data

I have seen people in the past recommend the cordova-plugin-media-capture but the quality of the video you get is horrible

Install the components, plugins

npm install cordova-plugin-video-capture-plus
npm install @ionic-native/video-capture-plus
npm install @ionic-native/core

Add the imports

import {
  MediaFile,
  VideoCapturePlusOptions,
  VideoCapturePlus,
} from "@ionic-native/video-capture-plus";

When using the VideoCapturePlus components in ReactJS, typescript is your friend because it shows you what properties and methods are available on the objects.

In this case what you want is MediaCapture.captureVideo which returns a promise that is the media you were looking for or the error that was generated by the plugin.

  const doMediaCapture = async () => {
    let options: VideoCapturePlusOptions = { limit: 1, duration: 30 };
    let capture:any = await VideoCapturePlus.captureVideo(options);
    console.log((capture[0] as MediaFile).fullPath)
  };

The basic code for the Home Component containing the button. The click event triggers the function to activate the camera and we console log the output to confirm we got the data. We are taking this first step since we need to deploy to device to actually record video.

//.. removed ionic imports for brevity
const Home: React.FC<RouteComponentProps> = ({ history }) => {

  return (
    <IonPage id="home-page">
      <IonHeader>
        <IonToolbar>
          <IonTitle>Inbox</IonTitle>
      </IonHeader>
      <IonContent>
        <IonButton onClick={() => doMediaCapture()}>
          VIDEO CAPATURE
        </IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Home;

If your code ran fine and you saw the output in the console, then you are ready for the next step which is to deploy the app to you device so you can actually record a video.
Below are the steps to get the app running on ios, the steps for android are similar. Please see capacitor documentation for additional details

Deploying To Device Using Capacitor/CLI

ionic build
ionic cap sync ios

After you make changes to web code, you typically run the following command.

ionic cap copy ios

After changes to native code/plugins

ionic cap sync ios

Open up the IDE

ionic cap open ios

Using Live Reload To Debug Application

When developing the remainder of the application, I used live reload commands which are listed below.

ionic cap run ios -l --external

ionic cap run android -l --external

And There Is More To Come

In part two of this blog post series we will update and incorporate the Firebase File Upload Hook from a previous blog post to support uploading the video files to a firebase database.

See the Firebase React File Upload Hook blog post here: https://dev.to/ionic/ionic-framework-app-using-react-firebase-hooks-file-upload-hook-bn4

Android Quirks

The configuration for the plugin.xml is causing issues with this plugin and needs to be edited in order to work properly. For now I just quickly edited the file in side the node_modules directory to have the android section look like this

photo-video-file-upload-hook/node_modules/cordova-plugin-video-capture-plus/plugin.xml

<!-- android -->
<platform name="android">

    <config-file target="res/xml/config.xml" parent="/*">
        <feature name="VideoCapturePlus">
            <param name="android-package" value="nl.xservices.plugins.videocaptureplus.VideoCapturePlus"/>
        </feature>
    </config-file>

    <config-file target="AndroidManifest.xml" parent="/*">
        <uses-permission android:name="android.permission.RECORD_AUDIO" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.CAMERA" />

    </config-file>

    <source-file src="src/android/nl/xservices/plugins/videocaptureplus/VideoCapturePlus.java"
                    target-dir="src/nl/xservices/plugins/videocaptureplus"/>
    <source-file src="src/android/nl/xservices/plugins/videocaptureplus/FileHelper.java"
                    target-dir="src/nl/xservices/plugins/videocaptureplus"/>
    <source-file src="src/android/nl/xservices/plugins/videocaptureplus/xml/provider_paths.xml" target-dir="res/xml" />
</platform>

See The Video Here