File type returned from Camera when using VIDEO source

Ionic Native
1

I am trying to make my mobile app work on browsers as well. For the most part everything is working as expected except for video capturing. On mobile I can use the cordova media capture plugin, but that doesn’t work on browsers. So I am left with the cordova camera plugin. I can get it to record video from the computers webcam and I can then convert the returned base64 string to a blob, and upload that to firebase, but I don’t know what type of file it is actually saving, so the resulting video will not play. It was quite a task to get it to work, but here is the code I am using to capture and convert the video…

this.camera.getPicture({
        mediaType: this.camera.MediaType.VIDEO,
        destinationType: this.camera.DestinationType.FILE_URI,
        targetWidth: 800,
        targetHeight: 800,
        quality: 90
   }).then(video => {
          this.showLoader('Uploading Video...').then(() => {
                this.uploadVideo(video, true);
          });

then my uploadVideo converts the base64 string to a blob for uploading…

 if(fromCamera) {
      console.log("from camera is true, uploading as string");
      var data = this.b64toBlob(video, 'video/mp4', 512);
      this.postsService.uploadBase64Video(data).then(vid => {
        console.log("finished uploading video");
        console.log(vid);
        if(vid) {
          this.postImageURL = vid;
          this.loader.dismissAll();
          this.navCtrl.push('AddPostPage', {images: vid, displayImage: vid, isVideo: true});
        } else {
          console.log("failed to upload video");
          console.log(vid);
        }
      });
 } else {...}
}

b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
    var byteCharacters = atob(b64Data);
    var byteArrays = [];
    for(var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset, offset + sliceSize);
      var byteNumbers = new Array(slice.length);
      for(var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
  }

I then upload that to firebase. The problem being, I am not sure it is video/mp4, I don’t know what the file type is when using the .VIDEO mediaType in the ionic camera. The whole thing would be so much easier if I could just use the media capture plugin on browser, but it’s not possible, so I have had to come up with a clever way of allowing browser users to record video. All of the documentation I have seen on the Camera plugin doesn’t specify what type of file is returned when using the VIDEO mediaType, so I don’t know what type to actually convert it to. Also, I have tried changing the destinationType to everything else, but it always returns a base64 string for some reason. Any help would be extremely appreciated. Thank you.

1 Like
2

I am having the same problem, did you solve it somehow?

1 Like