Im trying to record a 5 second video of the browser and then save them as an mp4 file.

So far I am capturing the browser as an image alright, and then I can use ffmpeg on my machine locally to create a video using the downloaded pngs BUT I want to generate this video using the array of image urls I will have generated without the user having to download all the images first.

Here is what I have so far to test how I obtain the images:

let myImages = []
let imageCount = 120

window.runGrab = function(){ 
    html2canvas(document.body, {
        useCORS: true,
    }).then(function (canvas) {
        for(let i = 0; i <= imageCount; i++){
            setTimeout(function(){
                myImages.push(canvas.toDataURL("image/png"))

                if(i === imageCount){
                    let a = document.createElement("a");

                    a.href = myImages[0];
                    a.download = 'img000.png';
                    a.click();
                }
            }, 24)
        };
    })
}

And here is the command line I'm using manually to test the video creation:

ffmpeg -loop 1 -i img%03d.png -c:v libx264 -t 5 -pix_fmt yuv420p -vf scale=320:240 out.mp4

How can I pass the image urls instead of 'img%03d.png'?