时间戳

首页 > 解决方案 > 如何使用纯代码方法将 DOM 动画捕获为无损 60fps 视频

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

问题描述

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

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

它是如何工作的：

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

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

要求：

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

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

标签： javascriptanimationdomautomationvideo-capture

解决方案

您无法在 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最多，则可以通过-t在 ffmpeg 中传递标志来进行调整。

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

推荐阅读