9

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.

Mikko Ohtamaa
  • 82,057
  • 50
  • 264
  • 435
  • Hii Mikko, I have web application where a user can create animations, I would like to render these animations to video on server side, can you provide your repo or any solution to my problems? Am struggling so far thanks – The Dead Man May 13 '19 at 06:47

4 Answers4

5

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

Mikko Ohtamaa
  • 82,057
  • 50
  • 264
  • 435
  • I'm curious if you have any update for this answer, now that years have passed and that all the browsers have changed quite a bit. Still using this solution? – Brad Apr 07 '18 at 22:02
  • Yes, I managed to solve it and managed to render webGL on server side. Just run the animation loop tick-by-tick, capture pixel content and encode it as a raw frames or video. – Mikko Ohtamaa Apr 09 '18 at 07:05
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.

cdeszaq
  • 30,869
  • 25
  • 117
  • 173
0

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

Marc Seeger
  • 2,717
  • 4
  • 28
  • 32
0

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.

Max
  • 6,901
  • 7
  • 46
  • 61