首页 > 营销学院 > 技术知识

使用face-api.js在浏览器中实现多目标人脸识别与Svelte集成

本教程旨在解决使用face-api.js在svelte项目中进行人脸识别时，多个人脸被错误识别为同一人的问题。文章将深入探讨`labeledfacedescriptors`和`facematcher`的正确构建方法，确保每个已知人脸都能被准确识别。通过详细的代码示例和专业指导，读者将学会如何加载模型、初始化摄像头、实时检测并匹配多个人脸，并最终在canvas上绘制识别结果，从而构建一个健壮且高效的浏览器端人脸识别系统。

浏览器端人脸识别：使用face-api.js与Svelte实现多目标精确识别

在现代Web应用中集|成人|脸识别功能，face-api.js是一个强大且易于使用的J*aScript库。结合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 n*igator.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无法区分不同的人。

SONIFY.io

设计和开发音频优先的产品和数据驱动的解决方案

75 查看详情 SONIFY.io

正确的做法是：为每个客户创建一个独立的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集成的详细内容，更多请关注其它相关文章！

# 靖江网站建设私人定做 # 创建一个 # 检测到 # 我们可以 # 器中 # 表单 # 中集 # 武隆区网站推广公司 # 西安网站推广威星hfqjwl作词 # 递归 # 服务seo策略 # 太阳宫网络营销推广方案 # 提高关键词的排名 # 智能营销推广信息中心招聘 # 大流量网站优化软件下载 # 武强营销型网站建设费用 # 朔州seo优化推广软件 # javascript # 加载 # 多个 # 的人 # 常 # 人脸识别 # cdn # ai # app # 浏览器 # npm # github # json # git # js # java

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-10-20

SQL多表关联如何理解_核心原理解析助你掌握关键方法【教程】 SQL多表连接如何理解_JOIN关联关系详细步骤解析【指导】 SQL多表连接结果异常怎么办_JOIN条件排查方法解析【指导】 SQL索引下推是什么_ICP机制性能提升原理【教程】 SQL跨表统计怎么写_重要技巧总结提升查询效率【技巧】 SQL注入如何防护_完整逻辑拆解助力系统化掌握【技巧】 SQL上传文件信息建模方法_SQL存储文件元数据方案 SQL多语种存储方案设计_SQL字符集选择策略 SQL字符串处理如何编写_重要技巧总结提升查询效率【教学】 SQL去重查询怎么实现_优化思路讲解帮助高效处理数据【技巧】 SQL统计复购用户怎么做_多次行为分析SQL思路【教程】 SQL字符串处理如何编写_优化思路讲解帮助高效处理数据【教程】 SQL动态字段解析技巧_SQL解析JSON多层字段 SQL线上慢SQL如何治理_规范与工具实践总结【技巧】 SQL表结构如何演进_兼容老数据设计思路【教程】 SQL排序规则如何设置_ORDERBY排序原理与性能说明【指导】 SQL去重查询怎么实现_真实案例解析强化复杂查询思维【教学】 SQL按字段范围分批处理_SQL避免长时间锁表 SQL统计不同字段组合数量_多列聚合查询技巧【技巧】 SQL多字段去重怎么处理_GROUPBY去重思路说明【教学】

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。