1

我想通过调用在我的主选项卡中启动屏幕共享getDisplayMedia，然后将其克隆到我从我的应用程序（使用window.open）打开的另一个弹出窗口，有效地同时显示两次屏幕截图。

根据这个线程，这个片段应该可以工作 - 但它不会：

async function startCapture() {
  return await navigator.mediaDevices.getDisplayMedia();
}

function openPopup() {
  startCapture().then((stream) => {
    let video = document.getElementById("source");
    video.srcObject = stream;
    let popUpWindow = window.open("", "_blank", "x=y");
    let videoElem = document.createElement("video");
    videoElem.autoplay = true;
    let remoteVideo = popUpWindow.document.body.appendChild(videoElem);
    remoteVideo.srcObject = stream;
  });
}

我错过了什么？

4

2 回答 2

2

不，不是直接的，因为 aMediaStreamTrack不可转让。它与创建它的文档相关联。

一种解决方法是在两个选项卡之间建立一个RTCPeerConnection，并将屏幕捕获轨道从拥有它的选项卡传输到没有它的选项卡。这应该是相对高效的，因为这些位永远不会离开您的网卡。

您可以使用 aBroadcastChannel作为必要的信号来建立这样的连接，或者像我在这里使用相机localStorage一样做信号，但它适用于任何来源（首先在两个选项卡中打开，然后单击一个按钮） .Call

此解决方法的一个限制是，如果您关闭原始选项卡，那么您会丢失两个轨道。

于 2021-01-01T00:15:29.537 回答
1

正如评论中提到的@Kaiido，问题是我需要将muted属性添加到目标视频，以便在复制流时自动播放。

更多信息：https ://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

自动播放可用性
作为一般规则，您可以假设仅在以下至少一项为真时才允许媒体自动播放：

  • 音频静音或音量设置为 0
  • 用户与网站进行了交互（通过点击、敲击、按键等）
  • 如果该网站已被列入白名单；如果浏览器确定用户经常与媒体互动，这可能会自动发生，也可能通过首选项或其他用户界面功能手动发生
  • 如果自动播放功能策略用于向 a 及其文档授予自动播放支持。否则，播放可能会被阻止。导致阻塞的确切情况，以及网站如何被列入白名单的细节因浏览器而异，但以上是很好的指导方针。
于 2021-01-05T22:44:10.077 回答