借助 MediaPipe 人脸特征点任务，您可以检测图片和视频中的人脸特征点和面部表情。您可以使用此任务来识别人类面部表情，应用面部滤镜和特效，并创建虚拟头像。此任务使用可处理单张图片或连续图片流的机器学习 (ML) 模型。该任务会输出三维人脸特征点、融合变形得分（表示面部表情的系数）以实时推断详细的面部表面，还会输出转换矩阵以执行特效渲染所需的转换。
以下说明介绍了如何使用适用于 Web 应用和 JavaScript 应用的人脸特征点。如需详细了解此任务的功能、模型和配置选项，请参阅概览。
代码示例
人脸特征点的示例代码在 JavaScript 中提供了此任务的完整实现，以供您参考。此代码可帮助您测试此任务并开始构建您自己的人脸特征点应用。您只需使用网络浏览器即可查看、运行和修改人脸特征点示例代码。
初始设置
本部分介绍了专门为使用人脸特征点而设置开发环境的关键步骤。如需了解有关设置 Web 和 JavaScript 开发环境的一般信息（包括平台版本要求），请参阅 Web 设置指南。
JavaScript 软件包
人脸特征点代码通过 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.js"
crossorigin="anonymous"></script>
</head>
模型
MediaPipe 人脸特征点任务需要使用与此任务兼容的经过训练的模型。如需详细了解可用于人脸特征点且经过训练的模型，请参阅任务概览“模型”部分。
选择并下载模型，然后将其存储在项目目录中：
<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：单张图片输入的模式。 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 |
人脸特征点是否输出人脸融合变形。 人脸融合变形用于渲染 3D 脸部模型。 | Boolean |
False |
outputFacialTransformationMatrixes |
FaceMarkerer 是否输出面部转换矩阵。FaceMarkerer 使用矩阵将人脸特征点从规范脸部模型转换为检测到的人脸，以便用户可以对检测到的特征点应用效果。 | Boolean |
False |
准备数据
人脸特征点工具可以检测主机浏览器支持的任何格式的图片中的人脸。该任务还可处理数据输入预处理，包括大小调整、旋转和值归一化。如需在视频中标记人脸，您可以使用 API 一次快速处理一帧，同时根据帧的时间戳来确定人脸在视频中出现的时间。
运行任务
人脸特征点使用 detect()（运行模式为 IMAGE）和 detectForVideo()（运行模式 VIDEO）方法触发推断。该任务会处理数据，尝试标记人脸，然后报告结果。
对人脸特征点的 detect() 和 detectForVideo() 方法的调用会同步运行，并且会阻塞界面线程。如果您通过设备的摄像头检测视频帧中的人脸，则每次检测都会阻塞主线程。为防止出现这种情况，您可以实现 Web 工作器以在另一个线程上运行 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]
...
下图显示了任务输出的可视化效果：
人脸特征点示例代码演示了如何显示任务返回的结果，请参阅代码示例