How to Record Videos in ReactJS with Capacitor and Cordova Plugins
Tags: ionic, react, tutorial, javascript
Published: 2020-04-23 22:02:31

####[🔆Click Here for Ionic Framework ReactJS and VueJS Tips/Tutorials?🔆](https://buff.ly/35bAMIf) 

I often see [Ionic Framework](https://ionicframework.com/docs/) developers getting confused about how to use the cordova plugins and [Ionic Native](https://ionicframework.com/docs/native) plugins in [Reactjs](https://ionicframework.com/docs/react) or [Vuejs](https://ionicframework.com/docs/vue/overview), 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](https://ionicframework.com/docs/native/video-capture-plus) into a reactjs application and deploy it to an ios device using [Ionic Capacitor](https://capacitor.ionicframework.com/)

We will be using a project from a [previous post](https://dev.to/ionic/react-ionic-framework-and-hooks-5135) 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](https://github.com/apache/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
```javascript
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.
```javascript
  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.
```javascript
//.. 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
```shell
ionic build
ionic cap sync ios
```
After you make changes to web code, you typically run the following command.
```shell
ionic cap copy ios
```
After changes to native code/plugins
```shell
ionic cap sync ios
```
Open up the IDE
```shell
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.
```shell
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](https://dev.to/ionic/ionic-framework-app-using-react-firebase-hooks-file-upload-hook-bn4) 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`

```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
{% youtube pDzrUrEl87Y %}