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.
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 pipelineA 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 🙁