如何使用纯代码方法将 DOM 动画捕获为无损 60fps 视频

Question

根据我所做的研究，这是一个难题，所以提前感谢您花一些时间研究它，因为我完全被困住了！

我需要一种方法来捕捉 DOM 60fps 无损视频中的动画，并以一种可以自动化并集成到应用程序中的方式进行，这样我就可以捕捉单个动画的数百种变化作为视频.

工作原理：

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

脚本会访问那个 url（包含一个文本动画示例），然后输出一个视频，将捕获的动画显示为 60fps 视频，没有滞后。

要求：

非常感谢您的帮助！这是一个很难解决的问题。我很乐意以某种方式回馈解决这个问题的人。

如果您有任何问题，请发表评论，我会在当天回复。提前致谢！

Answer 1

您无法在 Whosebug 此处获得完整的脚本。但是，我可以为您提供编写自己的脚本的步骤。

请注意以下步骤仅适用于 linux。

先决条件：

步骤：

在 Xvfb
中启动 google chrome
```
xvfb-run --server-args='-screen 0, 1024x768x16' google-chrome -start-maximized http://www.example.com > /dev/null &
```
在上面的命令中，-screen 是需要在每个实例中更改的显示编号运行。 Xvfb 将启动一个虚拟屏幕并给它那个数字。启动屏幕后，它会在其中打开google chrome。
启动 ffmpeg 并给它一个上面给出的显示编号以及任何偏移量以对齐捕获 window.
```
ffmpeg -video_size 1024x768 -framerate 60 -f x11grab -i :0.0+100,200 output.mp4
```
上面命令中的:0是需要根据实例调整的显示数。请注意，如果您想捕获最多 10s，则可以通过在 ffmpeg 中传递 -t 标志来调整它。

注意：完成后，记得处理 Xvfb 屏幕和任何其他悬空进程。

Answer 2

也许看看 Puppeteer 或 Selenium。
我知道他们可以截屏，所以也许他们也可以录制足够的视频。

我发现 this 库似乎完全符合您的要求。不过我没用过，所以我不能保证。

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