TA貢獻2051條經驗 獲得超10個贊
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;
? }
}
舉報