适用于 Web 的人脸特征点检测指南

借助 MediaPipe Face Markerer 任务，你可以检测 Google Cloud 上的图片和视频。您可以使用此任务来识别人类的面部表情，应用面部滤镜和特效，创建虚拟头像。此任务使用可以处理单张图片或连续图片图像流。该任务会输出三维人脸特征点、融合变形分数（表示面部表情的系数）来推断详细的面部以及转换矩阵效果渲染所需的转换。

以下说明介绍了如何使用网页版和 JavaScript 的人脸特征点工具。如需详细了解功能、模型和配置选项，请参阅概览。

代码示例

人脸识别特征点的示例代码提供了该技术的完整实现，供您参考。此代码可帮助您测试此任务，开始构建您自己的面部特征点应用。您可以查看、运行修改人脸特征点工具示例代码只需使用网络浏览器即可。

设置

本部分介绍设置开发环境的关键步骤。有关设置 Web 和 JavaScript 开发环境平台版本要求，请参阅网页版设置指南。

JavaScript 软件包

人脸特征码器代码可通过 MediaPipe @mediapipe/tasks-vision 获取 NPM 软件包。您可以按照平台中的说明查找并下载这些库设置指南。

您可以通过 NPM 安装所需的软件包创建 Deployment

npm install @mediapipe/tasks-vision

如果您想通过内容分发网络 (CDN) 导入任务代码服务，请将以下代码添加到 <head>标记之间：

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

型号

MediaPipe Face Markerer 任务需要一个与此训练兼容的模型，任务。如需详细了解可用于人脸识别特征器的经过训练的模型，请参阅任务概览的“模型”部分。

选择并下载模型，然后将其存储在项目目录中：

<dev-project-root>/app/shared/models/

创建任务

使用其中一个人脸特征点 createFrom...() 函数来执行以下操作：为运行推理准备任务。使用 createFromModelPath() 函数。如果模型已加载到内存中，您可以使用 createFromModelBuffer() 方法结合使用。

以下代码示例演示了如何使用 createFromOptions() 函数来设置任务。借助 createFromOptions 函数，您可以自定义具有配置选项的人脸特征点标记器。如需了解详情，请参阅配置选项。

以下代码演示了如何使用自定义的选项：

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const faceLandmarker = await faceLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

配置选项

此任务具有以下针对 Web 和 JavaScript 的配置选项应用：

选项名称	说明	值范围	默认值
`running_mode`	设置任务的运行模式。有两个模式： IMAGE：单图输入的模式。视频：已解码的帧的模式。视频或对输入数据（例如来自摄像头的直播数据）进行直播。	{`IMAGE, VIDEO`}	`IMAGE`
`numFaces`	通过 `FaceLandmarker`。仅当 `num_faces` 设置为 1。	`Integer > 0`	`1`
`minFaceDetectionConfidence`	人脸检测的最低置信度分数则视为成功	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	人脸存在的最低置信度分数得分。	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	面部跟踪的最低置信度分数才会被视为成功	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	指定面部特征点是否输出面部融合变形。人脸融合变形用于渲染 3D 人脸模型。	`Boolean`	`False`
`outputFacialTransformationMatrixes`	FaceMarkerer 是否输出面部图像转换矩阵。FaceMarkerer 使用矩阵将人脸特征点从规范人脸模型转换为以便用户可以对检测到的特征点应用效果。	`Boolean`	`False`

准备数据

人脸识别工具可以检测图片中采用托管浏览器该任务还会处理数据输入预处理，包括调整大小、旋转和值归一化。如需在视频中为人脸添加地标，您可以利用该 API 根据时间戳和时间戳，一次快速处理一帧。用于确定人脸出现在视频中的时间。

运行任务

人脸特征点标记器使用 detect()（在运行模式 IMAGE 下）和要触发的 detectForVideo()（采用运行模式 VIDEO）方法推理。任务处理数据，尝试对人脸进行标记，然后报告结果

运行对人脸特征点标记器 detect() 和 detectForVideo() 方法的调用同时阻塞界面线程。如果检测到人脸设备摄像头的视频帧中，每次检测都会屏蔽主要线程。您可以通过实现 Web Worker 来运行 detect()，从而避免这种情况。和 detectForVideo() 方法。

以下代码演示了如何使用任务模型执行处理：

映像

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

视频

await faceLandmarker.setOptions({ runningMode: "VIDEO" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const faceLandmarkerResult = faceLandmarker.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

有关运行人脸特征点标记器任务的更完整实现，请参阅代码示例。

处理和显示结果

人脸特征点标记器会为每个检测返回一个结果对象运行。结果对象包含检测到的每个面部的面部网格，坐标。结果对象也可以包含表示面部表情的融合变形，以及转换矩阵对检测到的特征点应用人脸效果。

以下示例展示了此任务的输出数据：

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

下图直观显示了任务输出：

人脸识别标记器示例代码演示了如何显示结果，请参阅代码示例