本文旨在解决使用face-api.js在浏览器中进行人脸识别时，无法正确区分多个已知人脸的问题。通过优化`labeledfacedescriptors`的构建方式和`facematcher`的使用逻辑，确保系统能够准确识别并标记视频流中的每一张已知人脸，并提供完整的svelte代码实现及详细解析，帮助开发者构建稳定高效的浏览器人脸识别应用。
概述
在浏览器环境中实现人脸识别，face-api.js是一个功能强大且易于使用的库。它基于TensorFlow.js，能够加载预训练模型，实现人脸检测、特征点定位、人脸描述符提取以及人脸识别等功能。然而，在处理多个人脸识别场景时，开发者常会遇到一个常见问题：系统可能只能正确识别一个人脸，或者将所有检测到的人脸都错误地标记为同一个已知身份。这通常是由于对LabeledFaceDescriptors和FaceMatcher的误用导致的。
本教程将深入探讨如何正确地配置和使用face-api.js，以确保在视频流中对多个人脸进行准确识别和标记。我们将提供一个基于Svelte框架的完整示例，并详细解释关键代码逻辑。
核心概念
在深入代码之前，我们先回顾face-api.js中的几个核心概念：
- 人脸检测模型 (SSD Mobilenetv1): 用于在图像或视频中定位人脸的位置。
- 人脸特征点模型 (FaceLandmark68Net): 用于识别人脸上的68个关键特征点，如眼睛、鼻子、嘴巴等。
- 人脸识别模型 (FaceRecognitionNet): 用于从检测到的人脸中提取高维度的特征向量（即人脸描述符），这些描述符可以用来比较不同人脸的相似度。
- 人脸描述符 (FaceDescriptor): 一个人脸的数学表示，是一个浮点数数组，能够唯一标识该人脸的特征。
- 带标签的人脸描述符 (LabeledFaceDescriptors): 一个包含特定人物姓名（标签）及其对应人脸描述符数组的对象。它是face-api.js进行已知人脸匹配的基础。
- 人脸匹配器 (FaceMatcher): 使用一组LabeledFaceDescriptors来比对新检测到的人脸描述符，并找出最匹配的已知人脸。
问题分析与解决方案
原始代码中多目标人脸识别失败的核心原因在于getLabeledFaceDescriptions函数未能为每个客户独立地创建LabeledFaceDescriptors实例。它将所有客户的人脸描述符都推送到了一个全局共享的descriptions数组中，然后为每个客户创建LabeledFaceDescriptors时，都引用了同一个（且通常是最后一个客户的）descriptions数组，这导致FaceMatcher无法正确区分不同的人脸。
正确的解决方案包括以下两点：
- 为每个已知人物独立创建LabeledFaceDescriptors：每个LabeledFaceDescriptors实例都应该包含一个人物的名称和该人物的（一个或多个）人脸描述符。
- 使用detectAllFaces和迭代匹配：在视频流中，应使用faceapi.detectAllFaces来检测所有出现的人脸，然后遍历每个检测到的人脸，并使用faceMatcher.findBestMatch进行独立匹配。
完整代码实现
以下是基于Svelte框架，并经过优化以支持多目标人脸识别的完整代码示例。
<script>
import { onMount, onDestroy } from 'svelte';
import * as faceapi from 'face-api.js';
// 假设 $customers 和 $baseURL 是Svelte store，提供了客户数据和基础URL
// 实际项目中需要根据Svelte store的实现方式进行调整
// 例如：import { customers, baseURL } from './stores';
// let $customers = get(customers); // 假设通过get函数获取store值
// let $baseURL = get(baseURL); // 假设通过get函数获取store值
// 模拟Svelte store的数据，实际项目中应从外部导入
let $customers = [
{ name: "Customer1", image_url: "/customer1.jpg" },
{ name: "Customer2", image_url: "/customer2.jpg" },
// 更多客户数据
];
let $baseURL = "http://localhost:5000/images"; // 假设图片服务地址
let video;
let canvas, ctx;
let container; // 绑定到DOM元素，用于放置video和canvas
let width = 640; // 视频和画布宽度
let height = 480; // 视频和画布高度
// 检测选项和模型URL
const detectionOptions = {
withLandmarks: true,
withDescriptors: true,
minConfidence: 0.5,
// 推荐使用本地部署的模型，或确保CDN链接稳定
MODEL_URLS: {
Mobilenetv1Model:
"https://raw.githubusercontent.com/ml5js/ml5-data-and-models/main/models/faceapi/ssd_mobilenetv1_model-weights_manifest.json",
FaceLandmarkModel:
"https://raw.githubusercontent.com/ml5js/ml5-data-and-models/main/models/faceapi/face_landmark_68_model-weights_manifest.json",
FaceRecognitionModel:
"https://raw.githubusercontent.com/ml5js/ml5-data-and-models/main/models/faceapi/face_recognition_model-weights_manifest.json",
},
};
// 在组件销毁时清理资源
onDestroy(() => {
if (video) {
video.pause();
if (video.srcObject) {
video.srcObject.getTracks().forEach(track => track.stop()); // 停止摄像头流
}
video.srcObject = null;
video.remove();
}
if (canvas) {
canvas.remove();
}
});
// 组件挂载时初始化
onMount(() => {
initFaceRecognition();
});
// 获取带标签的人脸描述符数组
async function getLabeledFaceDescriptors() {
const labeledDescriptors = await Promise.all(
$customers.map(async (customer) => {
if (!customer.image_url) {
console.warn(`Customer ${customer.name} has no image_url.`);
return null;
}
const descriptorsForCustomer = [];
try {
// 尝试从URL加载图片
const img = await faceapi.fetchImage($baseURL + customer.image_url);
// 检测单个人脸并提取描述符
const face_detection = await faceapi
.detectSingleFace(img, new faceapi.SsdMobilenetv1Options({ minConfidence: 0.7 })) // 提高检测置信度
.withFaceLandmarks()
.withFaceDescriptor();
if (face_detection && face_detection.descriptor) {
descriptorsForCustomer.push(face_detection.descriptor);
console.log(`Successfully extracted descriptor for ${customer.name}`);
} else {
console.warn(`No face detected for customer: ${customer.name} from ${customer.image_url}`);
}
} catch (error) {
console.error(`Error processing image for ${customer.name} from ${customer.image_url}:`, error);
return null;
}
// 如果成功提取到描述符，则创建 LabeledFaceDescriptors
if (descriptorsForCustomer.length > 0) {
return new faceapi.LabeledFaceDescriptors(customer.name, descriptorsForCustomer);
} else {
return null;
}
})
);
// 过滤掉任何处理失败的客户
return labeledDescriptors.filter(d => d !== null);
}
// 初始化人脸识别系统
async function initFaceRecognition() {
// 获取视频流
video = await getVideo();
// 创建画布
canvas = createCanvas(width, height);
ctx = canvas.getContext("2d");
// 加载模型
await Promise.all([
faceapi.nets.ssdMobilenetv1.loadFromUri(detectionOptions.MODEL_URLS.Mobilenetv1Model),
faceapi.nets.faceRecognitionNet.loadFromUri(detectionOptions.MODEL_URLS.FaceRecognitionModel),
faceapi.nets.faceLandmark68Net.loadFromUri(detectionOptions.MODEL_URLS.FaceLandmarkModel),
]);
console.log("Face-api.js models loaded!");
// 模型加载完成后，获取带标签的人脸描述符
const labeledFaceDescriptors = await getLabeledFaceDescriptors();
if (labeledFaceDescriptors.length === 0) {
console.error("No valid labeled face descriptors were loaded. Recognition might not work.");
return;
}
// 创建人脸匹配器，设置匹配阈值（值越小，匹配越严格）
const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors 
