重新加载后继续使用页面上的 getDisplayMedia 进行录制

Question

我正在使用 录制网页上的屏幕navigator.mediaDevices.getDisplayMedia。但是当我重新加载页面时，它就停止了。我想自动继续录制。是否可以？也许我可以以某种方式使用本地存储，重新加载的页面会尝试再次录制，但随后再次出现选择要录制的屏幕的提示，但我想像以前一样选择相同的屏幕来自动录制，这样每次页面重新加载后，用户都不会受到打扰。有什么办法吗，也许服务人员可以解决这个问题？谢谢。

Answer 1

MediaStream 与其领域的负责文档相关联。当此文档的权限策略更改或文档死亡（卸载）时，MediaStream 捕获的轨道将结束。

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

在要记录的页面中：

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;

  }

}