Part Two: How to Record Videos in VueJS with Ionic Framework, Capacitor and Cordova Plugins

This is the second part of a set of videos on how to integrate the video-capture-plus OR another solution into an Ionic Framework VueJS mobile application and deploy it to device using Ionic Capacitor

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.

This video also integrate a Vue-Composition API function to upload a file to firebase with error handling, loading states and progress indicator all wrapped in an easy to integrate function. I have a three part Series on Using Vue Composition API with Firebase available here on dev.to

Some Code

<ion-button @click="openVideo">TAKE VIDEO PLEASE</ion-button>
<input
style="display:none"
type="file"
accept="video/mp4, video/x-m4v, video/*"
capture
@change="setVideo"
id="open-camera"
/>

The VueJS function to respond to the events, convert the video to a blob ad pass to the vue-composition api. More information is available in the video link below.

openVideo: function() {
document.getElementById("open-camera").click();
},
setVideo: function(event) {
const file = event.target.files[0];
if (typeof FileReader === "function") {
const reader = new FileReader();
reader.onload = event => {
console.log(event.target.result);
let videoBlob = new Blob([event.target.result], {
type: file.type
});
// vue composition api / hook
this.uploadData(videoBlob, file.name);
};
reader.onerror = _error => {
console.log(_error);
};
reader.readAsArrayBuffer(file);
} else {
alert("Sorry, FileReader API not supported");
}
},

Here is the implementation using the plugin.

There are issues with the plugin on latest version of Android SDK that need a work-around to read the file from storage. The explanation, links and final solution are included in the video linked below.

takeVideo: async function() {
try {
let options = { limit: 1, duration: 30, quality: 1 };
let video = await MediaCapture.captureVideo(options);
this.videoInfo = video[0];
const blob = await fetch(
Capacitor.convertFileSrc(this.videoInfo.fullPath)
).then(r => r.blob());
console.log(blob);
// the hook starts an upload when it gets a dataurl or blob
this.uploadData(blob, this.videoInfo.name);
} catch (error) {
console.log("takeVideo", error);
}
}

There has been a new PR to the capacitor core that addresses this issue so I believe that by pulling the latest code to your project, the plugin approach can work without the manifest change.

https://forum.ionicframework.com/t/filesystem-capacitor-android-10-issues/189371/3

VueJS Video Playlist

🔥Important Links 🔥
Link to Vue Composition Blog Series: https://buff.ly/2p64FqD
Vue Composition API: https://buff.ly/3fQwx7T
Android SDK 29 Workaround : https://buff.ly/3cx1kEM
Video Capture Plus: https://ionicframework.com/docs/native/video-capture-plus

https://www.youtube.com/embed/1-MwqvVe-fI

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions. https://buff.ly/300Zru

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store