Record html5 animation in video - no human interaction

Question

I have one big question: HOW TO RECORD ANIMATION HTML5 VIDEO without interacting with a person? We are looking for an open / source or even proprietary solution.

Usage example:

We want to start a project where we will create an Html5 animation. Animation will be a short technical presentation (2-5 minutes), which will include all kinds of animations: lines, diagrams, areas. He will also have a soundtrack.

To generate the animation, we will use different JS libraries:

• http://highcharts.com
• http://raphaeljs.com
• http://greensock.com
• ... others also

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

The big question is: HOW TO DO IT?

I see 2 options:

• Recording with PhantomJs

Based on my research, FPS is almost impossible to control. I conducted several tests, the results are not very good. The Greensock graph may help, but we need to have flexibility with the JS libraries we use.

2. Play it in a browser and record it using any tool

That would be great if we can automate it.

Thanks in advance!

Links used in my research

• https://groups.google.com/forum/#!msg/phantomjs/wluVGGjjL90/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 created / found a solution to this problem. As already mentioned, some xvfb is the answer, and yes, it is.

I created a docker container that works with xvfb, google chrome and ffmpeg pre-installed by nodejs.

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

I practically follow these steps:

• launch the docker container.
• start chrome (as headless as possible)
• use chrome-remote-interface to connect to chrome
• open animation URL
• to prepare the animation, the web page notifies nodejs (via the console) that the animation is ready to run ffmpeg (from nodejs) and the animation in the browser.
• process video

I cannot publish all the code, unfortunately, due to license issues, but I can paste parts of it.

If anyone has any questions, let me know.

Answer 2

You can use Linux Xvfb (Linux virtual framebuffer) for this. Then start the browser on this X server and record ffmpeg from it.

Wrapper for this: https://github.com/leonid-shevtsov/headless

Answer 3

The immediate idea of ​​a "not perfect" approach (doing it manually - using JS and saving each individual video frame +, linking everything together later) => after fooobar.com/questions/205987 / ...

Answer 4

Another way is slightly different from some code.

I manage to do this with PhantomJS and its screenshot function.

Basically, you access your animation through a browser without a title and continue to take screenshots until the animation ends. You can have a global var to indicate whether the animation is complete or not.

If you have screenshots, just use FFMPEG to generate the video.

A 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); 

Using FFMPEG you can:

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

Where 25 - FPS (frames per second), which you can configure as needed.

I hope this can be helpful to someone.

Answer 5

It's hard to write this without a human interface. Your javascript should communicate with the back end or the desktop. Recording at 60 frames per second requires a hardware-level API, such as copyfromscreen (x, y, w, h) in C #. One more thing, all HTML5 animation runs at 60 frames per second and higher in the browser. They look very smooth. People record them at 25 or 30 frames per second. If you create MP4, WebM or MOV videos from HTML5, then this will not look very smooth. The rule of thumb is that you should only capture at 60 frames per second. Then it will look very smooth. It requires special equipment and memory to do this job. I recently did this through the online website https://html5animationtogif.com to convert htm5 or css animations to mp4, webm, mov. But it seems that without a human interface it’s hard to fix the start and end frames for your video. Hope this helps.