How could I load video files from my library? Ionic 3

Question

I observed that the Native File has not been supported by the Ionic View anymore see list here.

I am trying to get a video from my library by using Native Camera to access the videos. It can return me 3 different formats of path to my videos (DATA_URL, FILE_URI, and NATIVE_URI).reference to Native Camera here

I am currently using FILE_URI as recommended in this post. It returns something like "/storage/emulated/0/DCIM/Camera/VID_20180312_210545.mp4"

Please have a look at my code below. Aiming a better understanding, the current behavior is highlighted by comments with "//** comment ***" :

addVideoToOffer(){        
    this.platform.ready().then(() =>{
        const options: CameraOptions = {
          sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
          destinationType: this.camera.DestinationType.FILE_URI,
          mediaType: this.camera.MediaType.VIDEO,
        }
        this.camera.getPicture(options).then((data_uri) => {       
          this.readVideoFileasGeneral(data_uri);
       });
    });

  }

  readVideoFileasGeneral(data_uri) {  
      if(!data_uri.includes('file://')) {
        data_uri = 'file://' + data_uri;  
      }             
      return this.file.resolveLocalFilesystemUrl(data_uri)
            .then((entry: FileEntry) => {
            //***it does not get in here***
            this.presentQuickToastMessage(data_uri); 
            return new Promise((resolve)=>{//, reject) => { 
                        entry.file((file) => {    
                                let fileReader = new FileReader();  
                                fileReader.onloadend = () => {
                                      let blob = new Blob([fileReader.result], {type: file.type});
                                      resolve({blob: blob, file: file});    
                                };
                                fileReader.readAsArrayBuffer(file); 
                              });  
                        })
            })
            .catch((error) => { 
              this.presentQuickToastMessage(error); 
              //***it presents "plugin_not_installed" here***
            });
  }

I understand that I am having this message because Native File is not supported anymore (maybe reason of the plugin_not_installed message). However, I still have to do this task. So, if someone has any idea of what I could be using in order to have the selected videos in a blob, it would be great!

Thanks for reading until here, Cheers, Roger A L

The code looks right, I have a working example and it is pretty much identical. Have you installed a new package of the app on your device since adding the plugin? — Troy Myers, Apr 26 '18 at 16:52
Hello @TroyMyers, thanks for your reply. I believe not, how could I do that? Is it just update the ionic view app? Because I could not find any updates available =/. Or is it another thing? btw, the current version of ionic view app is "0e67f51". — Roger A. Leite, Apr 27 '18 at 12:05
Also, does it works in your Ionic view, or just in your device simulation? — Roger A. Leite, Apr 27 '18 at 12:17
It will not work through Ionic View. You have to make a build of your app by running this in the cmd: `ionic cordova build android` or `ionic cordova build ios` Then install the output ipa (ios) or apk (android) on your device. If you have Ionic Pro you can upload the build by `git push ionic master` then package it through their service and then install it on your device that way. — Troy Myers, Apr 27 '18 at 14:11

score 0 · Answer 1 · answered Apr 29 '19 at 16:13

 makeFileIntoBlob(uri) {
    // get the correct path for resolve device file system
    let pathIndex = uri.indexOf('var');
    let correctPath = uri.slice(+pathIndex);

    this.file
        .resolveLocalFilesystemUrl((this.platform.is('ios') ? 'file:///' : '') + correctPath)
        .then(entry => (<FileEntry>entry).file(file => this.readFile(file)))
        .catch(err => console.log('ERROR: ', err));
}

readFile(file) {
    if(file) {
        const reader = new FileReader();
        reader.onloadend = () => {
            const blob: any  = new Blob([reader.result], { type: file.type });
            blob.name = file.name;
            console.log(blob);

            return blob;
        };
        reader.readAsArrayBuffer(file);
    }
}

You need to get rid of the /private/ and keep file:///, so that your path goes like file:///var/

such a way I get at the beginning ionic://localhost/_app_file_/private/var/mobile/Containers/Data/Application/CA9C2004-CF0B-42CD-8B1E-E7CE47E694DC/tmp/554DC952-402F-400E-84C6-8A4CA3BCA4C7.MOV and after conversion should be such file:///var/mobile/Containers/Data/Application/CA9C2004-CF0B-42CD-8B1E-E7CE47E694DC/tmp/554DC952-402F-400E-84C6-8A4CA3BCA4C7.MOV — Gudvit, Apr 29 '19 at 16:15

score 0 · Answer 2 · edited Nov 27 '21 at 16:13

I'm currently working on something similar.. I have the video recorded with media-capture and then I can display it within a normal video html tag.. if this is all you need then this code may help you...

     this.mediaCapture.captureVideo({duration: 10, quality: 0}).then(
        (data: MediaFile[]) => {
          if (data.length > 0) {
            let originname = data[0].fullPath.substr(data[0].fullPath.lastIndexOf('/') + 1);
            let originpath = data[0].fullPath.substr(0, data[0].fullPath.lastIndexOf('/') + 1);            
            
            let alerta = this.alerts.create({
              buttons: ['ok'],
              message: this.file.externalDataDirectory
            });
            alerta.then(set => set.present());
            this.file.copyFile(originpath, originname, this.file.externalDataDirectory, 'video.mp4')
            .then(result =>{
              let videopath = this.webview.convertFileSrc(result.nativeURL)
              let video = (document.getElementById('myvideo') as HTMLVideoElement).src = videopath;

.... rest of the code

The problem raise when you try to use the native File plugin... converting files with any method (readAsDataURL, readAsArrayBuffer or readAsBinaryString) will never resolve, this is a known problem with the Ionic Native File plugin but is not taken care of...

What I did is to take the ionic native Filesystem and use it to read the file, this does read the file and get you with a base64 (pretty sure as I don't specify the encoding field) and then you can handle it the way you want...

const data = Filesystem.readFile({
                path: result.nativeURL
              })
              .then(data =>{
                ...handle data as base64 

...rest of the code

How could I load video files from my library? Ionic 3

2 Answers2