Part Two: How to Record Videos in VueJS with Ionic Framework, Capacitor and Cordova Plugins
Tags: vue, ionic, javascript, tutorial
Published: 2020-05-15 15:57:06


This is the second part of a set of videos on how to integrate the [video-capture-plus](https://ionicframework.com/docs/native/video-capture-plus) OR another solution into an [Ionic Framework](https://ionicframework.com/docs) VueJS mobile application and deploy it to device using [Ionic Capacitor](https://capacitor.ionicframework.com/)  

Often see Ionic Framework developers getting confused about how to use the cordova plugins and [Ionic Native](https://ionicframework.com/docs/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](https://dev.to/aaronksaunders/vuejs-composition-api-sample-app-w-video-d04) available here on dev.to

###Some Code
Using HTML tags to load the video camera on a mobile device
```html
<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.
```javascript
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.
```javascript
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);
  }
}
```
###The Video
{% youtube 1-MwqvVe-fI %}

###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