如何在无焦点状态下通过getDisplayMedia实现全屏屏幕共享？

Chrome 117及部分新版本中，为了优化资源占用，会对后台标签页的媒体处理进行节流。当发起屏幕共享的标签页失去焦点时，若共享的是其他应用窗口或整个屏幕，getDisplayMedia获取的流会因后台节流被暂停甚至冻结——这是因为Chrome默认认为后台标签页无需持续处理非自身的媒体流。

1. 监听标签页可见性，主动维持流的活跃性 #

通过visibilitychange事件监听标签页焦点状态，在标签页转入后台时，定期触发媒体轨道的轻量操作，避免被浏览器判定为“闲置”而节流：

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden' && window.shareStream) {
    window.shareStream.getTracks().forEach(track => {
      // 简单访问轨道属性，触发浏览器维持流的活跃性
      track.enabled = track.enabled;
      // 针对视频轨道，可额外获取一帧画面强化活跃标记
      if (track.kind === 'video') {
        const tempVideo = document.createElement('video');
        tempVideo.srcObject = new MediaStream([track]);
        tempVideo.onloadedmetadata = () => {
          tempVideo.play().then(() => tempVideo.pause());
          tempVideo.srcObject = null;
        };
      }
    });
  }
});

注：需将获取到的共享流存在全局变量（如window.shareStream）中，方便事件回调访问。

2. 请求Chrome后台媒体权限（适用于PWA/扩展） #

如果你的服务是Chrome扩展或渐进式Web应用（PWA），可以请求background权限，让标签页在后台时保持媒体处理能力：

navigator.permissions.query({ name: 'background' }).then(status => {
  if (status.state !== 'granted') {
    // 引导用户在浏览器设置中开启后台权限
    console.log('请开启后台媒体权限以避免共享冻结');
  }
});

扩展需在manifest.json中声明权限：

{
  "permissions": ["background"]
}

3. 将媒体处理逻辑移至Web Worker #

Web Worker不受标签页焦点状态影响，可把WebRTC流的编码、传输逻辑放在Worker中执行：

• 主线程获取共享流后，克隆轨道并传递给Worker：

const worker = new Worker('media-worker.js');
navigator.mediaDevices.getDisplayMedia({ video: true })
  .then(stream => {
    window.shareStream = stream;
    const clonedTrack = stream.getVideoTracks()[0].clone();
    worker.postMessage({ type: 'init-stream', track: clonedTrack }, [clonedTrack]);
  });

• 在media-worker.js中处理流的传输：

let peerConnection;
self.onmessage = (e) => {
  if (e.data.type === 'init-stream') {
    peerConnection = new RTCPeerConnection();
    peerConnection.addTrack(e.data.track);
    // 后续处理信令、ICE候选等逻辑
  }
};

4. 测试阶段禁用后台节流（仅开发用） #

开发测试时，可通过Chrome启动参数关闭后台媒体节流：

chrome.exe --disable-background-media-throttling

注：此方案仅用于本地调试，无法要求生产环境用户配置。

• 定期检查媒体轨道的readyState，若变为ended或muted，可尝试重新发起共享（需注意避免频繁弹窗请求权限）；
• 确保使用最新的WebRTC API，避免依赖已废弃的方法（如旧版RTCPeerConnection的回调模式）。

内容的提问来源于stack exchange，提问作者Leons Mate