Best way to record a HTML Canvas/WebGL animation server-side into a video?

Question

I have a set of animations which I can make in Canvas (fabric.js) or WebGL (three.js). I need to record them automatically, server-side, through a script and output a video file.

The animations include:

1. Pictures
   
2. Videos (with audio)
   
3. Other animations/effects

I have researched a lot during last few months on this.

Results
1. Use PhantomJS + FFMPEG
Run HTML Canvas animations on headless browser(PhantomJS) and record with FFMPEG. Here the issue is PhantomJS supports neither WebGL nor Video element. http://phantomjs.org/supported-web-standards.html

2. Use Websockets to send data back to server using DataURL
Here again, we will need to run the animations on browser (which we can't because we have to do everything on server).

3. Use node-canvas
This is a library by TJ Holowaychuk which allows rendering HTML Canvas on Node.js. But it has its own limitations plus I haven't really explored this field much. (If someone could shed more light on this library)

If anyone has done it before or can guide me somewhere useful.
All we need to do is use some data to create animations and record it into a video, everything on server side.

Answer 1

You can use electron to render WebGL pages with BrowserWindow option "show" set to false and/or use xvfb-run to run headless.