DEV Community

Aaron K Saunders
Aaron K Saunders

Posted on • Updated on

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

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"
/>
Enter fullscreen mode Exit fullscreen mode

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");
  }
},
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

The Video

VueJS Video Playlist

https://www.youtube.com/playlist?list=PL2PY2-9rsgl2bgNTX9omlDisiWh1NYInz

🔥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

Top comments (2)

Collapse
 
levarberry profile image
Levar Berry

Aaron, thanks for sharing this information.

Collapse
 
aaronksaunders profile image
Aaron K Saunders

Since I posted this there has been an update to capacitor core to resolve the issues with the Cordova Plugin

forum.ionicframework.com/t/filesys...