Rendering HTML5 animation server-side?

Question

We are creating animations using HTML5 + Javascript. Now, we'd like to convert these animations to video files (MPEG4, or other, doesn't matter) so that browserly challenged people could also see the animations. Animations contain an audio track.

We are looking for solutions where HTML page would be rendered and recorded on the server side. I know there exist tools for rendering web page thumbnails etc. static images already. However, in our use case we should output a video file.

What options are there? Is headless X server + Firefox a way to go? Preferably we'd be running this in a cloud (Amazon EC2).

Also if there something special we'd need to think when playing animation in non-real-time speeds, I'd like to hear - e.g. syncing HTML5 audio with animation.

Answer 1

Just to note that we have solved this problem by

• Running Firefox on a headless server. A server with a decent graphics card.

• Having a Selenium Python control script to start/stop rendering

• A custom rendering loop which will use Firefox's XPCom API to feed <canvas> raw pixels directly in the encoding pipeline

• A custom Javascript rendering loop where clock does not come from a real clock, but it slices frames to the renderer on a stable framerate which is not real-time

Quite a complex system, so doesn't fit into one Answer box :(

Answer 2

One thing that might work, depending on your animation, would be to essentially create an animated gif. With enough still images of your animation strung together, you should be able to turn those into a video with the right software. This is a rather brute-force solution, but if you can advance through your animation in a "frame-by-frame" fashion, it might work.