Fastest way to create a video from image array

Question

What is the fastest way to create 1 second video from image array:

        var frames = []

        function capture(time) {
            canvas.getContext('2d').drawImage(player, 0, 0, 640, 480);
            preview.getContext('2d').drawImage(canvas, 0, 0, 640, 480);
            var imgString = canvas.toDataURL('image/webp', 1);
            frames.push(imgString);
            requestAnimationFrame(capture)
        }

        requestAnimationFrame(capture)

Code above continuously "captures" an image from a live stream player. What would be the fastest way continuously create video chunks for this continuous image capture?

The fastest is probably to decapitate the lossless images you get (i.e. extract the pure VP8L chunk), then manually stuff WebP image data into ANMF frames, following the description of [WebP format spec](https://developers.google.com/speed/webp/docs/riff_container). However, you'll end up with a huge file if you don't diff the frames to find the bounding box of the changes between frames, and crop the frames accordingly. — Amadan, Apr 06 '20 at 17:35

score 0 · Answer 1 · answered Apr 06 '20 at 17:21

Assuming you just want to make the video, rather than specifically doing this in javascript code, would be to use ffmpeg.

See: How to create a video from images with FFmpeg?

Mind you, on closer reading, this likely won't work for continuous output, which I think you indicate wanting.

Fastest way to create a video from image array

1 Answers1