Save animations to webm (using HYPE.video.js, Whammy and HTML2Canvas)

This is a little nerdy but might be of help to somebody. You can save an animation to webm by integrating the Hype Video Export runtime in your project and sprinkle in some Whammy and HTML2Canvas. This has the limitations of HTML2Canvas and certainly will use a lot of RAM, but it runs on a frame by frame basis, so no frame should be dropped. On the contrary, you can define your framerate, scale and even the HTML element to be recorded.

Preview Concept:
Save-Animation-To-WebM.html

Download Example:
Save-Animation-To-WebM.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.


Another sidenote: The WebM format generated doesn't calculate interframe compression or applies any major optimizations. This is acceptable for my cases, but bad for cases that demand low file size. In such circumstances, you can use a compressor to get the best results.

4 Likes

Here is a "Press to record" variation:

Preview Concept:
Press-To-Record-Animation-To-WebM.html

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



Press the record button as often as you need and then hit the arrow to download and start a new recording

1 Like

Wow - this definitely goes on the, "people will use your app in ways you never imagined (or intended)" list! Great hack.

1 Like