How to extract these files when using ffmpeg.wasm to output in picture group?

Question

How to extract these files when using ffmpeg.wasm to output in picture group?

I am working on the video upload function, in which ffmpeg.wasm is used for video encode. The function of video encode has been realized. There is also a function to generate video thumbnails, which needs to be completed.

The video player uses the DPlayer. The player's requirement for thumbnails is to capture sprite images of 100 pictures. So I want to output a picture group, but I can't extract these files, How to solve it? the relevant code is below.

---

//The length of the test video is 160 seconds
ffmpeg -i ../../test.mp4 -vf fps=1/(160/100) ../../thumbnail/thumbnail%d.png

var in_name = "upload.mp4";
var out_name = "thumbnail%d.png";

(async () => {
    await ffmpeg.load();
    ffmpeg.FS('writeFile', in_name, await fetchFile(original_video_file));
    await ffmpeg.run('-i', in_name, '-vf' , 'fps=1/(160/100)' , out_name);
    var new_file = ffmpeg.FS('readFile', out_name);
    var thumbnail = new Blob([new_file.buffer], { type: 'image/png' });
    console.log(thumbnail);
})();

The error reported by the above code is

Uncaught (in promise) Error: ffmpeg.FS('readFile', 'thumbnail%d.png') error. Check if the path exists

enter image description here

---

If you can understand Chinese, here are some of my previous attempts.

https://segmentfault.com/q/1010000043821339

Answer 1

I found a way, if it should be like this when getting the file according to the original code.

ffmpeg.FS('readFile', 'thumbnails1.png');
ffmpeg.FS('readFile', 'thumbnails2.png');
ffmpeg.FS('readFile', 'thumbnails3.png');

Then you can create a new directory first and specify the output here.

ffmpeg.FS('mkdir','/thumbnails');

---

var in_name = "upload.mp4";
var out_name = "thumbnails/thumbnails%d.png";

(async () => {
    await ffmpeg.load();
    //First create a thumbnails directory in the file system
    ffmpeg.FS('mkdir','/thumbnails');
    ffmpeg.FS('writeFile', in_name, await fetchFile(original_video_file));
    await ffmpeg.run('-i', in_name, '-vf' , 'fps=1/(160/100)' , out_name);

    //Read the contents of the specified folder
    console.log(ffmpeg.FS('readdir', '/thumbnails'));
    //view first image
    var new_file = ffmpeg.FS('readFile', 'thumbnails/thumbnails1.png');
    console.log(new Blob([new_file.buffer], { type: 'image/png' }));
})();

If you can find the first picture, the rest will not be a problem.