Save animations to video like MP4 (using, FFmpegwasm and HTML2Canvas)

This is a variation of a post that did something similar but was limited to webm. This approach on the other hand supports all sorts of video codecs (and even audio mix-ins). The example in this post encodes the output as MP4 (h.264). You can pretty much export and perform operations according to the capabilities of FFmpeg (ported to wasm).

Preview Concept:

Download Example:

Notice: Make sure to update with the latest version. The file can always be found inside the resources' folder of your Hype-application. The example file uses built using and for the Hype 734 build version.


Hallo @MaxZieb.
As always you bring so amazing ideas into function...

I was trying to use / test this version and also the webm version and I am not sure why I don't get a final output, that can be seen.

I was using Chrome and tested both the Preview and the Download Example, I clicked on the record button and after a few times I am clicking on the arrow, but the output file has 1 sec and without no video image...

What am I doing wrong?
Thank you!

It seems like the WASM Version is being blocked by a new rule in Chrome (since July). Would have to debug that, but it was more of an experiment than code I would recommend for production.

b06da3d0-fba8-414e-be5b-72f282e803bd:22 [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021. See for more details.

1 Like

Thank you!