Rendering Html5 Animation Server-side?

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

Solution 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 :(

Solution 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.

Solution 3:

Sounds interesting. I've done a similar thing with the QtWebKit library that requires a headless X server to run. What I was doing was converting web pages to PDF on a large scale. It might make sense to search for some webkit2pdf tools to see an example that you can build off of.

I would take a look at the library and combine it with another recording solution.

Solution 4:

In terms of tooling I've had a pretty decent experience with these Ruby tools:

• the headless gem supports video capturing with ffmpeg
• capybara will allow you to drive e.g. firefox.

I have NO idea about how they deal with audio though