本教程旨在解决使用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或本地服务器加载模型权重文件。
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; // 假设这是一个外部传入的函数
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.
以上就是使用face-api.js在浏览器中实现多目标人脸识别与Svelte集成的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531160.html
微信扫一扫 
支付宝扫一扫 
