基于Face-api.js的浏览器端多目标人脸识别优化指南

<script>
  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