一、技术选型与背景

在前端领域实现人脸识别与活体检测，需平衡性能、精度与浏览器兼容性。本文选择tracking.js（轻量级图像处理）、face.js（基础人脸检测）与face-api.js（基于TensorFlow.js的高级模型）组合，原因如下：

1. tracking.js：提供基础的图像色彩追踪与边缘检测能力，适合预处理摄像头输入数据。
2. face.js：轻量级库，可快速定位人脸关键点（如眼睛、鼻子），但功能有限。
3. face-api.js：基于预训练的深度学习模型（如SSD、TinyFaceDetector），支持68点人脸关键点检测与动作识别，是活体检测的核心。

活体检测（如“张张嘴”）需通过分析面部动作变化判断是否为真实人脸，而非照片或视频。此方案通过连续帧分析与关键点位移计算实现，无需后端支持，适合低安全要求的场景（如考勤、门禁）。

二、环境搭建与依赖安装

1. Vue3项目初始化

npm init vue@latest face-detection-demo
cd face-detection-demo
npm install

2. 安装依赖库

npm install tracking face.js face-api.js

• tracking.js：用于基础图像处理。
• face.js：作为备用或辅助检测工具。
• face-api.js：核心人脸检测与关键点识别库。

3. 引入Webcam API

在public/index.html中添加摄像头权限请求：

<video id="video" width="640" height="480" autoplay playsinline></video>
<canvas id="canvas" width="640" height="480"></canvas>

三、核心实现步骤

1. 初始化摄像头与画布

// src/components/FaceDetection.vue
import { onMounted, ref } from 'vue';
import * as faceapi from 'face-api.js';
export default {
  setup() {
    const videoRef = ref(null);
    const canvasRef = ref(null);
    onMounted(async () => {
      await loadModels();
      startVideo();
    });
    const loadModels = async () => {
      const MODEL_URL = '/models'; // 存放预训练模型的目录
      await faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL);
      await faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL);
      await faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL);
    };
    const startVideo = () => {
      navigator.mediaDevices.getUserMedia({ video: {} })
        .then(stream => {
          videoRef.value.srcObject = stream;
        })
        .catch(err => console.error('摄像头访问失败:', err));
    };
    return { videoRef, canvasRef };
  }
};

2. 人脸检测与关键点识别

使用face-api.js的TinyFaceDetector和faceLandmark68Net模型：

const detectFaces = async () => {
  const displaySize = { width: videoRef.value.width, height: videoRef.value.height };
  faceapi.matchDimensions(canvasRef.value, displaySize);
  const detections = await faceapi.detectAllFaces(videoRef.value, 
    new faceapi.TinyFaceDetectorOptions())
    .withFaceLandmarks();
  const resizedDetections = faceapi.resizeResults(detections, displaySize);
  faceapi.draw.drawDetections(canvasRef.value, resizedDetections);
  faceapi.draw.drawFaceLandmarks(canvasRef.value, resizedDetections);
  // 提取嘴巴关键点（48-68点）
  resizedDetections.forEach(detection => {
    const mouthPoints = detection.landmarks.positions.slice(48, 68);
    // 计算嘴巴张开程度（示例：上下嘴唇垂直距离）
    const mouthOpenness = calculateMouthOpenness(mouthPoints);
    if (mouthOpenness > THRESHOLD) {
      console.log('张嘴动作检测成功');
    }
  });
};
// 在setInterval中循环调用detectFaces
setInterval(detectFaces, 100);

3. 活体检测逻辑（张嘴动作）

关键点位移分析：

1. 提取嘴巴区域的17个关键点（48-68点）。
2. 计算上下嘴唇中点的垂直距离变化：

   const calculateMouthOpenness = (points) => {
     const upperLip = points[13]; // 上嘴唇中点（约52点）
     const lowerLip = points[19]; // 下嘴唇中点（约58点）
     return lowerLip.y - upperLip.y; // 距离越大，张嘴越明显
   };

3. 设定阈值（如20像素），连续3帧超过阈值则判定为有效动作。

4. 优化与性能调优

• 模型选择：TinyFaceDetector比SSD更快，适合移动端。
• 检测频率：降低setInterval间隔（如100ms→200ms）减少CPU占用。
• Web Worker：将人脸检测逻辑移至Web Worker，避免阻塞UI线程。
• 模型量化：使用TensorFlow.js的量化模型减小体积。

四、完整代码示例

<template>
  <div>
    <video ref="video" width="640" height="480" autoplay playsinline></video>
    <canvas ref="canvas" width="640" height="480"></canvas>
    <p v-if="isMouthOpen">张嘴动作检测成功！</p>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import * as faceapi from 'face-api.js';
export default {
  setup() {
    const videoRef = ref(null);
    const canvasRef = ref(null);
    const isMouthOpen = ref(false);
    const MOUTH_THRESHOLD = 20;
    let consecutiveFrames = 0;
    const loadModels = async () => {
      const MODEL_URL = '/models';
      await Promise.all([
        faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
        faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL)
      ]);
    };
    const startVideo = () => {
      navigator.mediaDevices.getUserMedia({ video: {} })
        .then(stream => videoRef.value.srcObject = stream)
        .catch(err => console.error(err));
    };
    const detectFaces = async () => {
      const displaySize = { width: videoRef.value.width, height: videoRef.value.height };
      faceapi.matchDimensions(canvasRef.value, displaySize);
      const detections = await faceapi.detectAllFaces(videoRef.value, 
        new faceapi.TinyFaceDetectorOptions())
        .withFaceLandmarks();
      const resizedDetections = faceapi.resizeResults(detections, displaySize);
      faceapi.draw.drawDetections(canvasRef.value, resizedDetections);
      faceapi.draw.drawFaceLandmarks(canvasRef.value, resizedDetections);
      resizedDetections.forEach(detection => {
        const mouthPoints = detection.landmarks.positions.slice(48, 68);
        const mouthOpenness = calculateMouthOpenness(mouthPoints);
        if (mouthOpenness > MOUTH_THRESHOLD) {
          consecutiveFrames++;
          if (consecutiveFrames >= 3) {
            isMouthOpen.value = true;
          }
        } else {
          consecutiveFrames = 0;
          isMouthOpen.value = false;
        }
      });
    };
    const calculateMouthOpenness = (points) => {
      const upperLip = points[13];
      const lowerLip = points[19];
      return lowerLip.y - upperLip.y;
    };
    onMounted(async () => {
      await loadModels();
      startVideo();
      setInterval(detectFaces, 200);
    });
    return { videoRef, canvasRef, isMouthOpen };
  }
};
</script>

五、部署与注意事项

1. 模型文件：将face-api.js的模型文件（如tiny_face_detector_model-weight.bin）放入public/models目录。
2. HTTPS：摄像头访问需在安全上下文（HTTPS或localhost）中运行。
3. 移动端适配：测试不同设备的性能，必要时降低分辨率。
4. 错误处理：添加摄像头访问失败的用户提示。

六、总结与扩展

本文通过Vue3集成tracking.js、face.js与face-api.js，实现了前端人脸识别与张嘴动作活体检测。核心步骤包括：

1. 摄像头初始化与画布绑定。
2. 加载预训练模型（TinyFaceDetector、FaceLandmark68Net）。
3. 连续帧分析嘴巴关键点位移。
4. 阈值判定与状态反馈。

扩展方向：

• 增加眨眼、摇头等动作检测。
• 结合后端API实现高安全级别验证。
• 使用WebAssembly优化模型推理速度。

此方案适合快速搭建轻量级人脸识别功能，开发者可根据实际需求调整模型精度与检测逻辑。