将Firefox选项卡记录为像chrome屏幕上的视频一样

时间:2016-02-11 11:46:01

标签: javascript firefox firefox-addon record mediarecorder-api

我想在Chrome浏览器扩展程序中记录一个firefox浏览器标签,例如Screencastify扩展程序。关于记录chrome扩展的会话,chrome.tabCapture API用于获取当前活动选项卡的流并记录Web-RTC实验的流RecordRTC.js。同样明智的是,Mozilla Firefox中是否有任何API可以在Firefox浏览器中获取选项卡流。

P.S:我问的是记录firefox的标签没有记录屏幕或窗口或通过凸轮。

2 个答案:

答案 0 :(得分:1)

several privileged apis可让您将部分窗口或xul元素捕获到画布上下文中。然后,画布可以captured成为媒体流。

答案 1 :(得分: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>

请注意,要让此代码段在浏览器中使用,您首先必须view this page in https

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

最后,您还必须在 about:config 中将media.navigator.permission.disabled设置为true,因为Firefox未实施Tab选择器。

在扩展中没有必要这样做。

在扩展程序中,您可以使用browserWindow约束传递要捕获的选项卡的外部窗口ID。

  

警告:由于固有的安全风险,您可能希望之后删除,stacksnippets.netmedia.navigator.permission.disabled。 SO帖子可能会以这种方式窃取您的银行帐户信息,通过iframing您可能登录的常见银行网址,仅为您(现在他们!)查看,有效地终止跨域限制。不开玩笑!