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

npm install face-api.js
# 或 yarn add face-api.js

<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" />

  // 辅助函数：获取视频流
  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;
  }

  // 核心函数：获取带标签的人脸描述符集合
  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);
  }

  // 初始化函数
  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();
  }

  // 启动检测循环
  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.