作者：Pohung Chen，Google 合作伙伴创新创意技术专家

今天，我们发布了 LipSync，这是一种网络体验，让您可以在网络浏览器中实时对音乐进行唇形同步。LipSync 的创建是为了以一种有趣的方式演示与 TensorFlow.js 一起使用的 facemesh 模型。我们与澳大利亚歌手Tones and I 合作，让您可以在此演示中对Dance Monkey 进行唇形同步。

使用 TensorFlow.js 和 FaceMesh

FaceMesh 模型（由 MediaPipe 构建）提供面部表情关键点的实时高密度估计，仅使用网络摄像头和设备上的机器学习，这意味着在推理过程中没有任何数据离开您的机器。我们基本上使用嘴巴和嘴唇周围的关键点来估计您与Dance Monkey 歌曲的歌词同步程度。

确定正确性

在首次测试演示时，许多人认为我们使用了复杂的唇语识别算法来将嘴型与歌词匹配。唇语识别很难实现，因此我们想出了一个更简单的解决方案。我们捕获了与音乐同步的“正确”嘴型的逐帧记录，然后在用户玩游戏时，我们将嘴型与预先录制的基线进行比较。

测量你的嘴巴形状

什么是嘴型？有很多不同的方法可以测量你的嘴巴形状。我们需要一种技术，允许用户在唱歌时四处移动头部，并且对不同的嘴型、大小和与摄像头的距离具有相对的容忍度。

嘴巴比例

比较嘴型的一种方法是使用嘴巴的宽度与高度之比。例如，如果你的嘴巴闭合并形成“mmm”的声音，那么你的嘴巴的宽度与高度之比很高。如果你的嘴巴张开成“ooo”的声音，那么你的嘴巴的宽度与高度之比将接近 1:1。
虽然这种方法大多有效，但仍然存在一些边缘情况，导致检测算法不够健壮，因此我们探索了另一种方法，称为 Hu 矩，如下所述。

OpenCV matchShapes Hu 矩

在 OpenCV 库中，有一个 matchShapes 函数，该函数比较轮廓并返回相似度得分。matchShapes 函数内部使用了一种名为 Hu 矩 的技术，该技术提供了一组使用中心矩计算的数字，这些数字对图像变换是不变的。这使我们能够比较形状，而与平移、缩放和旋转无关。因此，用户可以随意旋转头部，而不会影响嘴型本身的检测。

我们使用它来补充上面的嘴型，以确定嘴巴轮廓的形状匹配程度。

视觉和音频反馈

在我们的原始原型中，我们想要创建即时的可听反馈，以了解用户做得如何。我们将人声轨与歌曲的其他部分分开，并根据用户实时嘴型表现得分更改其音量。

人声轨

伴奏轨

这使我们能够创建以下效果：如果您停止对歌曲进行唇形同步，则歌曲的歌词部分将停止播放（但背景音乐将继续播放）。

虽然这是一种展示嘴型匹配算法的有趣方式，但它仍然缺少在卡拉 OK 中击中正确音符或在街机节奏游戏中完美完成一系列动作时获得的令人满意的快乐感。

我们首先添加了一个实时得分，该得分随着时间的推移而累积，并在用户玩游戏时显示给用户。在我们的初步测试中，这并没有像我们希望的那样有效。分数让人感到困惑，确切的数字并没有特别的意义。我们还想让用户将注意力集中在歌词和屏幕中心，而不是侧边的分数。

因此，我们采用了不同的方法，更倾向于使用叠加在用户面部上的视觉效果，因为他们在对音乐进行唇形同步时，颜色会指示用户做得如何。

自己尝试 Lip Sync！

TensorFlow.js 和 FaceMesh 使得基于 Web 的、有趣且交互式的体验能够超越基本的面部滤镜，并且只要稍微进行一些创造性思考，我们就可以获得唇形同步体验，而无需使用完整的唇语识别机器学习模型的全部复杂性。

所以，现在就 尝试我们的实时演示。您还可以查看 此开源存储库中嘴型匹配的工作原理示例。

我们还要特别感谢 Kiattiyot Panichprecha、Bryan Tanaka、KC Chung、Dave Bowman、Matty Burton、Roger Chang、Ann Yuan、Sandeep Gupta、Miguel de Andrés-Clavera、Alessandra Donati 和 Ethan Converse 帮助我们实现了这种体验，并感谢设计了 Facemesh 的 MediaPipe 团队。