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

Question

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!

Answer 1

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:

1. Xvfb
2. ffmpeg
3. google chrome

Steps:

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

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