Question

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

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

使用

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

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

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

Answer 1

正如您所注意到的，Chrome和Firefox目前正在实施过时的unofficial draft。 Firefox中getDisplayMedia的错误跟踪器是here。

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

＆＃13;

var constraints = {video: {mediaSource: "screen", width: 320, height: 200}};

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => video.srcObject = stream)
  .catch(e => console.log(e.message));

＆＃13;

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

＆＃13;

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

Answer 2

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

Answer 3

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

Answer 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标签：

Bug记者：getDisplayMedia的替代品？

4 个答案: