Record, Play, and Upload Videos in ReactJS with Ionic 5 Capacitor and Cordova Plugin

I have spent a day to understand how Video Capture Plus and other ionic native plugins are communicating with the native IOS and Android component.

There was not enough resources and help which could straight away point that how we can play (in the device) and upload the captured video to a web server or Cloud.

Here is the code below which does all the work, though I am not describing each line here, because most of the codes are clear to understand, and also below code is for ReactJS, I will publish VueJS code example if needed, or write below in the comment.

Dependencies Installation

npm install @ionic-native/video-capture-plus npm install @ionic-native/media-capture npm install @capacitor/core

React Component

import React, { useState } from 'react'; import { MediaFile, VideoCapturePlusOptions, VideoCapturePlus, } from "@ionic-native/video-capture-plus"; import { Capacitor } from '@capacitor/core'; import axios from 'axios' import { IonButton, IonContent, IonHeader, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/react'; const VideoCaptureExample: React.FC = () => { const [videoUrls, setVideoUrls] = useState<any[]>([]); const captureVideo = async () => { let options: VideoCapturePlusOptions = { limit: 1, duration: 30, highquality: true }; let capture:any = await VideoCapturePlus.captureVideo(options); let media = capture[0] as MediaFile; setVideoUrls(videos => [...videos, Capacitor.convertFileSrc(media.fullPath)]); const blob = await fetch( Capacitor.convertFileSrc(media.fullPath) ).then(r => r.blob()); var fd = new FormData(); fd.append('file', blob); axios.post('upload/video', fd, { headers: { 'content-type': 'multipart/form-data' } }) .then(res => { console.log(res); }); }; return ( <IonPage> <IonHeader> <IonToolbar> <IonTitle>Video Capture</IonTitle> </IonToolbar> </IonHeader> <IonContent fullscreen> {videoUrls.map((video: any, key: any) => ( <IonList key={key}> <video controls width="100%" height="150px" src={video}></video> </IonList> ))} <IonList> <IonButton onClick={() => captureVideo()}> Capture Video </IonButton> </IonList> </IonContent> </IonPage> ); } export default VideoCaptureExample;

Below code convert fullPath into readable URL For HTML5 video tag

Capacitor.convertFileSrc(media.fullPath)

Below code fetch Blob and create form data object to upload it to the server

const blob = await fetch( Capacitor.convertFileSrc(media.fullPath) ).then(r => r.blob()); var fd = new FormData(); fd.append('file', blob);

I will shortly publish a github repo with above code and possibly a youtube video, I hope this helps someone, and make their coding experience easier.

Please do not forget to write your comment in the comment section.

Newsletter

Make sure to subscribe to my newsletter and be the first to know about my new post.

Subscribe on Youtube
FOR UPDATES

I post tutorials about various technologies on the youtube channel

Subscribe Now
Newsletter

Make sure to subscribe to my newsletter and be the first to know about my new post.

© 2021