Accessing a video saved in the filesystem gallery? Capacitor 3 and Ionic 5

I’m using Capacitor 3 and Ionic 5 angular.

I0’ve used the media capture plugin for recording a video and i get a result like this:

[MediaFile]
0: MediaFile
end: 0
fullPath: "file:///storage/emulated/0/DCIM/Camera/20210522_185343.mp4"
lastModified: null
lastModifiedDate: 1621702425000
localURL: "cdvfile://localhost/sdcard/DCIM/Camera/20210522_185343.mp4"
name: "20210522_185343.mp4"
size: 13596835
start: 0
type: "video/mp4"
__proto__: File
length: 1

What should i do if i want to access that video and send, for example, uploading it to my server?

I’ve tried this:

public async addNewToGallery() {
    this.mediaCapture.captureVideo().then(
      (data: MediaFile[]) => {
        console.log(data);
        this.videos.unshift({
          filepath: data[0].fullPath,
          webviewPath: data[0].fullPath
        });

        this.videoUrl = Capacitor.convertFileSrc(data[0].fullPath);
      },
      (err: CaptureError) => console.error(err)
    );
  }

  <ion-grid>
    <ion-row>
      <ion-col size="6">
        <video type="video/mp4" [src]="this.videoService.videoUrl"></video>
      </ion-col>
    </ion-row>
  </ion-grid>

If I inspect the html element i get this:

image912×63 10.3 KB

but the video doesn’t appear, so i cant play it and i dont know how to use the variable for uploading the video.

can you help me?

thanks

1 post - 1 participant

Read full topic