虚拟背景

在浏览器中为实时视频流添加虚拟背景的演示。

:point_right: 在此处实时体验！

目录

• 实现细节
  • BodyPix
  • MediaPipe Meet 分割
    • 将 TFLite 编译为 WebAssembly
    • Canvas 2D + CPU
    • WebGL 2
  • ML Kit 自拍分割
• 性能
• 可能的改进
• 相关工作
• 本地运行
• 构建 TensorFlow Lite 工具

实现细节

在本演示中，您可以切换使用三种不同的预训练机器学习分割模型：

• BodyPix
• MediaPipe Meet 分割
• ML Kit 自拍分割

BodyPix

BodyPix 提供的绘图工具并未针对本演示中简单的背景图像用例进行优化。因此，我没有使用 API 中的 toMask 或 drawMask 方法来提高帧率。

BodyPix API 中的 drawBokehEffect 方法也没有被使用。取而代之的是，通过配置 CanvasRenderingContext2D.filter 属性中的 blur，并设置 CanvasRenderingContext2D.globalCompositeOperation，根据分割掩码混合不同图层。

这样的实现方式在笔记本电脑上可以获得不错的帧率，但在移动设备上则不太实用（更多详情请参阅 性能）。无论是在哪种设备上，与 Meet 分割模型相比，其分割精度都稍显不足。

注意：BodyPix 依赖于您设备上的默认 TensorFlow.js 后端（通常是 webgl）。对于此模型而言，WASM 后端似乎速度较慢，至少在 MacBook Pro 上是如此。

MediaPipe Meet 分割

Meet 分割模型仅以 TensorFlow Lite 模型文件的形式提供。在 此问题 中讨论了几种将其转换并与 TensorFlow.js 配合使用的方案，但我决定尝试实现一种更接近 Google 原始方法的方式，该方法在 这篇博客文章 中有所描述。因此，本演示依赖于一个基于 TFLite 构建的 WebAssembly 工具，并结合 XNNPACK 委托以及 SIMD 支持。

注意：Meet 分割模型卡片 最初是以 Apache 2.0 许可证发布的（更多信息请参阅 此处 和 此处），但自 2021 年 1 月 21 日起，似乎已切换为 Google 服务条款。这对手此演示意味着什么尚不清楚。这里 是一份与本演示所用模型文件相符的模型卡片副本。

将 TFLite 编译为 WebAssembly

您可以在本仓库的 tflite 目录 中找到 TFLite 推理工具的源代码。使用 Docker 构建 TFLite 的说明已在专门的部分中介绍：构建 TensorFlow Lite 工具。

• Bazel WORKSPACE 配置灵感来源于 MediaPipe 仓库。
• Bazel 的 Emscripten 工具链按照 Emsdk 仓库的说明 进行设置，并调整为与 XNNPACK 构建配置相匹配。
• TensorFlow 源代码已被 打补丁 以适应 Emscripten 工具链和 WASM CPU。
• C++ 函数被 直接从 JavaScript 调用，以达到最佳性能。
• 通过指针偏移量，JavaScript 可以直接 访问内存，从而与 WASM 交换图像数据。

Canvas 2D + CPU

此渲染管线与 BodyPix 的基本相同。它依赖于 Canvas 的合成属性，根据分割掩码混合渲染图层。

与 TFLite 推理工具的交互在 CPU 上执行，用于将输入从 UInt8 转换为 Float32，并对模型输出应用 softmax。

WebGL 2

WebGL 2 渲染管线完全依赖于 webgl2 画布上下文和 GLSL 着色器，用于：

• 调整输入大小以适配分割模型（不过，在 TFLite WASM 内存中，仍然需要 CPU 操作将 RGBA UInt8Array 复制到 RGB Float32Array）。
• 对分割模型输出应用 softmax，以获取每个像素属于人物的概率。
• 使用联合双边滤波器平滑分割掩码，并保留原始输入帧中的边缘（实现基于 MediaPipe 仓库）。
• 将背景图像与 光线包裹 技术相结合。
• 对原始输入帧进行背景模糊处理。有关高效高斯模糊的优秀文章可以参见 这里 和 这里。

ML Kit 自拍分割

感谢 @RemarkableGuy 指出这个模型。

自拍分割模型的架构与 Meet 分割非常接近，两者似乎都源自同一个 Keras 模型（详情请参阅 此问题）。该模型采用 Apache 2.0 许可证发布，本仓库中包含一份与本演示所用模型匹配的 模型卡片副本（原始最新模型卡片请见 此处）。该模型是从其 官方制品 中提取出来的。

与模型卡片中的描述不同，该模型的输出为单通道，可以直接得到分割掩码的浮点值。除此之外，该模型的推理流程与 Meet 分割完全一致。然而，由于输入分辨率较高，该模型的表现不如 Meet 分割（更多细节请参阅 性能 部分），尽管它仍然比 BodyPix 提供更高质量的分割结果。

性能

以下是在智能手机 Pixel 3 (Chrome) 上使用设备摄像头时，整个渲染流水线（包括推理和后处理）所观测到的性能。

模型	输入分辨率	后端	流水线	FPS
BodyPix	640x360	WebGL	Canvas 2D + CPU	11
ML Kit	256x256	WebAssembly	Canvas 2D + CPU	9
ML Kit	256x256	WebAssembly	WebGL 2	9
ML Kit	256x256	WebAssembly SIMD	Canvas 2D + CPU	17
ML Kit	256x256	WebAssembly SIMD	WebGL 2	19
Meet	256x144	WebAssembly	Canvas 2D + CPU	14
Meet	256x144	WebAssembly	WebGL 2	16
Meet	256x144	WebAssembly SIMD	Canvas 2D + CPU	26
Meet	256x144	WebAssembly SIMD	WebGL 2	31
Meet	160x96	WebAssembly	Canvas 2D + CPU	29
Meet	160x96	WebAssembly	WebGL 2	35
Meet	160x96	WebAssembly SIMD	Canvas 2D + CPU	48
Meet	160x96	WebAssembly SIMD	WebGL 2	60

可能的改进

• 利用 Alpha 通道来减少从分割掩码中读取纹理的操作。
• 在渲染循环之外对背景图像进行模糊处理，并将其用于光照包裹，而不是使用原始背景图像。这样可以为较大的光照包裹掩码生成更好的渲染效果。
• 优化联合双边滤波着色器，以避免不必要的变量、计算以及 exp 等开销较大的函数。
• 尝试使用 可分离近似 来实现联合双边滤波。
• 在较低的源分辨率下进行所有计算（在流水线开始时进行缩放）。
• 构建支持多线程的 TFLite 和 XNNPACK。一些配置示例可以在 TensorFlow.js WASM 后端 中找到。
• 检测 WASM 特性，以自动加载合适的 TFLite WASM 运行时。可以参考 TensorFlow.js WASM 后端，其基于 GoogleChromeLabs/wasm-feature-detect。
• 尝试使用 DeepLabv3+，并考虑直接重新训练 MobileNetv3-small 模型。

相关工作

您可以在 BodyPix 仓库 中了解更多关于预训练 TensorFlow.js 模型的信息。

以下是关于 Google Meet 中的背景功能 的技术概述，该功能依赖于：

• MediaPipe
• WebAssembly
• WebAssembly SIMD
• WebGL
• XNNPACK
• TFLite
• 来自 Google 的自定义分割机器学习模型
• 通过 OpenGL 着色器实现的 Google 自定义渲染效果

本地运行

在项目目录中，您可以运行：

yarn start

以开发模式运行应用程序。
打开 http://localhost:3000 即可在浏览器中查看。

如果您进行编辑，页面将会重新加载。
同时，任何 lint 错误也会显示在控制台中。

yarn test

以交互式监视模式启动测试运行程序。
更多信息请参阅关于 运行测试 的章节。

yarn build

将应用程序构建为生产版本，并输出到 build 文件夹。
它会在生产模式下正确地打包 React，并优化构建以获得最佳性能。

构建后的文件会被压缩，文件名中会包含哈希值。
您的应用已准备好部署！

更多信息请参阅关于 部署 的章节。

构建 TensorFlow Lite 工具

本地构建 TensorFlow Lite 推理工具需要 Docker。

yarn build:tflite

构建可用于推理 Meet 和 ML Kit 分割模型的 WASM 函数。TFLite 工具会分别构建支持和不支持 SIMD 的版本。

Virtual Background 快速上手指南

本项目是一个在浏览器中为实时视频流添加虚拟背景效果的演示工具，支持多种机器学习分割模型（BodyPix、MediaPipe Meet Segmentation、ML Kit Selfie Segmentation）。

环境准备

系统要求

• 操作系统：Windows / macOS / Linux
• 浏览器：推荐使用最新版的 Chrome 或 Edge（需支持 WebGL 2 和 WebAssembly SIMD 以获得最佳性能）
• 硬件：
  • 桌面端：建议配备独立显卡以获得更高帧率
  • 移动端：部分高端机型（如 Pixel 3+）可运行，但帧率和精度可能受限

前置依赖

• Node.js (推荐 v14 或更高版本)
• Yarn 包管理器
• Docker (仅当需要重新构建 TFLite WebAssembly 工具时需要)

安装步骤

1. 克隆项目仓库

   git clone https://github.com/Volcomix/virtual-background.git
   cd virtual-background
   

2. 安装依赖 建议使用国内镜像源加速安装（如淘宝镜像）：

   yarn config set registry https://registry.npmmirror.com
   yarn install
   

3. (可选) 构建 TFLite 工具 如果需要自定义或更新底层的 WebAssembly 推理工具，请参考原文档中的 "Building TensorFlow Lite tool" 章节使用 Docker 进行构建。一般用户可直接使用项目中已预编译的文件。

基本使用

1. 启动开发服务器

在项目根目录下运行以下命令启动本地服务：

yarn start

2. 访问应用

打开浏览器访问：

http://localhost:3000

3. 功能操作

• 允许浏览器访问摄像头权限。
• 在界面中选择不同的分割模型（BodyPix, Meet Segmentation, ML Kit）。
• 切换渲染后端（Canvas 2D + CPU 或 WebGL 2），WebGL 2 通常性能更佳。
• 上传或选择预设的背景图片/视频，即可看到虚拟背景效果。

提示：若需在移动设备测试，请确保手机与电脑在同一局域网内，并使用 0.0.0.0 绑定地址启动服务，或直接部署至静态托管服务（如 GitHub Pages）后通过 HTTPS 访问。