1

我想通过浏览器扩展记录一个 Firefox 浏览器选项卡，例如Screencastify扩展在 chrome 中所做的。关于 chrome 扩展的 Recording Session ，chrome.tabCapture API 用于获取当前活动标签的流，并记录使用Web-RTC Experiment 的RecordRTC.js流。同样明智的是，Mozilla Firefox 中是否有任何 API 可以获取 Firefox 浏览器中的选项卡流。

PS：我问的是记录 Firefox 的选项卡，而不是记录屏幕或窗口或通过 cam。

4

2 回答 2

1

您可以像这样在 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 中查看此页面。

然后，出于安全原因，您必须附加到about:config下,stacksnippets.net的站点列表才能使其正常工作。media.getusermedia.screensharing.allowed_domains

最后，您还必须在about:configmedia.navigator.permission.disabled中设置，因为 Firefox 没有实现选项卡选择器。true

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

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

警告：由于固有的安全风险，您可能希望在之后删除,stacksnippets.net。media.navigator.permission.disabledSO 帖子可能会以这种方式窃取您的银行帐户信息，通过 iframe 构建您可能登录的常见银行 URL，只有您（现在是他们！）才能看到，有效地终止运行跨域限制。可不是闹着玩的！

于 2016-04-16T14:40:54.790 回答
1

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

于 2016-02-11T21:32:14.113 回答