3

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

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

用于

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

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

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

4

4 回答 4

4

正如您所注意到的，Chrome 和 Firefox 目前实施了一个过时的非官方草案。getDisplayMediaFirefox 中的错误跟踪器在这里。

如果有帮助，您不再需要Firefox中的扩展程序，但您确实需要使用 https（因此您必须先在 https 中打开此页面）：

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>

但是，请注意与浏览器窗口共享屏幕的独特安全风险。

于 2017-01-27T20:43:20.020 回答
2

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

于 2017-01-26T22:19:30.670 回答
0

当前实现了旧版本的 API。请参阅此模块，其中包含 Chrome 和 Firefox 的示例扩展（注意：Firefox 很快将不再需要用于白名单的扩展）

于 2017-01-26T20:42:50.777 回答
0

getDisplayMedia()现在已在Edge 17 和 18中推出，并且在 Chrome 70 中处于旗帜下

截屏所需的代码如下：

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

Chrome 会询问您是否要共享您的屏幕、应用程序窗口或 Chrome 选项卡： 在此处输入图像描述

于 2018-11-23T16:46:13.973 回答