how to get image from video and display it as gallery on angular

Question

I have lists of video URLs and wish to generate thumbnail gallery out of them on angular? Any input or idea is a big help.

tried this one but Im getting a lot of errors:

public addVide() {
    fetch('\\archiveFOOTAGEMP4\2022-06-09T17-29-59.fixed.mp4')
      .then((res) => res.blob()) // Gets the response and returns it as a blob
      .then((blob) => {
        const video: HTMLVideoElement = this.document.createElement('video');
        const canvas: HTMLCanvasElement = this.document.createElement('canvas');
        const context: CanvasRenderingContext2D = canvas.getContext('2d');
        return new Promise<string>((resolve, reject) => {
          canvas.addEventListener('error', reject);
          video.addEventListener('error', reject);
          video.addEventListener('canplay', (event) => {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
            resolve(canvas.toDataURL());
          });
          if (videoFile.type) {
            video.setAttribute('type', videoFile.type);
          }
          video.preload = 'auto';
          video.src = window.URL.createObjectURL(videoFile);
          video.load();
        });
      });
  }

Thanks

Answer 1

Try something like this in your code. It might be helpful.

https://stackblitz.com/edit/generate-video-file-thumbnail?file=index.js

https://stackoverflow.com/a/63474748/6935413