借助 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 facedetector = await FaceDetector.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "path/to/model"
},
runningMode: runningMode
});
配置选项
此任务针对 Web 应用和 JavaScript 应用提供以下配置选项:
选项名称 | 说明 | 值范围 | 默认值 |
---|---|---|---|
option_var_1_web_js |
设置任务的运行模式。有两种模式: IMAGE:单张图片输入的模式。 VIDEO:视频的解码帧或输入数据(例如来自摄像头)的直播数据中的解码帧的模式。 |
{IMAGE, VIDEO } |
IMAGE |
minDetectionConfidence |
人脸检测被视为成功的最低置信度分数。 | Float [0,1] |
0.5 |
minSuppressionThreshold |
将人脸检测视为重叠的最小非最大抑制阈值。 | Float [0,1] |
0.3 |
准备数据
人脸检测器可以检测主机浏览器支持的任何格式的图片中的人脸。该任务还可处理数据输入预处理,包括大小调整、旋转和值归一化。如需检测视频中的人脸,您可以使用该 API 一次快速处理一帧,同时根据帧的时间戳来确定人脸在视频中出现的时间。
运行任务
人脸检测器使用 detect()
(运行模式为 image
)和 detectForVideo()
(运行模式 video
)方法触发推断。该任务会处理数据,尝试检测人脸,然后报告结果。
对人脸检测器 detect()
和 detectForVideo()
方法的调用会同步运行,并阻塞界面线程。如果您通过设备的摄像头检测视频帧中的人脸,则每次检测都会阻塞主线程。为防止出现这种情况,您可以实现 Web 工作器以在另一个线程上运行 detect()
和 detectForVideo()
方法。
以下代码演示了如何使用任务模型执行处理:
映像
const image = document.getElementById("image") as HTMLImageElement; const faceDetectorResult = faceDetector.detect(image);
视频
await faceDetector.setOptions({ runningMode: "video" }); let lastVideoTime = -1; function renderLoop(): void { const video = document.getElementById("video"); if (video.currentTime !== lastVideoTime) { const detections = faceDetector.detectForVideo(video); processResults(detections); lastVideoTime = video.currentTime; } requestAnimationFrame(() => { renderLoop(); }); }
如需了解运行人脸检测器任务的更完整实现,请参阅代码示例。
处理和显示结果
对于每次检测运行,人脸检测器都会生成一个人脸检测器结果对象。结果对象包含图片坐标中的人脸和世界坐标中的人脸。
下面显示了此任务的输出数据示例:
FaceDetectionResult:
Detections:
Detection #0:
BoundingBox:
origin_x: 126
origin_y: 100
width: 463
height: 463
Categories:
Category #0:
index: 0
score: 0.9729152917861938
NormalizedKeypoints:
NormalizedKeypoint #0:
x: 0.18298381567001343
y: 0.2961040139198303
NormalizedKeypoint #1:
x: 0.3302789330482483
y: 0.29289937019348145
... (6 keypoints for each face)
Detection #1:
BoundingBox:
origin_x: 616
origin_y: 193
width: 430
height: 430
Categories:
Category #0:
index: 0
score: 0.9251380562782288
NormalizedKeypoints:
NormalizedKeypoint #0:
x: 0.6151331663131714
y: 0.3713381886482239
NormalizedKeypoint #1:
x: 0.7460576295852661
y: 0.38825345039367676
... (6 keypoints for each face)
下图显示了任务输出的可视化效果:
对于没有边界框的图片,请参阅原始图片。
人脸检测器示例代码演示了如何显示任务返回的结果,请参阅代码示例