本文旨在解决使用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框架，并经过优化以支持多目标人脸识别的完整代码示例。
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
以上就是基于Face-api.js的浏览器端多目标人脸识别优化指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531114.html
微信扫一扫 
支付宝扫一扫 
