第14章 Holobooth：基于 Flutter 与 MediaPipe 的虚拟拍照亭技术解析
第14章 制作内幕：Holobooth 一款展示 Flutter 和机器学习（使用 MediaPipe 和 TensorFlow.js）的虚拟拍照亭体验
Very Good Ventures 2023年1月24日 · 8分钟阅读
介绍 Flutter Forward Holobooth，这是一次展示 Flutter、Firebase 和机器学习强大功能的新型体验。首先选择你的虚拟形象（Dash 或 Sparky），然后把自己传送到热带海滩、火山口、外太空、海底或任何其他地方！既然我们无法把所有人带到内罗毕参加 Flutter Forward 线下活动，我们希望提供一个同样令人兴奋的虚拟体验。通过 Holobooth，你可以拍摄一段短视频来纪念你的虚拟之旅。然后，在 Twitter 或 Facebook 上分享给你的朋友们。
在 holobooth.flutter.dev 体验 Flutter Forward Holobooth
Holobooth 基于 2021年 Google I/O 发布的第一版 Photo Booth 应用。与拍摄你和 Dash 或 Sparky 的合影不同，Holobooth 利用机器学习控制 Dash 或 Sparky 的动画，通过你的面部表情来驱动。
我们将深入剖析我们的团队如何与 Google 合作，利用谷歌工具的强大功能，创建一个更具沉浸感和未来感的拍照亭体验。我们使用 Flutter 和 Firebase 构建了 Holobooth 应用。通过 JavaScript 中的 Web ML 技术，我们借助虚拟、交互式的 3D 虚拟形象将体验提升到了下一个层次。让我们来看看它是如何构建的！
使用 TensorFlow.js 进行人脸检测
Holobooth 最令人兴奋的功能之一，是能够将你面部的实时视频映射到 Dash（或 Sparky）的 3D 模型上，当你穿越他们的虚拟世界时。如果你的脸上流露出惊讶的表情，Dash 的脸上也会表现出惊讶，以此类推。为了实现这一功能，我们使用了 Flutter Web 的相机插件和 TensorFlow.js 来检测摄像头画面中用户的面部。更具体地说，我们使用了 MediaPipe FaceMesh 模型，该模型可以实时估计 468 个 3D 面部特征点，从而在 Web 和移动端浏览器中检测用户面部特征。
MediaPipe FaceMesh 模型检测到的特征
根据每个面部特征点的位置，我们可以判断用户是否在画面内，眼睛或嘴巴是否张开等。当用户在摄像头视野中移动时，MediaPipe FaceMesh 模型（可通过 TensorFlow.js Face Landmarks Detection 包获取）确保我们能够追踪用户面部特征的精确坐标，从而在 Dash 或 Sparky 身上进行镜像模拟。如需更多细节，可以查阅 face_geometry.dart 文件。虽然目前还没有官方的 TensorFlow.js Dart 包，但 Dart 的 JS 包允许我们将 JavaScript 库导入 Flutter Web 应用（更多详情请查看 tensorflow_models 包文件夹）。
```dart FaceGeometry({ required tf.Face face, required tf.Size size, }) : this._( rotation: FaceRotation(keypoints: face.keypoints), leftEye: LeftEyeGeometry( keypoints: face.keypoints, boundingBox: face.boundingBox, ), rightEye: RightEyeGeometry( keypoints: face.keypoints, boundingBox: face.boundingBox, ), mouth: MouthGeometry( keypoints: face.keypoints, boundingBox: face.boundingBox, ), distance: FaceDistance( boundingBox: face.boundingBox, imageSize: size, ), ); const FaceGeometry._({ required this.rotation, required this.mouth, required this.leftEye, required this.rightEye, required this.distance, }); ```
使用 Rive 和 TensorFlow.js 为背景和虚拟形象添加动画
我们借助 Rive 让 Holobooth 的动画栩栩如生。Rive 是一个用 Flutter 构建的 Web 应用，提供用于创建高性能、轻量级、易于集成到 Flutter 应用中的交互式动画的工具。我们与 Rive 和 HOPR 设计工作室的优秀设计师合作，创建了能够在我们的 Flutter 应用中无缝运行的 Rive 动画图形。动态背景和虚拟形象都是 Rive 动画。
移动你的脸部，看看 Rive 模型如何模仿你的行为
虚拟形象使用 Rive 状态机（State Machines），让我们能够控制虚拟形象的行为和外观。在 Rive 状态机中，设计师指定所有的输入（Inputs）。输入（Inputs）是由你的应用控制数值。你可以将它们视为设计团队和工程团队之间的契约。你的产品代码可以随时更改输入值，状态机会对这些变化做出反应。
在 Holobooth 中，我们使用输入来控制嘴巴张开的宽度等。利用 FaceMesh 模型的特征检测功能，我们可以将面部特征映射到虚拟形象模型的对应坐标上。使用 StateMachineController，我们将模型的输入进行转换，以确定虚拟形象在屏幕上的呈现方式。
```dart
class CharacterStateMachineController extends StateMachineController {
CharacterStateMachineController(Artboard artboard)
: super(
artboard.animations.whereType
例如，虚拟形象模型有一个属性来测量嘴巴张开的程度（从 0 到 1，其中 0 代表完全闭合，1 代表完全张开）。如果用户在摄像头视野中闭上眼睛，应用会提供相应的值并将其输入到虚拟形象模型中，这样你在屏幕上就会看到虚拟形象的嘴也闭上了。
使用 Firebase 捕获动态照片
Holobooth 的主要功能是可以分享 GIF 或视频来庆祝 Flutter Forward。我们借助 Firebase Cloud Functions 帮助我们生成并上传你的动态照片到 Firebase Cloud Storage。当你按下相机按钮时，应用开始捕获持续 5 秒的帧。使用 ffmpeg，我们通过 Cloud Function 将帧转换为单个 GIF 和视频，然后上传到 Firebase Cloud Storage。你可以选择下载 GIF 或视频以便稍后观看，或手动上传到社交媒体。
捕获动态照片
若要直接分享 GIF 到 Twitter 或 Facebook，可点击分享按钮。随后你会被带到选定的平台，其中包含一个预填好的帖子，帖子中包含你视频第一帧的照片。若要观看完整视频，请点击链接进入你的 holocard——这是一个网页，展示你的完整视频，并提供一个按钮引导访客亲自尝试 Holobooth！
Holocard 示例
面临的挑战及解决方案
Holobooth 包含许多扩展 Flutter 可能性的元素——例如使用机器学习模型和 Rive 图形，同时确保用户获得高性能、流畅的体验。
在 Very Good Ventures，与 TensorFlow.js 合作对我们来说是首次。目前没有任何官方的 Flutter 库，因此我们在该项目早期的工作重点是试验可用的模型，以确定哪一个符合我们的需求。一旦选定了特征点检测模型，我们就必须理清模型输出的数据含义，并将其映射到 Rive 动画上。这里是一个关于人脸检测的早期探索示例：
人脸检测早期探索
官方 Flutter 相机插件提供了开箱即用的许多功能，但它目前不支持 Web 上的图像流。对于 Holobooth，我们 fork 了相机插件以添加此功能。我们希望未来官方插件能支持这一点。
另一个挑战是优化性能。屏幕录制可能是一个高成本的操作，因为应用正在捕获大量数据。我们还必须考虑到用户将从不同的浏览器和设备访问此应用。我们希望确保应用具有高性能，并为任何设备上的用户提供流畅的体验。在桌面上访问 Holobooth 时，视频背景是动画的，并反映横向景观方向。为了优化移动端浏览器，背景是静态的，并裁剪以适配纵向模式。由于移动屏幕比桌面小，我们还优化了图像资源的分辨率，以减少初始页面加载时间和设备使用的数据量。
关于如何克服这些挑战以及更多细节，你可以查看开源代码。我们希望这能激励想要实验 TensorFlow.js、Rive 和视频的开发者，或者只是希望优化其 Web 应用的开发者。
展望未来
在创建这个演示时，我们想探索 Flutter Web 应用以简单、高性能且有趣的方式与 TensorFlow.js 模型集成的潜力。虽然我们所构建的许多内容仍处于实验阶段，但我们很高兴机器学习在 Flutter 应用中的未来，它将为用户在任何设备上创造令人愉快的体验！加入社区讨论，告诉我们你的想法，以及你如何在下一个 Flutter 项目中使用机器学习。
在 Holobooth 拍摄视频，并在社交媒体上与我们分享！
来自 Flutter 的更多内容
Vibe once, run anywhere with Antigravity and Flutter Flutter 和 Antigravity 如何帮助构建和发布一款小行星着陆游戏。 Craig Labenz, Rody Davis 2026年6月29日 · 8分钟阅读
How we built a Flutter-powered AI coffee shop 如果你开始免费提供咖啡，人们就会蜂拥而至。 Craig Labenz 2026年6月22日 · 9分钟阅读
