本教程旨在解决使用face-api.js在svelte项目中进行人脸识别时，多个人脸被错误识别为同一人的问题。文章将深入探讨`labeledfacedescriptors`和`facematcher`的正确构建方法，确保每个已知人脸都能被准确识别。通过详细的代码示例和专业指导，读者将学会如何加载模型、初始化摄像头、实时检测并匹配多个人脸，并最终在canvas上绘制识别结果，从而构建一个健壮且高效的浏览器端人脸识别系统。
浏览器端人脸识别：使用face-api.js与Svelte实现多目标精确识别
在现代Web应用中集成人脸识别功能，face-api.js是一个强大且易于使用的JavaScript库。结合Svelte框架，我们可以构建高性能、响应式的用户界面。然而，在实现多目标人脸识别时，开发者常会遇到一个常见问题：系统能够检测到多个人脸，但会将所有检测到的人脸错误地识别为同一个已知个体。本教程将深入分析这一问题的原因，并提供一个完善的解决方案，指导您如何正确地构建和使用face-api.js，以实现对多个已知人脸的精确识别。
1. 环境准备与模型加载
首先，确保您的Svelte项目中已安装face-api.js。您可以通过npm或yarn进行安装：
npm install face-api.js # 或 yarn add face-api.js
在Svelte组件中，我们需要导入必要的模块，并定义模型加载的URL。为了在浏览器中运行，通常会从CDN或本地服务器加载模型权重文件。
<script>
import * as faceapi from 'face-api.js';
import { onMount, onDestroy } from 'svelte';
// 假设 $customers 和 $baseURL 是Svelte store，用于管理客户数据和基础URL
import { customers, baseURL } from './stores';
let video;
let detections = [];
let width = 640; // 调整视频和画布宽度
let height = 480; // 调整视频和画布高度
let canvas, ctx;
let container;
let faceMatcher; // 声明 faceMatcher 变量
const detectionOptions = {
withLandmarks: true,
withDescriptors: true,
minConfidence: 0.5,
// 模型URL，建议使用稳定可靠的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.remove();
}
if (canvas) {
canvas.remove();
}
});
// 组件挂载时初始化
onMount(() => {
initializeFaceRecognition();
});
export let view_sales_function; // 假设这是一个外部传入的函数
</script>
<div bind:this={container} class="container z-0 rounded-2xl" />2. 获取视频流与创建画布
为了进行实时人脸识别，我们需要从用户的摄像头获取视频流，并创建一个Canvas元素用于绘制视频帧和识别结果。
// 辅助函数：获取视频流
async function getVideo() {
const videoElement = document.createElement("video");
videoElement.setAttribute("style", "display: none;"); // 隐藏视频元素，只在canvas上显示
videoElement.width = width;
videoElement.height = height;
container.appendChild(videoElement);
const capture = await navigator.mediaDevices.getUserMedia({ video: true });
videoElement.srcObject = capture;
videoElement.play();
return videoElement;
}
// 辅助函数：创建Canvas
function createCanvas(w, h) {
const canvasElement = document.createElement("canvas");
canvasElement.setAttribute("style", "border-radius: 1rem");
canvasElement.width = w;
canvasElement.height = h;
container.appendChild(canvasElement);
return canvasElement;
}3. 核心挑战：正确构建 LabeledFaceDescriptors
多目标人脸识别问题的根源在于faceapi.LabeledFaceDescriptors的构建方式。原始代码将所有客户的人脸描述符（descriptors）添加到一个共享的数组中，然后为每个客户都使用这个共享数组创建一个LabeledFaceDescriptors对象，导致所有客户最终都指向了同一个描述符集合，从而使FaceMatcher无法区分不同的人。
正确的做法是：为每个客户创建一个独立的LabeledFaceDescriptors对象，其中包含该客户自己的名称和其人脸描述符数组。
// 核心函数：获取带标签的人脸描述符集合
async function getLabeledFaceDescriptors() {
console.log("Loading labeled face descriptors...");
const labeledDescriptors = await Promise.all(
$customers.map(async (customer) => {
if (!customer.image_url) {
console.warn(`Customer ${customer.name} has no image_url, skipping.`);
return null;
}
const descriptors = [];
try {
// 从客户图片URL获取图片
const img = await faceapi.fetchImage($baseURL + customer.image_url);
// 检测图片中的单个人脸并提取其描述符
const faceDetection = await faceapi
.detectSingleFace(img)
.withFaceLandmarks()
.withFaceDescriptor();
if (faceDetection && faceDetection.descriptor) {
descriptors.push(faceDetection.descriptor);
console.log(`Successfully processed image for ${customer.name}`);
} else {
console.warn(`No face detected in image for ${customer.name} or descriptor missing.`);
}
} catch (error) {
console.error(`Error processing image for ${customer.name}:`, error);
}
if (descriptors.length > 0) {
// 为当前客户创建一个 LabeledFaceDescriptors 对象
// 包含客户姓名和其对应的人脸描述符数组
return new faceapi.LabeledFaceDescriptors(customer.name, descriptors);
} else {
return null; // 如果没有获取到描述符，则返回 null
}
})
);
// 过滤掉未能成功获取描述符的客户
return labeledDescriptors.filter(d => d !== null);
}4. 初始化模型与人脸匹配器
在模型加载完成后，我们需要调用getLabeledFaceDescriptors来准备已知人脸数据，并使用这些数据初始化faceapi.FaceMatcher。FaceMatcher将用于在实时视频流中识别人脸。
// 初始化函数
async function initializeFaceRecognition() {
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.warn("No valid labeled face descriptors found. Recognition will only identify 'Unknown'.");
}
// 初始化人脸匹配器，设置匹配距离阈值（0.6是常用值，可根据需求调整）
faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6);
console.log("FaceMatcher initialized.");
// 开始实时检测
startDetectionLoop();
}5. 实时人脸检测与识别循环
通过setInterval函数，我们可以周期性地从视频流中检测所有人脸，并使用faceMatcher进行匹配。
// 启动检测循环
function startDetectionLoop() {
const displaySize = { width: video.width, height: video.height };
setInterval(async () => {
// 检测视频流中的所有人脸，并提取地标和描述符
detections = await faceapi
.detectAllFaces(video)
.withFaceLandmarks()
.withFaceDescriptors();
// 将检测结果按显示尺寸进行调整
detections = faceapi.resizeResults(detections, displaySize);
// 对每个检测到的人脸，使用 faceMatcher 找到最佳匹配
const results = detections. 
