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

Question

这是我所做的研究中的一个难题，在此先感谢您花一些时间来研究它，因为我完全被卡住了！

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

如何运作：

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

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

要求：

• 必须是基于代码或自动化友好的方法。
• 必须录制DOM动画的高质量60fps视频，且没有延迟。
• 必须记录基本的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将启动虚拟屏幕并提供该编号。启动屏幕后，它将在其中打开google chrome。

2. 启动ffmpeg并给它一个显示号，上面给出所有偏移量以对齐捕获窗口。

   ffmpeg -video_size 1024x768 -framerate 60 -f x11grab -i :0.0+100,200 output.mp4
   

   上面的命令:0是需要根据实例调整的显示编号。请注意，如果您要捕获10s最多，则可以通过-t在ffmpeg中传递标志来对其进行调整。

注意：完成后，请记住要处置Xvfb屏幕和任何其他悬空过程。