如何以编程方式（无界面）捕获HTML5视频

Question

我正在尝试使用js/css效果对html5视频进行编程捕获。我尝试了几种方法;

1. 首先，我找到了这篇博客文章并实施了它。一切都很完美，直到我发现phantomjs不支持html5视频标签，因此无法捕获视频。

2. 第二个选项是使用无头chrome连续截屏，并将这些截屏馈入ffmpeg以创建视频。虽然它在某些程度上起作用，但无头chrome的截图需要一些时间..我无法创建平滑的视频..

3. 在第三次尝试中，我给了chrome的Page.startScreencast api一个机会。它可以获取视频捕获，但帧速率确实有问题。原因是那个..

4. 现在我正在使用xvfb + chrome / firefox + ffmpeg组合来捕获视频，如该评论所述。理论上很有前途，但我无法捕获视频。相反，我有黑屏..

我的设置如下：

• 在本地主机上，使用简单的视频 (web) 放在 html5 视频标签中的轻量级 http 服务器;
• 使用 Firefox 启动 xvfb，并导航到 localhost/index.html（视频在其中） xvfb-run --listen-tcp --server-num 44 --auth-file /tmp/xvfb.auth -s "-ac -screen 0 1440x685x24" firefox --headless http://localhost

• 使用 x11grab 参数启动 ffmpeg，从 xvfb 中获取帧 ffmpeg -f x11grab -video_size 1440x685 -i :44 -codec:v libx264 -r 12 ./output.mp4

• 结果是黑色视频 :)

问题可能出在哪里？我该如何调试问题？

---

提示：还有一种可能的解决方案我还没有尝试。由于phantomjs具有捕获画布的能力，因此可能会

• 将视频放入画布中
• 然后捕捉画布

这似乎是一个不太优雅的解决方法，所以还没有尝试。

---

更新-1

尝试使用xwd -root -silent -display :44 -out screen.xwd获取屏幕截图，然后将其转换为jpeg格式convert screen.xwd shot.jpg，结果是黑色的jpg。

- ygk

---

尝试在您的ffmpeg命令中添加- vf format = yuv420p(或-pix_fmt yuv420p别名)和-movflags + faststart输出选项。删除-r 12并用-framerate 12输入选项替换它。使用可被2整除的宽度和高度： ffmpeg -f x11grab -video_size 1440x684 -framerate 12 -i：44 -c：v libx264 -vf格式= yuv420p -movflags + faststart ./output.mp4 - llogan

@LordNeckbeard 我做了，但是我又遇到了黑屏的问题..这可能与xvfb-run有关吗？我该如何检查ffmpeg是否具有正确的帧源？ - ygk

听起来问题与 ffmpeg 无关。我从未使用过 xvfb，因此无法对此发表评论。至于检查帧的正确来源，只需检查您是否具有正确的输入 :display_number.screen_number 并查看输出，就像您所做的那样。 - llogan

你确定你的视频没有加密吗？如果是加密的话，设备会主动阻止你这样做，你最终可能会在许多设备上看到黑屏、帧或图像。 - Mick

@Mick 我下载YouTube上的视频进行测试，它并没有加密，实际上当我在普通浏览器中打开localhost/index.html时，我可以观看视频。 - ygk

Answer 1

如果您不需要“实时视频输出”，我建议逐帧捕获视频。这是有关一些现有应用程序的演讲 https://vimeo.com/342829825 否则，如果需要直播流，您可以采用obs-linuxbrowser的方式。所以cef + ffmpeg。

- majkrzak