本文详解如何使用 navigator.mediadevices.getdisplaymedia() 实现稳定、不失帧的全屏屏幕共享，即使浏览器标签页失去焦点（如切换窗口或最小化），仍能持续传输桌面/应用画面，适用于 webrtc 屏幕共享场景。
本文详解如何使用 navigator.mediadevices.getdisplaymedia() 实现稳定、不失帧的全屏屏幕共享，即使浏览器标签页失去焦点（如切换窗口或最小化），仍能持续传输桌面/应用画面，适用于 webrtc 屏幕共享场景。
在基于 WebRTC 的屏幕共享应用中，一个常见痛点是：调用 getDisplayMedia() 后一旦用户切换标签页、最小化浏览器或聚焦到其他应用，屏幕流突然卡顿、冻结甚至中断——尤其在 Chrome 117+ Windows 11 环境下尤为明显。这并非规范限制，而是由浏览器策略与媒体流生命周期管理方式导致。好消息是：只要正确触发并维持媒体流，Chrome 和 Edge 均支持后台持续共享，无需特殊权限或实验性标志。
✅ 正确实现的关键点
- 必须由用户手势（如 click）触发：getDisplayMedia() 是受保护的 API，需显式交互启动（不能自动调用或延迟执行）；
- 避免流对象被垃圾回收：将 MediaStream 赋值给 <video> 的 srcObject 后，务必保留对流的强引用（例如赋值给全局变量或组件状态），防止 GC 提前释放；
- 不依赖 document.hasFocus() 或 visibilityState 判断：流本身不受页面可见性影响，只要未主动 stop() 且系统资源允许，即可持续采集；
- 推荐指定明确的 mediaSource：使用 { video: { mediaSource: 'screen' } }（全屏）或 'application'（单应用窗口），避免模糊匹配导致兼容性问题。
以下为经过验证的最小可行示例（Chrome 117+ / Edge 117+ Windows 11 完全兼容）：
<!DOCTYPE html>
<html>
<head><title>后台稳定的屏幕共享</title></head>
<body>
<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>
</body>
</html>⚠️ 注意事项与排查建议
- 禁止共享“当前标签页”：若 mediaSource: 'tab'，则失焦必然中断；务必使用 'screen' 或 'application'；
- 检查浏览器权限设置：Chrome 地址栏右侧的锁形图标 → “网站设置” → “摄像头/麦克风” → 确保“屏幕捕获”未被阻止；
- Windows 11 特别提示：需在「设置 > 隐私和安全性 > 屏幕捕获」中启用“允许应用访问你的屏幕”；
- 调试技巧：在 DevTools 控制台执行 currentStream.getVideoTracks()[0].getSettings()，确认 frameRate 和 width/height 是否符合预期，排除分辨率适配问题；
- 生产环境增强：结合 document.visibilityState 监听，可在页面隐藏时降帧率（如设为 15），平衡性能与带宽。
? 总结：getDisplayMedia 的后台持续性取决于流生命周期管理，而非页面焦点状态。核心在于——用户手势启动 + 流对象强持有 + 正确 mediaSource 选择。遵循以上实践，即可在 Chrome/Edge 中实现真正可靠的全屏屏幕共享体验。
