javascript - 如何使用仅代码方法将 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. 谷歌浏览器

步骤:

1. 在 Xvfb 中启动 google chrome

   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 屏幕和任何其他悬挂进程。