virtual-background

项目介绍：虚拟背景

虚拟背景项目是一项旨在通过浏览器为直播视频流添加虚拟背景的技术示例。此项目展示了如何利用几种预训练的机器学习分割模型来实现这一目标。该演示可直接在浏览器中体验，用户无需额外下载应用程序。

实现细节

在这个演示中，用户可以选择使用三种不同的机器学习预训练分割模型：

• BodyPix：来自 TensorFlow.js 的模型，适用于大多数设备。此模型的分割缺乏一定的精确度。
• MediaPipe Meet Segmentation：谷歌提供的分割模型，适用于高效处理并具有 Google Meet 中的背景功能。
• ML Kit Selfie Segmentation：适用于自拍照片的分割模型，使用与 Meet 分割类似的架构，但精度稍逊。

BodyPix模型

BodyPix模型使用Canvas API对视频进行处理。虽然默认的 TensorFlow.js 后端通常使用 WebGL，但在某些设备，如 MacBook Pro 上，WASM 后端速度可能稍慢。此外，Canvas compositing 属性用于根据分割掩码混合不同的渲染层。

MediaPipe Meet Segmentation

Meet 分割模型仅作为TensorFlow Lite模型文件可用。项目构建了一个小型WebAssembly工具，结合XNNPACK代表和SIMD支持，实现了Google Meet的背景替换功能。

TFLite 到 WebAssembly 的构建

该项目使用Docker构建TensorFlow Lite推理工具，该工具包含在项目的tflite目录中。参数配置参考MediaPipe和Emscripten等仓库的相关信息。

ML Kit Selfie Segmentation

ML Kit Selfie Segmentation 模型与 Meet 分割的架构非常接近，但其输入分辨率较高，因此分割性能不如 Meet 分割。该模型由 Apache 2.0 授权，并提供了相应的模型卡。

性能表现

演示在使用手机设备例如Pixel 3进行测试时，展示了不同模型与渲染管线的帧率表现。例如，Meet 模型在使用 WebAssembly SIMD 后端和 WebGL 2 管线时可达每秒 60 帧（FPS）。具体的性能数据可以参考上表。

可能的改进

项目可以通过以下方式进一步改进：

• 利用alpha通道减少纹理数据获取
• 优化渲染过程中的模糊处理
• 改进联合双边滤波器着色器以减少不必要的计算
• 使用可分离近似法进行联合双边滤波，减少计算量
• 使用多线程支持来构建 TFLite 和 XNNPACK

相关工作

此项目借鉴了 Google Meet 提供的背景功能并使用了一些先进的技术，如 MediaPipe、WebAssembly 和 TFLite。开发人员可以通过研究这些技术获取更多关于虚拟背景的实现细节。

本地运行

您可以通过在项目目录中使用 yarn start 来运行开发模式的应用。要进行项目测试和构建，可以使用 yarn test 和 yarn build 命令。

构建 TensorFlow Lite 工具

项目需要 Docker 来本地构建 TensorFlow Lite 推理工具。执行 yarn build:tflite 来构建支持和不支持 SIMD 的 WASM 函数。

通过此项目，开发人员和研究人员可以尝试不同的技术和方法来改善直播视频的虚拟背景效果，是学习和探索现代 Web 应用技术的良好实践。