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.

4 Likes

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.

1 Like

Thank you!