如何在标签页失焦时持续进行全屏屏幕共享（getDisplayMedia 实现）-js教程-PHP中文网

如何在标签页失焦时持续进行全屏屏幕共享（getDisplayMedia 实现）

本文详解如何使用 navigator.mediadevices.getdisplaymedia() 实现稳定、不失帧的全屏屏幕共享，即使浏览器标签页失去焦点（如切换窗口或最小化），仍能持续传输桌面/应用画面，适用于 webrtc 屏幕共享场景。

本文详解如何使用 navigator.mediadevices.getdisplaymedia() 实现稳定、不失帧的全屏屏幕共享，即使浏览器标签页失去焦点（如切换窗口或最小化），仍能持续传输桌面/应用画面，适用于 webrtc 屏幕共享场景。

在基于 WebRTC 的屏幕共享应用中，一个常见痛点是：调用 getDisplayMedia() 后一旦用户切换标签页、最小化浏览器或聚焦到其他应用，屏幕流突然卡顿、冻结甚至中断——尤其在 Chrome 117+ Windows 11 环境下尤为明显。这并非规范限制，而是由浏览器策略与媒体流生命周期管理方式导致。好消息是：只要正确触发并维持媒体流，Chrome 和 Edge 均支持后台持续共享，无需特殊权限或实验性标志。

✅ 正确实现的关键点

必须由用户手势（如 click）触发：getDisplayMedia() 是受保护的 API，需显式交互启动（不能自动调用或延迟执行）；
避免流对象被垃圾回收：将 MediaStream 赋值给
不依赖 document.hasFocus() 或 visibilityState 判断：流本身不受页面可见性影响，只要未主动 stop() 且系统资源允许，即可持续采集；
推荐指定明确的 mediaSource：使用 { video: { mediaSource: 'screen' } }（全屏）或 'application'（单应用窗口），避免模糊匹配导致兼容性问题。

以下为经过验证的最小可行示例（Chrome 117+ / Edge 117+ Windows 11 完全兼容）：

知识星球

知识星球是一款AI文本写作工具，内容创作者的知识社群运营工具。

下载


<title>后台稳定的屏幕共享</title><h1>✅ 失焦后仍流畅共享</h1>
  <button id="shareBtn">开始共享屏幕</button>
  <video id="preview" autoplay muted controls style="max-width: 100%; height: auto;"></video><script>
    let currentStream = null; // ⚠️ 关键：持久引用，防止 GC

    document.getElementById('shareBtn').addEventListener('click', async () => {
      try {
        // 明确请求全屏共享（非当前标签页）
        currentStream = await navigator.mediaDevices.getDisplayMedia({
          video: { 
            mediaSource: 'screen',
            // 可选：提升稳定性（Chrome 推荐）
            frameRate: { ideal: 30, max: 60 }
          }
        });

        const video = document.getElementById('preview');
        video.srcObject = currentStream;

        console.log('✅ 屏幕共享已启动，切换窗口/失焦仍持续工作');
      } catch (err) {
        console.error('❌ 获取屏幕流失败:', err.name, err.message);
        if (err.name === 'NotAllowedError') {
          alert('请确保点击“共享整个屏幕”而非仅当前标签页');
        }
      }
    });

    // 可选：提供停止功能（防止后台持续占用资源）
    window.addEventListener('beforeunload', () => {
      if (currentStream) {
        currentStream.getTracks().forEach(track => track.stop());
      }
    });
  </script>

⚠️ 注意事项与排查建议

禁止共享“当前标签页”：若 mediaSource: 'tab'，则失焦必然中断；务必使用 'screen' 或 'application'；
检查浏览器权限设置：Chrome 地址栏右侧的锁形图标 → “网站设置” → “摄像头/麦克风” → 确保“屏幕捕获”未被阻止；
Windows 11 特别提示：需在「设置 > 隐私和安全性 > 屏幕捕获」中启用“允许应用访问你的屏幕”；
调试技巧：在 DevTools 控制台执行 currentStream.getVideoTracks()[0].getSettings()，确认 frameRate 和 width/height 是否符合预期，排除分辨率适配问题；
生产环境增强：结合 document.visibilityState 监听，可在页面隐藏时降帧率（如设为 15），平衡性能与带宽。