如何使用 FFMPEG 捕获浏览器的标签内容答案

【问题标题】：How to use FFMPEG to capture a browser's tab content如何使用 FFMPEG 捕获浏览器的标签内容
【发布时间】：2017-09-02 01:43:01
【问题描述】：

我正在做一个项目，我需要录制将在不同浏览器选项卡中播放的 HTML5 动画。

所以我一直在阅读，显然它可以使用 FFMPEG 完成，也许使用 gdigrab 设备： https://www.ffmpeg.org/ffmpeg-devices.html#gdigrab

您甚至可以从特定窗口抓取（例如使用 title=Calculator 记录 calc.exe）

我想使用此逻辑来捕获多个浏览器选项卡中的每一个内容。（或至少一个）但我不知道 Firefox/Chrome 标签的“标题”，也不知道它们是否可以用作窗口。

我还需要录制音频，所以我需要将计算机的输出设备与选项卡中的视频混合。

如果有人有更多关于我如何做到这一点的信息，我将不胜感激。

谢谢，

【问题讨论】：

必须使用 Windows 吗？你必须使用火狐吗？之后你打算如何处理输出？
嗨，Mulvya，不，现在我正在探索什么是最好的选择，并认为我会从我更熟悉的开始。到目前为止，我停止使用 FFMPEG，我正在使用一个名为 RecordRTC 的 Javascript 库来记录和保存服务器中的视频 blob 输出，并使用 DesktopCapture API 制作了 Google Chrome 扩展，我认为这是一种更简单的方法。我需要做的是以某种方式制作一个脚本，该脚本以某种方式接受 URL 作为输入参数，然后在新选项卡（无头）中打开该 URL，记录其内容，最后关闭它并将视频输出保存到服务器。

标签： windows firefox ffmpeg screen-recording

【解决方案1】：

标签位于浏览器的应用程序逻辑中，因此我认为您不能定位标签。如果将选项卡分离为单独的窗口，则可以捕获它。您需要显示在任务管理器中的字符串。这是窗口标题。

第一次运行tasklist /v /fi "imagename eq firefox.exe" /fo list | findstr Window

这将生成一组由 firefox.exe 控制的所有单独窗口的行

假设您想捕获当前页面，findstr 输出将是

Window Title: firefox - How to use FFMPEG to capture a browser's tab content - Stack Overflow - Mozilla Firefox

然后运行

ffmpeg -f gdigrab -i title="firefox - How to use FFMPEG to capture a browser's tab content - Stack Overflow - Mozilla Firefox" -pix_fmt yuv420p tabgrab.mp4

您可以在录制时移动窗口，但如果您调整它的大小，录制将在该点结束。如果该窗口中有其他选项卡，并且您切换到它们，它们将被捕获。因此，最好将所需的选项卡隔离到自己的窗口中。

对于音频，您需要使用directshow 输入设备。请参阅文档和有关如何列出它们的示例。

【讨论】：

谢谢！这可以完美地找到窗口的正确名称。但是我仍然有必须“一个一个”记录的问题。（如果使用不同的浏览器窗口，则为 2 x 2）当您说选项卡位于浏览器的应用程序逻辑中时，您是对的，所以我最好的选择是找到一个 Firefox 扩展或 API，让我与 FFMPEG 集成。即便如此，我也必须处理重叠的音频源，但非常感谢您的帮助！
您可以为浏览器指定任意数量的单独窗口输入，只要它们具有不同的窗口标题并将它们路由到不同的输出文件即可。您的捕获性能会受到影响，具体取决于您的 CPU/RAM..etc
是否有机会捕获在同一站点上打开的两个浏览器窗口？作为示例场景，在同一站点上运行 e2e 测试的浏览器的两个实例。
您将指定两个输入 (-f gdigrab -i title) - 每个窗口一个。