Generating movie from images in memory

I’m trying to convert a Canvas animation into a video. As the animation may not run at 60fps I’m thinking I want to create a still image of each frame like so

thumbnailCanvas.toDataURL('image/jpeg', 1);

and then stitch them all back together to make the video.

As I want this to run completely client side, I don’t have the option of creating a temp /images folder and iterating over that.

Is this possible with ffmpeg.js? I’ve been playing around with worker.run(... but can’t seem to figure out the correct arguments and options.

Thanks for any help (and awesome lib btw!)

[danvoyce]

Yes you are right. After some digging I found you can use %d instead which solves my issue, so now I’m using

-framerate ${fps} -i /data/%d.jpg -s ${width}x${height} -c:v libx264 -pix_fmt yuv420p out.mp4

Again thanks so much, this is a game changer for me. I seriously owe you a beer!

[boraturant]

Hi,

This method doesn’t seem to be working now. Has there been any change where the files are stored? (/Data/) or any other mechanics?

Error: could find no file with path ‘/data/img_%04d.jpg’ and index in the range 0-4

I can read the file with the worker.read method.

//For loop

var dataURL = this.canvas.toDataURL('image/jpeg', 1);

await worker.write( `img_${String(frameNo).padStart(4, '0')}.jpg`,
				dataURL
			       );
frameNo++;
//End loop

await worker.run(
			'-framerate 30 -start_number 0  -i /data/img_%04d.jpg  -c:v libx264 out.mp4',
			{
				outputPath: 'out.mp4'
			}
);