face-api.js 浏览器人脸识别：精确识别多个人脸的实践指南

// 假设 $customers 和 $baseURL 是 Svelte store 或可访问的变量
// $customers 结构示例: [{ name: 'Customer A', image_url: '/path/to/a.jpg' }, ...]
async function getLabeledFaceDescriptors(customers, baseURL) {
  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 descriptorsForThisCustomer = []; // 为每个客户创建一个独立的描述符数组
      // 可以根据需要从多张图片或同一图片的不同检测中获取多个描述符
      // 这里假设每位客户有一张图片，从中提取一个描述符
      try {
        const img = await faceapi.fetchImage(baseURL + customer.image_url);
        const detection = await faceapi
          .detectSingleFace(img)
          .withFaceLandmarks()
          .withFaceDescriptor();

        if (detection && detection.descriptor) {
          descriptorsForThisCustomer.push(detection.descriptor);
        } else {
          console.warn(`No face detected for ${customer.name} from image: ${baseURL + customer.image_url}`);
        }
      } catch (error) {
        console.error(`Error processing image for ${customer.name}:`, error);
        return null;
      }

      if (descriptorsForThisCustomer.length > 0) {
        // 使用该客户专属的描述符数组创建 LabeledFaceDescriptors
        return new faceapi.LabeledFaceDescriptors(
          customer.name,
          descriptorsForThisCustomer
        );
      }
      return null;
    })
  );
  // 过滤掉任何未能成功获取描述符的客户
  return labeledDescriptors.filter((d) => d !== null);
}

// Svelte script context
import { onMount, onDestroy } from 'svelte';
import * as faceapi from 'face-api.js';

let video;
let detections;
let width = 640; // 调整为适合您的视频流尺寸
let height = 480;
let canvas, ctx;
let container;
let faceMatcher; // 全局 FaceMatcher 实例

// 假设 $customers 和 $baseURL 是 Svelte store，需要在实际应用中注入
// 例如: import { customers, baseURL } from './stores';
// 或者通过 props 传递
export let customers = []; // 假设通过 props 传递客户数据
export let baseURL = ''; // 假设通过 props 传递基础 URL

const detectionOptions = {
  withLandmarks: true,
  withDescriptors: true,
  minConfidence: 0.5,
  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();
});

// ... (getLabeledFaceDescriptors 函数如上所示) ...

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),