🔆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
Top comments (4)
to get this to work on android PLEASE read android quirks section above, YOU MUST edit the plugin.xml file on the node package for the plugin to fix the error you are seeing
photo-video-file-upload-hook/node_modules/cordova-plugin-video-capture-plus/plugin.xml
Hi Aaron,
Many thanks for taking the time to do these tutorials.
I´m working with Ionic React Capacitor and I think you are literally the only person in the world trying to shed some light to the video recording feature with these technologies.
Unfortunately I´m using Android and there´s no way I can run the app once I add the video recorder cordova plugin. I´ve tried with the Android quirk fix you suggested but not luck either (perhaps I´m not implementing it in the right place).
Is there any way you´d be up for a videocall to see if you can give me a hand? I promise I won´t take much of your time. The reality is that you are the ONLY person in the whole internet writing about recording videos with these technologies.
Thanks a lot!
Nahuel
Hi Aaron when I followed the code above I'm getting an error saying "VideoCapture.tsx:14 Uncaught (in promise) cordova_not_available" do you have any idea why?
Are you running on device?