使用 MediaPipe 和 TensorFlow.js 在浏览器中进行面部和手部追踪
2020 年 3 月 9 日
发布者:Ann Yuan 和 Andrey Vakunov,Google 软件工程师

今天,我们很高兴发布两个新包:facemeshhandpose,用于分别跟踪面部和手部的关键地标。这个版本是 Google Research 的 MediaPipeTensorFlow.js 团队之间的合作成果。

facemesh 包
handpose 包

在浏览器中尝试实时演示

facemesh 包找到图像中的面部边界和地标,而 handpose 则对双手做同样的事情。这些包体积小,速度快,完全在浏览器中运行,因此数据不会离开用户的设备,保护了用户的隐私。您可以使用以下链接立即尝试它们
这些包也作为 MediaPipe 的一部分可用,MediaPipe 是一个用于构建多模态感知管道的库。我们希望实时面部和手部追踪能够实现新的交互模式。例如,面部几何位置是表情分类的基础,而手部追踪是手势识别的第一步。我们很高兴看到具有这种功能的应用程序将如何推动网络交互和可访问性的界限。

深入探讨:facemesh

facemesh 包从图像或视频流中推断出近似的 3D 面部表面几何形状,只需要单个相机输入,不需要深度传感器。这种几何形状定位了面部内的特征,如眼睛、鼻子和嘴唇,包括嘴唇轮廓和面部轮廓等细节。此信息可用于下游任务,如表情分类(但不能用于识别)。有关模型在不同数据集上的性能的详细信息,请参阅我们的 模型卡。此包也可通过 MediaPipe 获取。

性能特征

facemesh 是一个轻量级的包,只有大约 3MB 的权重,使其非常适合在各种移动设备上进行实时推理。在测试时,请注意 TensorFlow.js 还提供了几个不同的后端可供选择,包括 WebGL 和 WebAssembly (WASM) 以及 XNNPACK,适用于具有低端 GPU 的设备。下表显示了该包在一些不同设备和 TensorFlow.js 后端的性能: 该表显示了该包在不同设备和 TensorFlow.js 后端的性能

安装

有两种方法可以安装 facemesh 包
  1. 通过 NPM
    import * as facemesh from '@tensorflow-models/facemesh;
  2. 通过脚本标签
    <script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs-core"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs-converter"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow-models/facemesh"></script>

用法

安装完包后,您只需要加载模型权重并将图像传入即可开始检测面部地标
// Load the MediaPipe facemesh model assets.
const model = await facemesh.load();
 
// Pass in a video stream to the model to obtain 
// an array of detected faces from the MediaPipe graph.
const video = document.querySelector("video");
const faces = await model.estimateFaces(video);
 
// Each face object contains a `scaledMesh` property,
// which is an array of 468 landmarks.
faces.forEach(face => console.log(face.scaledMesh));
estimateFaces 的输入可以是视频、静态图像,甚至可以是 ImageData 接口,以便在 node.js 管道中使用。Facemesh 然后返回一个包含输入中面部预测对象的数组,其中包括有关每个面部的信息(例如,置信度得分和面部内 468 个地标的位置)。这是一个示例预测对象
{
    faceInViewConfidence: 1,
    boundingBox: {
        topLeft: [232.28, 145.26], // [x, y]
        bottomRight: [449.75, 308.36],
    },
    mesh: [
        [92.07, 119.49, -17.54], // [x, y, z]
        [91.97, 102.52, -30.54],
        ...
    ],
    scaledMesh: [
        [322.32, 297.58, -17.54],
        [322.18, 263.95, -30.54]
    ],
    annotations: {
        silhouette: [
            [326.19, 124.72, -3.82],
            [351.06, 126.30, -3.00],
            ...
        ],
        ...
    }
}
有关 API 的更多详细信息,请参阅我们的 README

深入探讨:handpose

handpose 包检测输入图像或视频流中的手,并返回 21 个 3 维地标,定位每只手内的特征。这些地标包括每个手指关节的位置和手掌。2019 年 8 月,我们通过 MediaPipe 发布了该模型 - 您可以在我们发布的 博客文章 中找到有关模型架构的更多信息。有关 handpose 在不同数据集上的性能的详细信息,请参阅我们的 模型卡。此包也可通过 MediaPipe 获取。

性能特征

handpose 是一个相对轻量级的包,包含大约 12MB 的权重,使其适合实时推理。下表显示了该包在不同设备上的性能: 显示该包在不同设备上的性能的表格

安装

有两种方法可以安装 handpose 包。
  1. 通过 NPM
    import * as handtrack from '@tensorflow-models/handpose;
  2. 通过脚本标签
    <script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs-core"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs-converter"></script>
    <script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow-models/handpose"></script>

用法

安装完包后,您只需要加载模型权重并将图像传入即可开始跟踪手部地标
// Load the MediaPipe handpose model assets.
const model = await handpose.load();
 
// Pass in a video stream to the model to obtain 
// a prediction from the MediaPipe graph.
const video = document.querySelector("video");
const hands = await model.estimateHands(video);
 
// Each hand object contains a `landmarks` property,
// which is an array of 21 3-D landmarks.
hands.forEach(hand => console.log(hand.landmarks));
facemesh 一样,estimateHands 的输入可以是视频、静态图像,或者是一个 ImageData 接口。该包随后返回一个描述输入中手的对象数组。这是一个示例预测对象
{
    handInViewConfidence: 1,
    boundingBox: {
        topLeft: [162.91, -17.42], // [x, y]
        bottomRight: [548.56, 368.23],
    },
    landmarks: [
        [472.52, 298.59, 0.00], // [x, y, z]
        [412.80, 315.64, -6.18],
        ...
    ],
    annotations: {
        indexFinger: [
            [412.80, 315.64, -6.18],
            [350.02, 298.38, -7.14],
            ...
        ],
        ...
    }
}
有关 API 的更多详细信息,请参阅我们的 README

展望未来

我们计划继续改进 facemesh 和 handpose。我们将很快添加对多手跟踪的支持。我们也在不断努力提高模型的速度,尤其是在移动设备上。在过去几个月的开发过程中,我们看到 facemesh 和 handpose 的性能有了显著提升,我们相信这种趋势将持续下去。MediaPipe 团队正在开发更精简的模型架构,而 TensorFlow.js 团队一直在探索加速推理的方法,例如算子融合。更快的推理反过来将解锁更大、更准确的模型,以便在实时管道中使用。

后续步骤

鸣谢

我们要感谢 MediaPipe 团队,他们慷慨地与我们分享了这些包的原始实现。MediaPipe 开发并训练了底层模型,并设计了将所有内容整合在一起的后处理图。
下一篇文章
Face and hand tracking in the browser with MediaPipe and TensorFlow.js

发布者:Ann Yuan 和 Andrey Vakunov,Google 软件工程师

今天,我们很高兴发布两个新包:facemeshhandpose,用于分别跟踪面部和手部的关键地标。这个版本是 Google Research 的 MediaPipeTensorFlow.js 团队之间的合作成果。

在浏览器中尝试实时演示 facemesh 包找到图像中的面部边界和地标,而 handpose 则对…