虚拟背景（Virtual Background）

什么是虚拟背景？

虚拟背景是一项使用机器学习在实时视频中识别和分离人物与背景的功能，然后用自定义图像/视频替换背景或应用模糊效果。这项技术使用户能够保护隐私、隐藏杂乱的环境，或为视频通话添加专业或创意背景。

在 WebRTC 应用中，虚拟背景使用计算机视觉算法对每个视频帧进行语义分割，将像素分类为"人物"或"背景"，然后以不同方式处理它们。

虚拟背景的工作原理

语义分割过程

虚拟背景背后的核心技术涉及以下步骤：

1. 帧捕获：使用 getUserMedia() 从用户的摄像头捕获视频帧
2. 机器学习推理：将每个帧通过机器学习模型运行，该模型将每个像素分类为人物或背景
3. 遮罩生成：机器学习模型输出分割遮罩——一个灰度图像，其中白色代表人物，黑色代表背景
4. 背景处理：根据遮罩应用模糊效果或替换背景像素
5. 帧合成：将分割的人物与新背景组合
6. 流输出：将处理后的帧发送到 WebRTC 对等连接

使用可插入流实现

现代 WebRTC 实现使用可插入流 API（也称为编码转换 API）进行高效的帧处理：

// 获取摄像头流\nconst stream = await navigator.mediaDevices.getUserMedia({ video: true });\n\n// 创建视频轨道处理器\nconst videoTrack = stream.getVideoTracks()[0];\nconst processor = new MediaStreamTrackProcessor({ track: videoTrack });\nconst generator = new MediaStreamTrackGenerator({ kind: 'video' });\n\n// 处理帧\nconst transformer = new TransformStream({\n  async transform(frame, controller) {\n    // 运行机器学习分割\n    const mask = await segmentationModel.predict(frame);\n    // 应用背景效果\n    const processedFrame = applyVirtualBackground(frame, mask, backgroundImage);\n    controller.enqueue(processedFrame);\n    frame.close();\n  }\n});\n\nprocessor.readable.pipeThrough(transformer).pipeTo(generator.writable);

机器学习技术

MediaPipe 自拍分割

MediaPipe 是 Google 的开源框架，用于构建机器学习管道。自拍分割模型专门针对视频会议场景中的人物分割进行了优化：

• 性能：最快的选项，在现代硬件上通常可达到 30-60 FPS
• 准确性：对于距离摄像头 2 米内的人物进行高质量分割
• 技术：使用 WebAssembly（WASM）在浏览器中实现接近原生的性能
• 模型大小：紧凑的模型（约 1-3 MB）针对实时使用进行了优化
• 加速：利用 XNNPACK 库进行硬件加速

MediaPipe 是 Google Meet 使用的相同技术，截至 2025 年是生产 WebRTC 应用的推荐解决方案。

TensorFlow.js BodyPix

BodyPix 是用于人物和身体部位分割的 TensorFlow.js 模型：

• 性能：中等，根据浏览器和硬件为 15-40 FPS（Chrome 明显快于 Firefox）
• 灵活性：可以分割单个身体部位，而不仅仅是人物与背景
• 许可证：Apache 许可证，适用于商业用途
• 浏览器支持：良好的跨浏览器兼容性
• 模型变体：提供多个模型架构（MobileNet、ResNet），具有质量/性能权衡

BodyPix 更容易集成，但对于简单的背景替换用例通常比 MediaPipe 慢。

TensorFlow DeepLab v3+

DeepLab v3+ 是高质量的语义分割模型：

• 准确性：优秀的分割质量，更好的边缘检测
• 性能：比 MediaPipe/BodyPix 慢，通常为 5-15 FPS
• 用例：更适合预录视频处理而不是实时会议
• 资源使用：更高的 CPU/GPU 要求

虚拟背景效果

背景替换

用自定义图像或视频替换背景：

• 静态图像：办公室设置、风景位置、品牌背景
• 动画背景：循环视频以获得动态效果
• 绿幕替代：在没有物理设置的情况下实现绿幕效果

背景模糊

对背景像素应用高斯模糊，同时保持人物清晰：

• 轻度模糊：轻微散焦（5-10px 半径）以实现微妙的背景减少
• 中度模糊：中等模糊（15-25px 半径）用于隐私保护而不完全替换
• 重度模糊：强模糊（30-50px 半径）使背景无法识别

背景模糊在计算上比完全替换更轻，通常在专业设置中更受欢迎。

性能考虑

CPU 使用

虚拟背景处理需要大量 CPU：

• MediaPipe：在现代处理器上以 720p@30fps 运行时约 10-30% 的 CPU 使用率
• BodyPix：根据模型架构约 20-50% 的 CPU 使用率
• 优化：以较低分辨率（480p、360p）处理然后放大以获得更好的性能
• 跳帧：每 2-3 帧运行一次推理并重用遮罩以减少 CPU 负载

分辨率和帧率

虚拟背景性能随视频分辨率缩放：

• 360p（640x360）：非常快，适用于低端设备
• 480p（854x480）：质量和性能的良好平衡
• 720p（1280x720）：现代设备的标准，中端硬件上性能可接受
• 1080p（1920x1080）：需要高端 CPU/GPU，可能需要降低帧率

大多数实现针对 720p @ 30 FPS 或 480p @ 30 FPS，具体取决于设备能力。

浏览器差异

性能在浏览器之间差异很大：

• Chrome/Edge：最佳性能，BodyPix 40+ FPS，MediaPipe 60 FPS
• Firefox：中等性能，相同模型 15-30 FPS
• Safari：Apple Silicon Mac 上性能良好，Intel Mac 上中等

质量增强技术

边缘细化

改善头发和边缘周围的分割质量：

• 边缘羽化：对遮罩边缘应用微妙的模糊以减少生硬的切割
• 时间平滑：在多个帧之间平均遮罩以减少抖动
• 颜色溢出校正：调整边缘像素以防止背景颜色渗透

照明考虑

虚拟背景在适当的照明下效果最佳：

• 良好照明：光线充足的主体产生更清晰的分割遮罩
• 背光问题：强背光（用户身后的窗户）降低分割准确性
• 一致照明：均匀照明帮助机器学习模型保持稳定的遮罩

隐私和安全

客户端处理

虚拟背景处理应在客户端进行：

• 隐私：视频帧在本地处理，不发送到服务器
• 带宽：不需要额外的服务器资源
• 延迟：没有服务器处理的往返延迟

模型加载

机器学习模型通常从 CDN 加载：

• 模型大小：根据架构为 1-10 MB
• 缓存：模型应为后续会话缓存
• 延迟加载：仅在用户启用虚拟背景时加载模型

常见用例

• 隐私：在专业通话期间隐藏家庭环境、家庭成员或个人物品
• 专业性：无论物理位置如何，都保持一致、专业的外观
• 品牌推广：为企业会议显示公司徽标、品牌背景
• 教育：教师使用主题背景创建引人入胜的虚拟教室
• 娱乐：创作者使用有趣、创意的背景进行流媒体和内容创作
• 远程工作：能够在任何地方工作而不暴露位置

最佳实践

1. 提供多个选项：提供模糊和替换，以及质量预设（低/中/高）
2. 设备检测：根据设备能力自动选择适当的模型和设置
3. 通话前预览：允许用户在加入前测试和调整虚拟背景
4. 优雅降级：在低端设备上禁用或提供降低质量的选项
5. 用户控制：使通话期间的开关变得简单
6. 资源监控：监控 CPU 使用情况，如果系统吃力则降低质量
7. 照明指导：提供最佳照明条件的提示
8. 自定义背景：允许用户上传自己的背景图像

平台示例

• Zoom：使用专有机器学习模型，支持模糊和替换
• Google Meet：使用 MediaPipe 自拍分割进行背景效果
• Microsoft Teams：提供带边缘细化的背景模糊和自定义背景
• Slack Huddles：使用现代分割模型集成背景模糊

参考资料

• Implementing Virtual Background with MediaPipe
• Background Removal Using Insertable Streams
• Deep Learning-based Background Removal in Real-Time Video
• Virtual Background Demo (GitHub)
• How to Add Virtual Background Transparency in WebRTC