Save animations to video like MP4 (using HYPE.video.js, 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:
Press-To-Record-Animation-To-FFmpg.html

Download Example:
Press-To-Record-Animation-To-FFmpg.hype.zip


Notice: Make sure to update HYPE.video.js 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 https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details.

Thank you!

After reading through this thread this approach might also be revived.

It still requires either hosting the WASM version with the project or using one on a special netlify server that has the needed cross origin settings (provided by the project maintainer). All in all it does add a 2-3mb WASM dependency, but the upside is it can output mpeg and all sorts of video features. Still not fixed, just a small feedback after looking into the WMV version. If WMV is enough the Whammy approach is much sleeker regarding dependencies, though.