CODEWITHSUNDEEP
javascriptanimationdomautomationvideo-capture
thomallen
thomallen

Reputation: 2034

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:

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!

Upvotes: 5

Views: 1826

Answers (2)

Ben
Ben

Reputation: 254

Maybe look into Puppeteer or Selenium.
I know they can take screenshots, so maybe they will be able to record sufficient video as well.

I found this library which seems to do exactly what you ask for. I haven't used it though, so I can't vouch for it.

Upvotes: 0

Vipin Kumar
Vipin Kumar

Reputation: 6546

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.

Upvotes: 6

Related Questions