如何以编程方式捕获html5视频（无头）

Question

我正在尝试以编程方式捕获具有js / css效果的html5视频。我尝试了几种方法。

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

2. 第二种选择是使用无头的chrome拍摄连续的屏幕截图，并将这些屏幕截图输入ffmpeg以创建视频。尽管它在某种程度上可以正常工作，但无头的chrome屏幕快照仍需要一些时间。.我无法创建流畅的视频。

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

4. 现在，我正在研究xvfb + chrome / firefox + ffmpeg组合，以捕获该评论中提到的视频。从理论上讲，这是有希望的，但我无法捕获视频。相反，我有黑屏。

我的设置如下：

• light-http服务器，在html5视频标签中具有简单的视频（网络）；在本地主机上
• 使用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

• 结果是黑色视频:)

应该是什么问题，我该如何解决问题？

---

ps：还有一种可能的解决方案，我还没有尝试过。由于phantomjs具有捕获画布的功能；有可能

• 将视频放到画布上
• 然后捕获画布

似乎是一个肮脏的解决方法，所以为什么还没有尝试呢。

---

更新1

尝试使用截屏，xwd -root -silent -display :44 -out screen.xwd然后转换为jpeg convert screen.xwd shot.jpg，结果为黑色jpg。

Answer 1

如果您不需要“实时视频输出”，我建议您逐帧捕获视频。这是关于一些现有应用程序的演讲https://vimeo.com/342829825

否则，如果需要生命流，您可以采用obs-linuxbrowser 的方式。所以cef + ffmpeg。