FileReader not reading recorded video file in Ionic

Question

I want to get base64 from video file obtained from Cordova Media Capture's captureVideo() method. I am able to get File using resolveLocalFilesystemUrl() method but when I try to read that File using FileReader, there is no callback event, nor do I get any error. I found from this link that file obtained from Media Capture has issue in reading. I tried reading the File using File plugin's readAsDataURL() method but without success. I also tried to create AN objectURL using URL.createObjectURL(file) method but getting error. Is there any other way to get base64 or thumbnail?

convertMediaFileToBlob(path: string){
    this.file.resolveLocalFilesystemUrl(path)
    .then((fileEntry:any) => {
        fileEntry.file((file:any)=>{

          let reader = new FileReader();
          reader.onloadend = () => {
            console.log('onloadend: ',reader.result)
            
          };
          reader.onerror = (error) => {
            console.log('onerror error: ',error)
          };
          reader.onabort = () => {
            console.log('onabort')
          };
          reader.readAsDataURL(myfile);
         
        })
    })
    .catch((e:any) => {
      console.log('err: ',e)
    });
  }

async recordVideo(){
    let options: CaptureVideoOptions = { limit: 1 }
    this.mediaCapture.captureVideo(options)
      .then(
        (data: any) => {
          const path = data[0]?.fullPath
          this.convertMediaFileToBlob(path)
        },
        (err: CaptureError) => console.error(err)
      );
}

score 0 · Answer 1 · answered Aug 08 '23 at 12:04

Not sure but maybe it works if u use cordovas readDataAsURL instead of FileReader

convertMediaFileToBlob(path: string) {
  this.file.resolveLocalFilesystemUrl(path)
    .then((fileEntry: any) => {
      fileEntry.file((file: any) => {
        this.file.readAsDataURL(file.localURL).then((base64: any) => {
          console.log('Base64: ', base64);
        }).catch((error: any) => {
          console.log('Read Error: ', error);
        });
      });
    })
    .catch((e: any) => {
      console.log('Resolve Error: ', e);
    });
}

async recordVideo() {
  let options: CaptureVideoOptions = { limit: 1 };
  this.mediaCapture.captureVideo(options)
    .then(
      (data: any) => {
        const path = data[0]?.fullPath;
        this.convertMediaFileToBlob(path);
      },
      (err: CaptureError) => console.error(err)
    );
}

This code reads the file as a data URL, which will give you the Base64 encoding of the file

No it doesn't work. Anyways. I found the solution – Somnath Pal Aug 09 '23 at 05:08 — Somnath Pal, Aug 09 '23 at 05:08

FileReader not reading recorded video file in Ionic

1 Answers1