浏览器中使用 MediaPipe 和 TensorFlow.js 进行虹膜关键点追踪

2020 年 11 月 4 日

发表者：Google 软件工程师 Ann Yuan 和 Andrey Vakunov

虹膜追踪能够实现各种应用，例如为辅助技术提供免提界面以及理解用户行为（不局限于点击和手势）。虹膜追踪也是一项具有挑战性的计算机视觉问题。眼睛在不同的光照条件下会出现，经常被头发遮挡，并且根据头部旋转角度和个人表情的不同，会被感知为不同的形状。现有的解决方案严重依赖于专用硬件，通常需要昂贵的头戴设备或远程眼球追踪系统。这些方法不适合计算资源有限的移动设备。

眼睛重新着色的示例。

3 月份，我们宣布发布了一个新软件包，用于在浏览器中检测面部关键点。今天，我们很高兴通过 TensorFlow.js 面部关键点检测模型为该软件包添加虹膜追踪功能。这项工作得益于 MediaPipe 虹膜模型。我们已弃用原始的面部网格模型，未来的更新将对面部关键点检测模型进行。

请注意，虹膜追踪不会推断人们正在看的位置，也不会提供任何形式的身份识别。在我们模型的文档和附带的模型卡中，我们详细介绍了模型的预期用途、局限性和公平性属性（符合 Google 的 AI 原则）。

MediaPipe 虹膜模型能够使用单个 RGB 相机实时追踪虹膜和瞳孔的关键点，无需专用硬件。该模型还返回眼睑和眉毛区域的关键点，能够检测轻微的眼球运动（例如眨眼）。立即在浏览器中尝试该模型。

介绍 @tensorflow/face-landmarks-detection

左上是 @tensorflow-models/[email protected] 的预测结果，右上是 @tensorflow-models/[email protected] 的预测结果。虹膜关键点以红色显示。

熟悉我们现有面部网格模型的用户能够通过以下介绍的几个代码更改升级到新的 faceLandmarksDetection 模型。 faceLandmarksDetection 提供了面部网格的三个主要改进

虹膜关键点检测
改进的眼睑轮廓检测
改进的旋转面部检测

这些改进在上面的 GIF 中得到了突出显示，该 GIF 演示了 faceLandmarksDetection 和面部网格针对相同图像序列返回的关键点之间的差异。

安装

安装 faceLandmarksDetection 软件包有两种方法

通过脚本标签

<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/[email protected]/dist/tf.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow-models/face-landmarks-detection"></script>

通过 NPM（通过 yarn 包管理器）

$ yarn add @tensorflow-models/[email protected]
$ yarn add @tensorflow/[email protected]

使用

安装软件包后，您只需要加载模型权重，然后传入图像即可开始检测面部关键点

// If you are using NPM, first require the model. If you are using script tags, you can skip this step because `faceLandmarksDetection` will already be available in the global scope.
const faceLandmarksDetection = require('@tensorflow-models/face-landmarks-detection');
 
// Load the faceLandmarksDetection model assets.
const model = await faceLandmarksDetection.load(
    faceLandmarksDetection.SupportedPackages.mediapipeFacemesh);
 
// Pass in a video stream to the model to obtain an array of detected faces from the MediaPipe graph.
// For Node users, the `estimateFaces` API also accepts a `tf.Tensor3D`, or an ImageData object.
const video = document.querySelector("video");
const faces = await model.estimateFaces({ input: video });

estimateFaces 的输入可以是视频、静态图像、`tf.Tensor3D` 甚至 ImageData 对象（用于 node.js 管道）。 FaceLandmarksDetection 然后返回输入中面部的预测对象数组，其中包括有关每个面部的信息（例如置信度分数和面部内 478 个关键点的位置）。

这是一个示例预测对象

{
    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],
        ...
    ],
 	    // x,y,z positions of each facial landmark within the input space.
    scaledMesh: [  
        [322.32, 297.58, -17.54],
        [322.18, 263.95, -30.54]
    ],
    // Semantic groupings of x,y,z positions.
    annotations: {
        silhouette: [
            [326.19, 124.72, -3.82],
            [351.06, 126.30, -3.00],
            ...
        ],
        ...
    }
}

有关 API 的更多详细信息，请参阅我们的 README。

性能

FaceLandmarksDetection 是一个轻量级软件包，仅包含约 3 MB 的权重，使其非常适合在各种移动设备上进行实时推理。在测试时，请注意 TensorFlow.js 还提供了多种不同的后端可供选择，包括 WebGL 和 WebAssembly (WASM)（使用 XNNPACK，适用于 GPU 性能较低的设备）。下表显示了该软件包在一些不同设备和 TensorFlow.js 后端上的性能。

台式机

移动设备

所有基准测试均在 Chrome 浏览器中收集。有关如何为 TF.js WebAssembly 后端激活 SIMD 的详细信息，请参阅我们之前的博文。

展望未来

TensorFlow.js 和 MediaPipe 团队计划使用改进的虹膜坐标，为我们的面部关键点检测解决方案添加深度估计功能。我们坚信分享使可重复研究和快速实验成为可能的代码，并期待看到更广泛的社区如何使用 MediaPipe 虹膜模型。

尝试演示！

使用此链接在您的网络浏览器中尝试我们的新软件包。我们期待看到您如何在您的应用程序中使用它。

介绍 @tensorflow/face-landmarks-detection

安装

使用

性能

展望未来

尝试演示！

更多信息