重新加载后继续使用页面上的 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 streamconst broadcast = new BroadcastChannel( "persistent-mediastream" );broadcast.postMessage( "ping" );// wait a bit for the popup has the time to set our video's srcsetTimeout( () => {  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 reloadsbroadcast.onmessage = setOpenersVideoSource;const button = document.querySelector( "button" );// we need to handle an user-gesture to request the MediaStreambutton.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;  }}