重新加载后在页面上使用 getDisplayMedia 继续录制

Question

我正在使用navigator.mediaDevices.getDisplayMedia 在网页上录制我的屏幕。但是当我重新加载页面时，它停止了。我想自动继续录制。有可能吗？

也许我可以以某种方式使用本地存储，重新加载的页面会尝试再次录制，但是再次出现选择要录制的屏幕的提示，但我想像以前一样选择相同的屏幕自动录制，这样用户就不会在每次重新加载页面后都受到打扰。

有什么办法吗，也许服务人员可以解决这个问题？谢谢。

Answer 1

MediaStream 绑定到其领域的responsible document。当此文档的permission policy 更改或文档死亡（卸载）时，MediaStream 捕获的轨道将结束。

解决您的情况的唯一方法是从其他文档（弹出窗口/选项卡）开始录制，您的用户必须始终保持打开状态。

Here is a plnkr 演示了这一点，但这对您的用户来说可能非常复杂......

在要记录的页面中：

const button = document.querySelector( "button" );
const video = document.querySelector( "video" );
// We use a broadcast channel to let the popup window know we did reload
// When the popup receives the message
// it will set our video's src to its stream
const broadcast = new BroadcastChannel( "persistent-mediastream" );
broadcast.postMessage( "ping" );
// wait a bit for the popup has the time to set our video's src
setTimeout( () => {
  if( !video.srcObject ) { // there is no popup yet
    button.onclick = (evt) => {
      const popup = open( "stream-master.html" );
      clean();
    };
  }
  else {
    clean();
  }
}, 100);
function clean() {
  button.remove();
  document.body.insertAdjacentHTML("afterBegin", "<h4>You can reload this page and the stream will survive</h4>")
}

在弹出页面中

let stream;
const broadcast = new BroadcastChannel( "persistent-mediastream" );
// when opener reloads
broadcast.onmessage = setOpenersVideoSource;

const button = document.querySelector( "button" );
// we need to handle an user-gesture to request the MediaStream
button.onclick = async (evt) => {
  stream = await navigator.mediaDevices.getDisplayMedia( { video: true } );
  setOpenersVideoSource();
  button.remove();
  document.body.insertAdjacentHTML("afterBegin", "<h4>Go back to the previous tab</h4>");
};
function setOpenersVideoSource() {
  if( opener ) {
    opener.document.querySelector( "video" ).srcObject = stream;
  }
}