Upload Video to Firebase using Media Capture

Ionic Native
1

I’m able to upload photos taken with the Camera plugin to firebase using the two methods below.

This process is not a pain in the ass because I can send a dataUrl to Firebase…

VIDEO on the other hand, I’m so tired of dealing with this shit. I’ve tried doing everything imaginable. What I keep getting when trying readAsDataUrl() is {“code”:5,“message”:“ENCODING_ERR”}

Using ‘file://’ + fullPath gives me
{“code”:13,“message”:“input is not a directory”}

HELP

onTakePhoto()



onTakePhoto() {
    this.camera.getPicture({
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      correctOrientation: true
    })
      .then(
      imageData => {
        this.imageUrl = 'data:image/jpeg;base64,' + imageData;
        this.imageTaken = true;
      }
      )
      .catch(
      err => {
        console.log(err);
      }
      );
  }

uploadImage()

  uploadImage() {

    let storageRef = firebase.storage().ref();
    // Create a timestamp as filename
    const filename = this.idServ.currentReportID;

    const imageRef = storageRef.child(`images/${filename}.jpg`);

    imageRef.putString(this.imageUrl, firebase.storage.StringFormat.DATA_URL)
      .then(res => {
        console.log(res);
        console.log("uploadImage res");
      }).catch(err => {
        console.log(err);
        console.log("uploadImage err");
      })
  }

onRecordVideo()

  onRecordVideo() {


    this.mediaCap.captureVideo(this.videoOptions)
      .then(
      (data: MediaFile[]) => {
        console.log(data);
        var i, len;
        for (i = 0, len = data.length; i < len; i += 1) {
          // this.videoPath = 'file:// ' + data[i].fullPath;
          this.videoPath = 'documents://' + data[i].fullPath;

          // this.videoPath = data[i].fullPath;
          this.videoName = data[i].name;
          console.log("here's the videoPath: " + this.videoPath);
          console.log("here's the videoName: " + this.videoName);
          // this.algorithm();

        }

        this.videoTaken = true;
      },
      (err: CaptureError) => {
        console.error(err);
      }
      );
  }

uploadVideo()

 uploadVideo() {
    console.log("inside uploadVideo()");

    //FIREBASE EXCLUSIVE STUFF

    let storageRef = firebase.storage().ref();

    const filename = this.idServ.currentReportID;

    const videoRef = storageRef.child(`videos/${filename}.mov`);



    // videoRef.put(this.videoPath).then( res =>  {
    //   console.log('Uploaded a blob or file!');
    // }).catch(err =>{
    //   console.log(err);
    // });

    // videoRef.putString(this.videoPath)
    //   .then(res => {
    //     console.log(res);
    //     console.log("uploadVideo res");
    //   }).catch(err => {
    //     console.log(err);
    //     console.log("uploadVideo err");
    //   })

    this.file.readAsDataURL(this.videoPath, this.videoName).then(res => {
      console.log("readAsDataURL res");
      console.log(res);
      this.videoDataUrl = res;
      videoRef.putString(this.videoDataUrl, firebase.storage.StringFormat.DATA_URL)
        .then(res => {
          console.log(res);
          console.log("uploadVideo res");
        }).catch(err => {
          // console.log(err);
          console.log("uploadVideo err");
        })

    }, err => {
      console.log(err);
      console.log("putString err");
    })


  }
1 Like
2

I use this code, works in android

makeVideo(): void{
let options: CaptureVideoOptions = { duration: 15 };
this.mediaCapture.captureVideo(options)
.then((videoData: MediaFile[])=>{
let fpath = videoData[0].fullPath;
let name = videoData[0].name;
let path = fpath.replace(name, ‘’);

  //read as text
  
  this.file.readAsDataURL(path, name)
  .then(dataText=>{
   //set the var
    this.captureVideoUrl = dataText;
    //this.showAlert('Converted.');
    
    let uploadtask = this.uploadVideo('Victor456');
    uploadtask.on('state_changed', (snapshot) => {

    }, (error: Error) =>{

    }, () =>{
      //loading.dismiss();
      let url = uploadtask.snapshot.downloadURL;          
    })
  })
  .catch(err =>{
    
  });
              
})
.catch(err=>{
  
})

}

uploadVideo(userId: string): firebase.storage.UploadTask{
let storageRef = this.firebaseApp.storage().ref();
// Create a timestamp as filename
const filename = userId + Math.floor(Date.now() / 1000);
// Create a reference to 'images/todays-date.jpg’
const imageRef = storageRef.child(videos/${filename}.mp4);
return imageRef.putString(this.captureVideoUrl, firebase.storage.StringFormat.DATA_URL);
}

1 Like
3

Same as above (images work, but can’t get video to work on iOS), does anyone have an up to date working version of this? I’ve tried everything :frowning:

I also read somewhere that I could use the newer native capacitor file system plugin (instead of file plugin), but can’t get either way to work. No matter what I try I get errors or nothing happens.

 takeVideo() {
    console.log('takeVideo start ');
    let options: CaptureVideoOptions = { duration: 15 };
    this.mediaCapture.captureVideo(options)
      .then((videoData: MediaFile[]) => {
        let fpath = videoData[0].fullPath;
        let name = videoData[0].name;
        let path = fpath.replace(name, '')

        //read as text
        console.log('takeVideo path, name ', fpath, path, name);

        this.file.readAsDataURL(path, name)
          .then(dataText => {
            //set the var
            console.log('takeVideo dataText ', dataText);
            var captureVideoUrl = dataText;
            //this.showAlert('Converted.');

            this.uploadVideo(captureVideoUrl);
          })
          .catch(err => {
            console.log('takeVideo file err ', err);
          })
      });
  }


  uploadVideo(captureVideoUrl) {
   

    var filePath = 'usersUploads/';
    var storageRef = this.storage.ref(filePath);

    // Create a timestamp as filename
    var filename = Math.floor(Date.now() / 1000);

    // Create a reference to 'images/todays-date.jpg'
    const videoRef = storageRef.child(`videoTESTS/${filename}.mp4`);


    const task = videoRef.putString(captureVideoUrl, 'data_url', { contentType: 'video/mp4' }).catch((err) => {
      // Sharing via email is not possible
      console.log( err);


    });;

  }

 uploadVideo(captureVideoUrl) {
   

    var filePath = 'usersUploads/';
    var storageRef = this.storage.ref(filePath);

    // Create a timestamp as filename
    var filename = Math.floor(Date.now() / 1000);

    // Create a reference to 'images/todays-date.jpg'
    const videoRef = storageRef.child(`videoTESTS/${filename}.mp4`);


    const task = videoRef.putString(captureVideoUrl, 'data_url', { contentType: 'video/mp4' }).catch((err) => {
      // Sharing via email is not possible
      console.log( err);


    });;

  }
4

Try this: this.file.readAsArrayBuffer(path, name).then((buffer) => {
this.upload(buffer);
}).catch(e => {
console.log(e, readAsArrayBuffer error);
});

async upload(buffer) {
let blob = new Blob([buffer], {type: ‘video/mp4’ });
this.storage.ref(‘some_path_here’).put(blob);
}