Bug 记者：getDisplayMedia 的替代品？答案

【问题标题】：Bug reporter: Alternatives to getDisplayMedia?Bug 记者：getDisplayMedia 的替代品？
【发布时间】：2017-01-26 19:29:40
【问题描述】：

我正在尝试在我的网站上实现一个错误报告器。我的目标是用户能够在解决问题时用声音描述问题并记录浏览器选项卡。然后，错误报告将只是一个视频文件，可以通过电子邮件发送给我。

看来提议的navigator.mediaDevices.getDisplayMedia 正是我想要的，但似乎没有浏览器实现它，我也没有在路线图上找到任何实现计划。

使用

var constraints = {video: {'mandatory' {'chromeMediaSource':'screen'}},
                   audio: true };
navigator.mediaDevices.getUserMedia(constraints)

确实有效，但只有在启动时将命令行标志传递给 Chrome 之后。我认为基本上零用户会经历这个麻烦来帮我提交错误报告。

有没有其他方法可以实现我的目标？

【问题讨论】：

标签： javascript webrtc get-display-media

【解决方案1】：

您已经注意到，Chrome 和 Firefox 目前实现了一个过时的unofficial draft。 Firefox 中getDisplayMedia 的错误跟踪器是here。

如果有帮助，您不再需要 Firefox 中的扩展名，但您确实需要使用 https（因此您必须使用 open this page in https first）：

var constraints = {video: {mediaSource: "screen", width: 320, height: 200}};

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => video.srcObject = stream)
  .catch(e => console.log(e.message));

&lt;video id="video" height="240" width="320" autoplay&gt;&lt;/video&gt;

但是，请注意唯一的security risks of sharing your screen with a browser window on it。

【讨论】：

刚刚验证了这在 Firefox nightly (v55) 上有效；谢谢！对于我自己的用例，我不需要查看用户的整个屏幕，我只需要查看我已交付的选项卡。因此，如果 FF 决定实施标签共享，大概存在较小的安全风险。 . .
@user14717 需要明确的是，提到的风险适用于任何最终共享 Web 界面的共享，因为该 Web 界面可以被操纵以从用户登录会话中显示有针对性的私人信息。
FWIW tab-sharing in Firefox 在 pref atm 后面。因为缺少选项卡选择 UX。
@jib：屏幕共享是否需要 HTTPS（这就是您要求的原因）？
@PhilippHancke 是的，屏幕共享需要 HTTPS，因为我提到了攻击风险。

【解决方案2】：

您必须使用https://developer.chrome.com/extensions/desktopCapture API 开发扩展程序（至少在 chrome 上）。由于这会带来安全问题，因此如果没有扩展，它就无法使用。在下一个版本的 webrtc 规范 (https://w3c.github.io/mediacapture-screen-share/) 中有一个添加这个的讨论。您可能需要密切关注并跟踪进度。

【讨论】：

【解决方案3】：

目前实现了旧版本的 API。请参阅this module，其中包括 Chrome 和 Firefox 的示例扩展（注意：Firefox 很快将不再需要扩展白名单）

【讨论】：

【解决方案4】：

getDisplayMedia()现已在Edge 17 and 18和it is under a flag in Chrome 70推出

截屏所需代码如下：

navigator.getDisplayMedia({ video: true }).then(stream => {
    console.log("Awesome");
}, error => {
    console.log("Unable to acquire screen capture", error);
});

Chrome 会询问您是要共享屏幕、应用程序窗口还是 Chrome 标签：

【讨论】：

警告：它刚刚移动到 navigator.mediaDevices.getDisplayMedia :-/