Storing video locally and embed into view

Capacitor
1

Hello!

I am downloading a video from server as blob and storing it with capacitor.
So far this works, but i cant insert the locally file path in view, it cant find the source (but i can see the file via dev tools) or if i want to embed it via file:/// it will not allow to embed that.

My steps:

  1. this.http.post(url, null, { responseType: ‘blob’ }).subscribe(…
  2. Blob response to text:
    const reader = new FileReader();
    reader.addEventListener(‘loadend’, (e: any) => {
    const text = e.srcElement.result;
    this.fileWrite(‘video.mp4’, text);
    });
    reader.readAsText(blobfile);
  3. Filesystem.writeFile({ path: ‘video.mp4’, data: filedata, directory: FilesystemDirectory.Data })…
  4. Filesystem.getUri({ path: ‘video.mp4’, directory: FilesystemDirectory.Data })…
  5. Set Capacitor.convertFileSrc(‘file://’ + res.uri) as video source (while res.uri = /DATA/video.mp4)

What am i doing wrong?

Thanks in advance!
Kind regards,
Alex

1 Like
2

?

1 Like
3

Doesnt really help at all and most of these steps i already mentioned.

I get stuck on inserting the video als video source:

06
Bildschirmfoto 2019-10-21 um 10.30.06.png2380×92 23.5 KB
49
Bildschirmfoto 2019-10-21 um 10.29.49.png1702×570 70.5 KB

1 Like
4

Have you tried passing the blob to the src attribute as a base64 encoded string? I ran a few test and it should work fine.

5

You can use this code example. for your problem

async readAndDisplayVideo(path: string) {
  try {
    const readResult = await Filesystem.readFile({
      path: path, // Provide the correct path to your video file
      directory: FilesystemDirectory.Documents // Specify the directory
    });
    const videoBlob = new Blob([new Uint8Array(readResult.data)], {
      type: ‘video/mp4'
   });
    const videoURL = URL.createObjectURL(videoBlob);
    const videoElement = document.createElement('video');
    videoElement.controls = true; // Show video controls (play, pause, etc.)
    videoElement.src = videoURL;
    document.body.appendChild(videoElement);
    videoElement.play();
  } catch (error) {
    console.error('Error reading the video file:', error);
  }
}