重新加载后继续在页面上使用 getDisplayMedia 进行录制 [英] Continue recording with getDisplayMedia on page after reload

问题描述

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

I'm recording my screen on a webpage with navigator.mediaDevices.getDisplayMedia. But when I reload the page, it stops. I'd like to automatically continue recording. Is it possible?

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

Maybe I could use the localstorage somehow, that the reloaded page would try to record again, but then the prompt to choose the screen to record appears again, but I'd like to have picked the same screen to record automatically as before, so that the users aren't bothered after every page reload.

有什么办法，也许服务工作者可能是这样?谢谢.

Is there any way, maybe service workers could be the way? Thanks.

推荐答案

MediaStream 与其领域的 责任文件.当本文档的权限政策发生变化或文档死亡(卸载)，MediaStream 的捕获轨道将结束.

A MediaStream is tied to its realm's responsible document. When this document's permission policy changes or if the document dies (unload), the MediaStream's captured tracks will end.

解决您的情况的唯一方法是从您的用户必须始终保持打开状态的其他文档(弹出窗口/标签页)开始录制.

The only way around for your case, would be to start the recording from an other document (popup/tab) that your users would have to keep open the whole time.

这里有一个 plnkr 演示了这一点，但那对于您的用户来说，处理起来可能相当复杂...

Here is a plnkr demonstrating this, but that may be quite complex for your users to deal with...

在要记录的页面中:

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 进行录制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！