将Firefox选项卡录制为视频，例如在chrome上截屏

Record the Firefox tab as a video like screencastify on chrome

本文关键字：chrome 视频 选项 Firefox      更新时间：2023-09-26

我想通过浏览器扩展程序录制一个火狐浏览器选项卡，就像 Screencastify 扩展程序在 chrome 中所做的那样。关于chrome扩展的录制会话，chrome.tabCapture API用于获取当前活动选项卡的流，并使用Web-RTC实验的记录RTC.js记录流。同样明智的是，Mozilla Firefox中是否有任何API可以在Firefox浏览器中获取选项卡的流。

PS ：我问的是记录火狐的选项卡，而不是记录屏幕或窗口或通过凸轮。

您可以在 Firefox 中录制一个选项卡，如下所示：

var constraints = { video: { mediaSource: "browser" } };
navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => video.srcObject = stream)
  .catch(log);
var offset = () => video.srcObject.getVideoTracks()[0].applyConstraints({
    mediaSource: "browser",
    scrollWithPage: false,
    viewportOffsetX: x.value,
    viewportOffsetY: y.value
  })
  .catch(log);
var log = msg => div.innerHTML += "<br>" + msg;
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<span title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span> <strong>This is an experimental technology</strong><br>Because this technology's specification has not stabilized, check the compatibility table for the proper browsers versions. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.</p>
Capture offset:<br>
<input id="x" min="0" max="500" value="0" oninput="offset()" type="range">
<input id="y" min="0" max="500" value="0" oninput="offset()" type="range"><br>
<video id="video" height="120" width="320" autoplay></video><br>
<div id="div"></div><br>

请注意，要使此代码段在浏览器中工作，您首先必须在 https 中查看此页面。

然后，出于安全原因，您必须将,stacksnippets.net附加到 about：config 下的 media.getusermedia.screensharing.allowed_domains 站点列表中，以允许此操作正常工作。

最后，您还必须在about：config中设置media.navigator.permission.disabled以true，因为Firefox没有实现Tab选择器。

这些在扩展中都不是必需的。

在扩展中，您将使用 browserWindow 约束传入要捕获的选项卡的外部窗口 ID。

警告：由于固有的安全风险，您可能需要删除,stacksnippets.net并在之后media.navigator.permission.disabled。SO 帖子可能会以这种方式窃取您的银行帐户信息，方法是对您可能登录的常见银行 URL 进行重构，只有您(现在还有他们！(才能看到，从而有效地结束了跨源限制。不是开玩笑！

有几个特权 API 允许您将窗口或 xul 元素的一部分捕获到画布上下文中。然后，可以将画布捕获到媒体流中。

相关文章：