javascript - 重新加载后在页面上使用 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;
  }
}