javascript animation dom automation video-capture

How to capture DOM animations as lossless 60fps video with code only approach

This is a hard problem from the research I have done so thanks in advance for taking some time to look into it cause I'm totally stuck!

I need a way to capture DOM animations in 60fps lossless video and do it in a way that can be automated and integrated into an app so that I can capture hundreds of variations of a single animation as video.

How it might work:

capture-video https://codepen.io/RobinTreur/full/pyWLeB/ --length 10s --size 800x600

Script would visit that url (contains a text animation example) and then output a video that shows the captured animation as a 60fps video without lagging.

Requirements:

Must be a code-based or automation friendly approach.
Must record high quality 60fps video of DOM animations without lag.
Must record basic DOM element animations, not canvas or WebGL based.

Thank you so much for your help! This has been a very hard problem to solve. I would love to give back somehow to whoever solves this problem.

If you have any questions just comment and I will respond same day. Thanks in advance!

Solution

You can't get full script here at StackOverflow. But, I can give you steps to write your own script.

Please note following step works only in linux.

Pre-requisites:

Xvfb
ffmpeg
google chrome

Steps:

Launch google chrome in Xvfb
```
xvfb-run --server-args='-screen 0, 1024x768x16' google-chrome -start-maximized http://www.example.com > /dev/null &
```
In above command -screen is display number that need to be changed with each instance your run. Xvfb will launch a virtual screen and give it that number. After launching screen, it will open google chrome in it.
Launch ffmpeg and give it a display number give aboven along with any offset to align capturing window.
```
ffmpeg -video_size 1024x768 -framerate 60 -f x11grab -i :0.0+100,200 output.mp4
```
In above command :0 is display number that need to be adjusted as per instance. Note that if you want to capture upto 10s then it can be adjusted by passing -t flag in ffmpeg.

Note: Once done, remember to dispose Xvfb screen and any other dangling process.