标签: get-display-media

我有兴趣从用户那里获取屏幕截图，并且我正在使用getDisplayMediaAPI 来捕获用户的屏幕：

const constraints = { video: true, audio: false };

if (navigator.mediaDevices["getDisplayMedia"]) {
  navigator.mediaDevices["getDisplayMedia"](constraints).then(startStream).catch(error);
} else {
  navigator.getDisplayMedia(constraints).then(startStream).catch(error);
}

执行时，浏览器会提示用户是否要共享他们的显示。用户接受提示后，提供的回调接收到一个 MediaStream。为了可视化，我将它直接绑定到一个元素：

  const startStream = (stream: MediaStream) => {
    this.video.nativeElement.srcObject = stream;
  };

到目前为止，这是简单且非常有效的。尽管如此，我只对单个帧感兴趣，因此我想在处理完后立即手动停止流。

我尝试的是video从 DOM 中删除该元素，但 Chrome 一直显示当前捕获屏幕的消息。所以这只会影响视频元素而不是流本身：

我查看了MDN上的Screen Capture API 文章，但找不到有关如何停止流的任何提示。

如何正确结束流以便提示也停止？

我需要将用户显示媒体（屏幕截图）连接到 webRTC 应用程序。

以下代码用于启动屏幕捕获：

navigator.mediaDevices.getDisplayMedia({video: true})

这会提示用户有关屏幕捕获的信息，并创建一个视频流，在授予权限后即可使用该视频流。但是我无法让它在 iOS 或 Android 设备上运行。

iPad 我正在测试此功能，但无法找到navigator.mediaDevices.getDisplayMedia - undefined （iOS 13.3）

当我尝试调用 Android 上的 Chrome (v79) 时，它显示以下错误：

DOMException：无效状态

根据此： https: //developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia 如果代码不是由用户操作启动，则可能会生成错误，但这不应该是问题就我而言，因为代码是这样调用的：

startScreenSharing = event => {
 navigator.mediaDevices.getDisplayMedia({video: true})
}

<Button onClick={this.startScreenSharing} />

事件变量保存有效事件，但我仍然收到“无效状态”错误。

这一定是我所缺少的，因为它在桌面 Chrome 和 Safari 上运行良好。

编辑

我遇到了这个：getDisplayMedia 和屏幕录制的演示，并在此网页上生成了相同的错误。这可能是由于我的硬件设备设置造成的吗？

我正在使用 navigator.mediaDevices.getDisplayMedia 来获取屏幕截图，但它只捕获页面的可见部分，但还有更多内容隐藏在滚动区域中并且被错过。那么是否可以捕获整个页面呢？

   function getDisplayMedia(options) {
        if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
            return navigator.mediaDevices.getDisplayMedia(options)
        }
        if (navigator.getDisplayMedia) {
            return navigator.getDisplayMedia(options)
        }
        if (navigator.webkitGetDisplayMedia) {
            return navigator.webkitGetDisplayMedia(options)
        }
        if (navigator.mozGetDisplayMedia) {
            return navigator.mozGetDisplayMedia(options)
        }
        throw new Error('getDisplayMedia is not defined')
    }

    async function takeScreenshotStream() {
        const width = screen.width * (window.devicePixelRatio || 1)
        const height = screen.height * (window.devicePixelRatio || 1)

        const errors = [];
        let stream;
        const mediaStreamConstraints = {
            audio: false,
            video: {
                width,
                height,
                frameRate: 1,
            },
        };

        try …

我们可以通过将媒体流请求到屏幕或Windows navigator.mediaDevices.getDisplayMedia()。但是，这立即提示用户决定要使用哪种捕获。我需要检查浏览器/平台是否支持屏幕捕获。

当然，可以检查'getDisplayMedia' in navigator.mediaDevices，但这只是告诉我们浏览器是否支持该API。特别是在FF和Android上的Chrome上，已定义了API并且可以调用该API getDisplayMedia()，但它总是立即返回NotAllowedError错误（这是可以预期的：根据caniuse的说法，移动浏览器尚不支持getDisplayMedia。）

接下来，我尝试检查navigator.mediaDevices.getSupportedConstraints()。但是，我的移动FF返回与桌面FF完全相同的对象。尤其navigator.mediaDevices.getSupportedConstraints().mediaSource是true在这两种情况下。最后，返回的数据navigator.mediaDevices.enumerateDevices()也无济于事。我只能得到无法以任何方式解释的设备和组ID（对吗？）。

是否可以getDisplayMedia事先检测是否支持通过屏幕捕获？

（注意：此问答似乎相当相似，但getUserMedia已经相当久远了）

我正在开发一个屏幕捕获应用程序，并且能够使ondataavailable事件工作并以块的形式获取数据，我将其进一步转换为 blob，但是当我通过 websocket 将相同的数据流发送到服务器并将该流另存为 webm 文件时磁盘然后播放文件，该文件不播放任何内容。我认为该文件需要一些我不确定的元信息。

有什么建议？

这是我的 javascript 代码：

socket.emit('message', new Blob([event.data], {type: 'video/webm'}));

服务器保存代码：

fs.writeFile("d://test.webm", data, "binary", function(err) { });

我正在构建一个在线应用程序，单击按钮后我希望能够截取用户在浏览器（我的应用程序）中看到的内容。我已经查看了很多 js 库，例如 html2canvas、CCapture 作为 dom-to-image，但我的页面将混合有 html、svg、canvas 和 webgl 内容，而且我找到的解决方案似乎都无法完美捕获它。

然后我遇到了Screen Capture API和 getDisplayMedia。

我能找到的所有示例总是询问您想要共享哪个选项卡/应用程序/屏幕，然后对您选择的页面进行实时流传输。

理想情况下，除了单击捕获按钮并捕获用户启动该功能的页面的单个图像（数据 url）之外，我不希望用户执行任何其他操作。然后我可以在其他地方使用该 dataurl。

任何建议将不胜感激

我正在使用getDisplayMedia. 当浏览器提示我共享我的屏幕/窗口并且我选择要共享的特定窗口时，该窗口现在突然聚焦并在我的其他窗口前面（特别是在浏览器窗口前面！）。我使用 Firefox 和 Chrome 对此进行了测试，每个都在 Ubuntu 和 Windows 10 上。我使用此页面进行测试。

我个人觉得这种行为有点出乎意料和烦人。我还担心我的应用程序在技术上不太感兴趣的用户会对此感到非常困惑。所以我希望浏览器即使在选择一个窗口后也能保持专注。有可能改变这种行为吗？我检查了 MDN 文档，getDisplayMedia但没有找到任何关于此的信息。我也没有在其他地方找到任何关于此的信息。

如果无法调整这种行为，我想知道：为什么？是技术限制吗？是否是一种隐私/安全功能，可以让用户更清楚地知道此窗口现在已共享？（我个人并不认为它对用户有帮助，但还可以。）

在Google Meet 中，如果您单击“立即演示”，然后单击“Chrome 标签页”，它会弹出一个窗口，让您可以从另一个标签页进行共享。这与标准的Screen Capture API不同，就好像您只是运行

navigator.mediaDevices.getDisplayMedia({
    video: true,
    audio: true,
})

您会看到一个窗口，您可以在其中选择共享整个屏幕、共享窗口或共享选项卡。我想将其限制为仅选项卡。我曾尝试应用约束，如：

video: { displaySurface: 'browser' }

或者

video: { displaySurface: { exact: 'browser' } }

然而，规范说这行不通，实际上也行不通。但如果是这样，那么 Google Meet 是如何做到的呢？

我有一个从getDisplayMedia()返回的实时屏幕捕获媒体流和一个从getUserMedia()
返回的实时网络摄像头媒体流。

我目前将网络摄像头视频渲染在屏幕共享视频的顶部，以创建画中画效果：

我想将它们混合/组合成一个视频流，以便将其渲染在单个 HTML 视频元素内。
我想让两个流保持活动状态和实时状态，就像它们是两个单独的视频呈现两个不同的媒体流一样。
我还需要维护流位置 - 保持网络摄像头流较小并位于屏幕共享流之上。保持原始分辨率和比特率对我来说也非常重要。

我怎样才能做到这一点？

我正在使用屏幕捕获 API，并尝试将最终捕获保存到视频文件（WebM、MP4 等）中。我有这两个 JavaScript 函数：

async function startCapture() {
    try {
      videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    } catch(err) {
      console.error("Error: " + err);
    }
}

function stopCapture() {
    let tracks = videoElem.srcObject.getTracks();
    tracks.forEach(track => track.stop());
    videoElem.srcObject = null;
}

开始捕获时，视频显示正常，但我不确定如何实际存储其内容。videoElem是 aPromise解析为 a MediaStream。tracks是一个对象数组MediaStreamTrack。这是我第一次进行任何类型的 Web 开发，所以我有点迷失！

我正在尝试构建一个可以捕获用户桌面的Web应用程序。我发现此网络api应该可以很好地完成这项工作，但是我似乎无法使其正常工作。现在，应该通过启用标记在最新版本的Edge和Chrome 70上都支持它，但是如果我正在查看导航器对象，则在两种浏览器中都应支持该功能。getDisplayMedia()功能均不存在。我也尝试调用该函数，但收到一条错误消息，说它不是函数（确认它实际上不在导航器中）。可能是什么问题呢？

提前致谢！

编辑：这是我的javascript

function na() {
    navigator.mediaDevices.getDisplayMedia({
        video: {
            mandatory: {
                chromeMediaSource: 'desktop',
                minWidth: 1280,
                maxWidth: 1280,
                minHeight: 720,
                maxHeight: 720
            }
        }
    }).then((stream)=>console.log(stream))
    console.log(navigator)

}

na();