隆重推出 Google AI Edge Portal：大规模对边缘 AI 进行基准测试。注册以在非公开预览期间申请访问权限。

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

借助 MediaPipe Face Landmarker 任务，您可以检测图片和视频中的人脸特征点和面部表情。您可以使用此任务来识别人类面部表情、应用面部滤镜和效果，以及创建虚拟头像。此任务使用机器学习 (ML) 模型，这些模型可以处理单张图片或连续的图片流。该任务会输出 3 维人脸特征点、融合变形分数（表示面部表情的系数）以实时推断详细的面部表面，以及执行效果渲染所需转换的转换矩阵。

以下说明介绍了如何使用适用于 Web 和 JavaScript 应用的 Face Landmarker。如需详细了解此任务的功能、模型和配置选项，请参阅概览。

代码示例

Face Landmarker 的示例代码提供了此任务在 JavaScript 中的完整实现，供您参考。此代码可帮助您测试此任务，并开始构建您自己的人脸特征点检测应用。您只需使用 Web 浏览器即可查看、运行和修改 Face Landmarker 示例。

设置

本部分介绍了设置开发环境以专门使用 Face Landmarker 的关键步骤。如需了解有关设置 Web 和 JavaScript 开发环境的一般信息（包括平台版本要求），请参阅 Web 设置指南。

JavaScript 软件包

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

您可以使用以下命令通过 NPM 安装所需的软件包：

npm install @mediapipe/tasks-vision

如果您想通过内容分发网络 (CDN) 服务导入任务代码，请在 HTML 文件中的 <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.mjs"
    crossorigin="anonymous"></script>
</head>

模型

MediaPipe Face Landmarker 任务需要与此任务兼容的已训练模型。如需详细了解可用于 Face Landmarker 的已训练模型，请参阅任务概览的 “模型”部分。

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

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

创建任务

使用其中一个 Face Landmarker createFrom...() 函数来准备运行推理的任务。使用 createFromModelPath() 函数以及已训练模型文件的相对或绝对路径。如果您的模型已加载到内存中，则可以使用 createFromModelBuffer() 方法。

以下代码示例演示了如何使用 createFromOptions() 函数来设置任务。借助 createFromOptions 函数，您可以使用配置选项自定义 Face Landmarker。如需了解详情，请参阅配置选项。

以下代码演示了如何使用自定义选项构建和配置任务：

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：用于单张图片输入的模式。 VIDEO：用于视频的解码帧或输入数据（例如来自摄像头的数据）的直播的模式。	{`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`	Face Landmarker 是否输出人脸融合变形。人脸融合变形用于渲染 3D 脸部模型。	`Boolean`	`False`
`outputFacialTransformationMatrixes`	FaceLandmarker 是否输出面部转换矩阵。FaceLandmarker 使用该矩阵将人脸特征点从规范脸部模型转换为检测到的人脸，以便用户可以对检测到的特征点应用效果。	`Boolean`	`False`

准备数据

Face Landmarker 可以检测主机浏览器支持的任何格式的图片中的人脸。该任务还会处理数据输入预处理，包括调整大小、旋转和值归一化。如需在视频中标记人脸，您可以使用该 API 快速处理每个帧，并使用帧的时间戳来确定人脸在视频中出现的时间。

运行任务

Face Landmarker 使用 detect()（运行模式为 IMAGE）和 detectForVideo()（运行模式为 VIDEO）方法来触发推理。该任务会处理数据，尝试标记人脸，然后报告结果。

对 Face Landmarker 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();
  });
}

如需更完整地了解如何运行 Face Landmarker 任务，请参阅示例。

处理和显示结果

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

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

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]
    ...

下图显示了任务输出的可视化效果：

一位男士，其面部区域已通过几何方式映射出来，以指示其面部的形状和尺寸

Face Landmarker 示例代码演示了如何显示任务返回的结果，请参阅示例