屏幕共享（Screen Sharing）

什么是屏幕共享？

屏幕共享是一项功能，使用户能够向视频通话中的其他参与者广播其显示器内容、特定窗口或应用程序。在 WebRTC 中，屏幕共享通过 getDisplayMedia() API 实现，它直接在浏览器中提供安全、无需插件的屏幕捕获功能。

与摄像头视频不同，屏幕共享通常涉及更高的分辨率、更低的帧率，以及不同的优化策略，以确保文本和 UI 元素保持清晰可读，同时有效管理带宽。

屏幕共享的工作原理

getDisplayMedia API

navigator.mediaDevices.getDisplayMedia() 方法是在 WebRTC 应用程序中实现屏幕共享的标准方式：

const displayStream = await navigator.mediaDevices.getDisplayMedia({
  video: {
    displaySurface: 'monitor', // 或 'window', 'browser'
    width: { ideal: 1920 },
    height: { ideal: 1080 },
    frameRate: { ideal: 10, max: 15 }
  },
  audio: true // 如果支持，捕获系统音频
});

用户选择对话框

当调用 getDisplayMedia() 时，浏览器会显示一个对话框，用户可以选择要共享的内容：

整个屏幕：共享所有显示器或特定监视器
应用程序窗口：共享单个应用程序窗口
浏览器标签页：共享特定的浏览器标签页及其音频

这种用户控制的选择确保了隐私，并防止未经授权的屏幕捕获。

媒体约束和优化

编解码器选择

不同的编解码器在屏幕共享与摄像头视频方面表现不同：

VP9：非常适合屏幕共享，特别是带有文本的静态内容。对屏幕内容的压缩效果优于 VP8
H.264：跨平台兼容性最佳。具有硬件加速的良好质量。广泛支持的回退选项
AV1：Chrome 135+ 中屏幕内容的质量和压缩效果更优，但在没有硬件支持的情况下 CPU 使用率更高
H.265（HEVC）：Chrome 136+ 支持，对文本和 UI 元素质量优秀，但浏览器兼容性有限

测试表明，对于文本密集的屏幕共享内容，H.264 提供了质量和 CPU 效率的最佳平衡，而 VP9 或 AV1 在 CPU 资源允许的情况下以更低的带宽提供更好的质量。

内容感知优化

屏幕共享应根据内容类型进行调整：

静态内容（文档、幻灯片）：较低的帧率（5-10 FPS），较高的比特率以保持清晰度
动态内容（视频播放）：较高的帧率（30 FPS），需要更多带宽
代码/文本编辑器：优先考虑比特率而不是帧率以保持文本可读性

音频捕获

系统音频捕获允许共享屏幕视觉效果和应用程序音频（例如，视频播放、音乐）：

浏览器支持：Chrome、Edge 和 Firefox 在大多数平台上支持系统音频捕获
用户权限：用户必须在浏览器对话框中明确启用音频共享
混合：系统音频和麦克风音频可以组合或作为单独的轨道发送

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: {
    echoCancellation: false,
    noiseSuppression: false,
    sampleRate: 48000
  }
});

安全和隐私

HTTPS 要求

通过 getDisplayMedia() 进行屏幕共享仅在 HTTPS 连接或 localhost 上可用。这防止了来自不安全源的未经授权的捕获。

用户控制

WebRTC 强制执行多项隐私保护：

明确许可：用户每次都必须手动选择要共享的内容
视觉指示器：浏览器在屏幕共享活动时显示持久指示器（通常在地址栏或系统托盘中）
轻松终止：用户可以随时通过浏览器控件停止共享
无静默捕获：与某些本机应用程序不同，基于 Web 的屏幕共享无法在用户不知情的情况下捕获屏幕

性能考虑

带宽管理

屏幕共享通常需要 1.5-3 Mbps 用于 1080p @ 10 FPS。如果没有适当的约束，高分辨率显示器（4K、5K）会迅速压垮带宽：

始终设置明确的分辨率和帧率限制
使用 getStats() API 监控网络状况
实现自适应比特率以在带宽有限时降低质量
考虑提供质量预设（低：720p@5fps，中：1080p@10fps，高：1080p@15fps）

CPU 使用

屏幕捕获和编码可能会消耗大量 CPU，特别是在高分辨率下：

硬件加速：在可用时使用 H.264 或 H.265 与硬件编码器（Windows 通常具有更好的硬件支持）
联播（Simulcast）：发送多个质量层，以便具有不同带宽的观众可以接收适当的流
内容提示：对屏幕轨道使用 contentHint = 'detail' 以优化编码器设置以获得文本清晰度

const videoTrack = displayStream.getVideoTracks()[0];
videoTrack.contentHint = 'detail'; // 为屏幕内容优化

浏览器兼容性

截至 2025 年，现代浏览器对屏幕共享的支持良好：

Chrome/Edge：完全支持，包括系统音频捕获
Firefox：完全支持，性能优秀
Safari：从 Safari 13+ 开始支持，但系统音频有一些限制
移动浏览器：支持有限。Android Chrome 支持屏幕捕获，iOS Safari 有限制

常见用例

远程演示：共享幻灯片、文档或实时演示
协作工作：共同编辑文档、审查设计或结对编程
技术支持：通过查看用户屏幕帮助他们解决问题
教育：教师共享教育内容、教程或软件演示
内容创作：流媒体游戏、创意软件或视频制作工作流程

最佳实践

设置明确的约束：始终指定分辨率和帧率限制以防止资源耗尽
实现质量控制：允许用户根据网络状况调整屏幕共享质量
处理轨道结束：监听轨道上的 'ended' 事件以检测用户何时通过浏览器控件停止共享
针对内容类型优化：根据用户是共享静态内容还是视频来调整设置
跨平台测试：屏幕共享性能在不同操作系统和浏览器之间差异很大
提供清晰的 UI：在屏幕共享活动时显示视觉反馈，并提供简单的停止控制
监控性能：使用 getStats() 跟踪编码时间、掉帧和带宽使用