Record a html5 animation to video - without human interaction [closed]

Question

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:

• http://highcharts.com
• http://raphaeljs.com
• http://greensock.com
• ... other as well

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.

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

• https://groups.google.com/forum/#!msg/phantomjs/wluVGGjhL90/oGBXqh7QP44J
• http://mindthecode.com/recording-a-website-with-phantomjs-and-ffmpeg
• http://www.ultramegatech.com/2010/09/record-html-canvas-animations-to-video/
• http://www.tweetbeam.com/blog/generating-facebook-lookback-style-dynamic-videos-html5-using-phantomjs-ffmpeg/

Answer 1

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.

Answer 2

You could use the Linux Xvfb (Linux virtual framebuffer) for this. Then make a browser run on that X server, and make ffmpeg record from it.

A wrapper for this is: https://github.com/leonid-shevtsov/headless

Answer 3

Just another way slightly different with some code.

I manage to do that with PhantomJS and its screenshot feature.

Basically you access your animation through headerless browser and keep doing screenshots till your animation finishes. You can have a global var to indicate if the animation is done or not.

When you have your screenshots just use FFMPEG to generate the video.

Simple example:

PhantomJS:

var running;
var c = 1;

var intervalId = setInterval(function(){

    running = page.evaluate(function(){
        return window.RUNNING
    });

    if (running) {
        console.log('still running: ', running);
        page.render('temp/screenshot'+c+'.png');
    } else {
        clearInterval(intervalId);
        console.log('still running: ', running);
        phantom.exit(0);
    };

    c++;
}, 100);

With FFMPEG you can do:

ffmpeg -y -r 25 -i temp/screenshot%01d.png -c:v libx264 -r 25 -pix_fmt yuv420p video.mp4

Where 25 is the FPS (frames per second) which you can adjust as you need.

I hope it can be useful to someone.