错误报告者：getDisplayMedia 的替代方案？

Question

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

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

使用

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

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

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

Answer 1

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

Answer 2

您必须使用 https://developer.chrome.com/extensions/desktopCapture APIs. As this poses a security concern, its not available without an extension. There is a talk to add this in next version of webrtc spec (https://w3c.github.io/mediacapture-screen-share/ 开发扩展（至少在 chrome 上）。您可能需要关注它并跟踪进度。

Answer 3

如您所见，Chrome 和 Firefox 当前实施了过时的 unofficial draft. The bug tracker for getDisplayMedia in Firefox is here。

如果有帮助，您不再需要 Firefox, but you do need to use https (so you must 中的扩展）：

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

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

<video id="video" height="240" width="320" autoplay></video>

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

Answer 4

getDisplayMedia() 现已在 Edge 17 and 18 and 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 将询问您是否要共享屏幕、应用 window 或 Chrome 标签页：

错误报告者：getDisplayMedia 的替代方案？

Bug reporter: Alternatives to getDisplayMedia?

javascript

webrtc

get-display-media