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

Question

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

也许我可以使用localstorage，重新加载的页面会尝试重新录制，但是选择屏幕录制的提示又出现了，但我想选择相同的屏幕自动录制和以前一样，这样用户就不会在每次重新加载页面后受到打扰。

有什么办法吗，也许 service workers 可以这样？谢谢

Answer 1

MediaStream 与其领域的 responsible document. When this document's permission policy 更改相关联，或者如果文档终止（卸载），则 MediaStream 捕获的轨道将结束。

解决您的问题的唯一方法是从您的用户必须一直打开的其他文档 (popup/tab) 开始录制。

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;
  }
}

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

Continue recording with getDisplayMedia on page after reload

javascript

service-worker

screen-capture

get-display-media