generate thumbnail png from hls m3u8 video stream

[beachstrider]

    const str = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';
    await ffmpeg.load();
    const name = 'playlist.m3u8';
    ffmpeg.FS('writeFile', name, await fetchFile(str));
    await ffmpeg.run(
      '-i', name, '-ss', '00:00:00', '-vframes', '1', '-s', '160x90',
      // '-vcodec', 'copy', '-c', 'copy', '-bsf:a', 'aac_adtstoasc',
      'output.png'
    );
    const data = ffmpeg.FS('readFile', 'output.png');
    setImageSrc(URL.createObjectURL(new Blob([data.buffer], { type: 'image/png' })));

[beachstrider]

Did I miss some options or isn't it possible?

[inglesuniversal]

Can this request be extended to provide jpeg or webp thumbnail from mp4 video?

[danpastori]

Hi @klimazarin & @inglesuniversal ,

I just figured this out for MP4s following this tutorial: https://ottverse.com/thumbnails-screenshots-using-ffmpeg/.

My code looks like:

await this.ffmpeg.run('-i', name, '-vf', "select='not(mod(n, 300))',setpts='N/(30*TB)'", '-f', 'image2', 'thumbnail%03d.jpg' );

And generates a thumbnail every 10 seconds. In the filesystem, it will be thumbnail001.jpg, thumbnail002.jpg. To see which files are created run:

let files = let test = this.ffmpeg.FS('readdir', '/');

Let me know how that works for y'all!