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

Question

这是我所做的研究中的一个难题，所以提前感谢花一些时间来研究它，因为我完全陷入困境！

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

它可能如何工作：

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

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

要求：

• 必须是基于代码或自动化的方法。
• 必须录制高质量的60fps DOM动画视频而不会出现滞后现象。
• 必须记录基本的DOM元素动画，而不是canvas或基于WebGL的动画。

非常感谢你的帮助！这是一个非常难以解决的问题。我想以某种方式回馈给谁来解决这个问题。

如果您有任何问题只是评论，我会在同一天回复。提前致谢！

Answer 1

你无法在StackOverflow上获得完整的脚本。但是，我可以给你编写自己脚本的步骤。

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

先决条件：

1. Xvfb
2. ffmpeg
3. google chrome

脚步：

1. 在google chrome发射Xvfb xvfb-run --server-args='-screen 0, 1024x768x16' google-chrome -start-maximized http://www.example.com > /dev/null & 在上面的命令中，-screen是需要随运行的每个实例更改的显示数字。 Xvfb将启动虚拟屏幕并为其提供该号码。启动屏幕后，它将打开谷歌浏览器。
2. 启动ffmpeg并给它一个显示号码，以及任何偏移以对齐捕获窗口。 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库似乎完全符合你的要求。我没有用它，所以我不能保证它。