Record a html5 animation to video - without human interaction

javascript html animation html5-video video-capture
klodoma picture klodoma · Dec 31, 2014 · Viewed 7.7k times · Source

I have one big question: HOW TO RECORD A HTML5 ANIMATION TO VIDEO without human interaction? We're looking for a open/source or even proprietary solution.

The use-case:

We want to start a project where we will create Html5 animations. The animations will be a short technical presentation (2-5 Minutes) that will include all kind of animations: lines, charts, areas. It will have also an audio track.

To generate the animations we'll use different JS libraries:

We need to be able to record this animation and save it as a mp4 video or equivalent.

The big question is: HOW TO DO IT?

I see 2 options:

  1. Record it with PhantomJs

Based on my research the FPS is almost impossible to control. I've ran a few tests, the results are not very good. Greensock timeline could help but we need to have flexibility with the JS libraries we use.

  1. Play it in the browser and record it with some tool

This would be awesome if we can automate it.

Thanks in advance!

References used in my research

Answer

klodoma picture klodoma · Jan 4, 2016

I have created/found a solution to this problem. As some people already mentioned xvfb is the answer and yes it is.

I've created a docker container, which is running with xvfb, google chrome and ffmpeg, nodejs pre-installed.

I use nodejs and chrome-remote-interface to communicate with the browser.

Practically I execute the following steps:

  1. start the docker container.
  2. start chrome(as headless as possible)
  3. use chrome-remote-interface to connect to chrome
  4. open the animation url
  5. prepare the animation the web-page notifies nodejs(through console) that the animation is ready start ffmpeg (from nodejs) and the animation in the browser.
  6. process the video

I can't publish the whole code unfortunately due to license issues, but I can paste parts of it.

If anyone has questions, let me know.

Related questions

jQuery animated number counter from zero to value

I have created a script to animate a number from zero to it's value. Working jQuery Not Working I now want to run the script several times on the page for each matching class. Below is what I am trying …

Read More
How do I re-trigger a WebKit CSS animation via JavaScript?

So, I've got this -webkit-animation rule: @-webkit-keyframes shake { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left:0; } } And some CSS defining some of the animation rules on my box: #box{ -webkit-animation-duration: .02s; -webkit-animation-iteration-count: 10; -webkit-animation-timing-function: linear; } I can shake the #box like …

Read More
Show hide div with animation

I made this script, which opens a div with the right class and close the others. function showhide(id) { if (document.getElementById) { var divid = document.getElementById(id); var divs = document.getElementsByClassName("hideable"); for (var i = 0; i < divs.length; i = …

Read More