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.

5 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. Make sure to update HYPE.video.js found under Hype.app/resources (in the package) to match the current version of Hype you are using.

3 Likes

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

3 Likes

Hi Max, i used it for an insta-storyslide-webtemplate ... Works Like a Charme :+1::smile:

1 Like

Looks great! Here it is:

DL

1 Like


the sample of such an introducing topicslide introvideo ...

1 Like

My sample and tutorial a pretty out of date… so congrats to @h_classen to make them work again. I need to update them when I got time…

↑ look at project

Updated all the dependencies, thank you @h_classen for the hint. The whammy.js dependency especially isn't maintained anymore, but some people are still providing pull request. That fixes some issues. The new whammy.js in the example is taken from Jannchie (on Github). Seems to be fixing a render bug and an overflow beyond 32 seconds.

The Download and example above have been replaced. Furthermore, make sure to always update to the latest HYPE.video.js found in the Hype.app/resources/

Update: Press to record example has also been updated.

1 Like

Sorry , I don't get it..what is this different then export to mp4?

I make little movies for instagram by this way...and after that I use Premiere to combine it with audio

it's not about an export from Hype, but building a webversion, that can export video direct from the browser ...
this way you can setup standrad-animations using diffent texts and images ... say for socialteam ...

You can easily use something like WordPress, ACF and Hype Data Magic to create a custom post type that allows to export videos based on dynamic data without the need to export from Hype. You can just run the above encoding in the browser…

… an elementary idea is also to use editable fields approach without a backend. Allowing the user to change test by setting contenteditable and even uploading images locally.