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

Question

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

1. 首先，我发现这个很棒blog post并实现了它。一切都很完美，直到我发现phantomjs is not supporting html5视频标签无法捕捉视频。

2. 第二个选项是使用无头镀铬连续screenshots并将这些屏幕截图提供给ffmpeg以创建视频。虽然它在某种程度上起作用，但是无头的线索截图花了一些时间......我无法创建一个流畅的视频..

3. 在我的第三次尝试中，我有机会使用chrome的Page.startScreencast api。它可以获得视频捕获但帧速率确实存在问题。原因是that ..

4. 现在我正在使用xvfb + chrome / firefox + ffmpeg组合来捕获that评论中提到的视频。理论上它很有前途，但我无法捕获视频。相反，我有黑屏......

我的设置如下：

• light-http服务器，在html5视频标签内有简单的视频（网络）;在localhost上
• 使用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：还有一种可能的解决方案，我还没有尝试过。因为幻影有捕捉画布的能力;有可能
• 放video into canvas
• 然后捕捉画布

这似乎是一个肮脏的解决方法，这就是为什么没有尝试过..

UPDATE-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。