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

#vue #ionic #javascript #tutorial

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

Using HTML tags to load the video camera on a mobile device

<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 availble 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);
  }
}