基于Vue与face-api.js的活体检测Demo实现指南

一、活体检测技术背景与face-api.js优势

活体检测是生物特征识别中的重要环节，旨在区分真实人脸与照片、视频或3D模型的攻击行为。传统方案依赖专用硬件（如双目摄像头），而基于face-api.js的纯软件方案通过分析面部微表情、纹理变化和动作指令（如眨眼、转头）实现低成本活体检测。

face-api.js是一个基于TensorFlow.js的浏览器端计算机视觉库，支持人脸检测、特征点识别和表情分析。其核心优势在于：

1. 纯前端实现：无需后端服务，数据在用户设备处理，符合隐私保护要求。
2. 轻量化部署：通过WebAssembly加速，兼容主流浏览器。
3. 模块化设计：可灵活组合人脸检测、特征点识别和动作分析模块。

二、Vue 3项目搭建与face-api.js集成

1. 项目初始化

npm init vue@latest vue-liveness-demo
cd vue-liveness-demo
npm install

2. 安装face-api.js依赖

npm install face-api.js

3. 基础组件结构

<template>
  <div class="liveness-container">
    <video ref="video" autoplay playsinline></video>
    <canvas ref="canvas"></canvas>
    <div class="controls">
      <button @click="startDetection">开始检测</button>
      <div v-if="result" class="result">{{ result }}</div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as faceapi from 'face-api.js';
const video = ref(null);
const canvas = ref(null);
const result = ref('');
// 模型加载与初始化逻辑（后续展开）
</script>

三、核心功能实现

1. 模型加载与初始化

async function loadModels() {
  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);
  await faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL);
}
onMounted(async () => {
  await loadModels();
  startVideo();
});

2. 视频流捕获与检测

function startVideo() {
  navigator.mediaDevices.getUserMedia({ video: {} })
    .then(stream => {
      video.value.srcObject = stream;
    })
    .catch(err => console.error('视频捕获失败:', err));
}

3. 活体检测逻辑实现

动作指令设计：

• 眨眼检测：通过眼高比（Eye Aspect Ratio, EAR）判断
• 头部姿态：利用68个特征点计算偏航角（Yaw）和俯仰角（Pitch）
• 纹理分析：基于LBP（局部二值模式）检测屏幕反射特征

EAR计算示例：

function calculateEAR(landmarks) {
  const verticalDist = distance(landmarks[42], landmarks[45]);
  const horizontalDist = distance(landmarks[38], landmarks[41]);
  return verticalDist / horizontalDist;
}
function distance(p1, p2) {
  return Math.hypot(p1.x - p2.x, p1.y - p2.y);
}

完整检测流程：

async function detectLiveness() {
  const detections = await faceapi.detectAllFaces(
    video.value,
    new faceapi.TinyFaceDetectorOptions()
  ).withFaceLandmarks().withFaceExpressions();
  if (detections.length === 0) {
    result.value = '未检测到人脸';
    return;
  }
  const landmarks = detections[0].landmarks;
  const expression = detections[0].expressions;
  // 眨眼检测
  const ear = calculateEAR(landmarks.getUpperEyePoints());
  const isBlinking = ear < 0.2;
  // 头部姿态分析
  const { yaw, pitch } = calculateHeadPose(landmarks);
  const isHeadMoving = Math.abs(yaw) > 15 || Math.abs(pitch) > 10;
  // 综合判断
  if (isBlinking && isHeadMoving && expression.happy > 0.7) {
    result.value = '活体检测通过';
  } else {
    result.value = '疑似攻击行为';
  }
}

四、性能优化策略

1. 模型裁剪：使用faceapi.nets.tinyFaceDetector替代SSD Mobilenet，FPS提升40%
2. 检测频率控制：通过requestAnimationFrame限制每秒检测次数
3. WebWorker多线程：将特征计算移至Worker线程
4. 模型量化：使用TensorFlow.js的quantizeTo8Bits减少内存占用

五、安全增强措施

1. 动态指令：随机生成动作序列（如”先眨眼后转头”）
2. 环境光检测：通过video.value.getVideoTracks()[0].getSettings().brightness判断是否在真实环境中
3. 多帧验证：连续5帧检测结果一致才判定通过
4. HTTPS强制：通过navigator.connection.type检测网络环境

六、部署与扩展建议

1. 模型压缩：使用TensorFlow.js Converter将模型转换为tf.lite格式
2. PWA支持：添加workbox实现离线检测
3. 后端验证：关键操作上传特征向量至服务器二次验证
4. 跨平台适配：通过Cordova打包为移动端APP

七、完整Demo示例

<script setup>
import { ref, onMounted } from 'vue';
import * as faceapi from 'face-api.js';
const video = ref(null);
const canvas = ref(null);
const result = ref('');
let isDetecting = false;
async function init() {
  await Promise.all([
    faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
    faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
    faceapi.nets.faceExpressionNet.loadFromUri('/models')
  ]);
  startVideo();
}
function startVideo() {
  navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 } })
    .then(stream => video.value.srcObject = stream)
    .catch(console.error);
}
async function detect() {
  if (!isDetecting) return;
  const detections = await faceapi.detectAllFaces(
    video.value,
    new faceapi.TinyFaceDetectorOptions()
  ).withFaceLandmarks().withFaceExpressions();
  if (detections.length > 0) {
    const landmarks = detections[0].landmarks;
    const ear = calculateEAR(landmarks.getUpperEyePoints());
    const { yaw } = calculateHeadPose(landmarks);
    if (ear < 0.25 && Math.abs(yaw) < 20) {
      result.value = '检测到真实人脸';
    } else {
      result.value = '检测异常';
    }
  }
  requestAnimationFrame(detect);
}
onMounted(init);
</script>

八、总结与展望

本Demo展示了如何通过Vue 3和face-api.js构建基础活体检测系统，实际应用中需结合：

1. 更复杂的动作指令库
2. 服务器端二次验证
3. 持续更新的攻击样本库
4. 硬件加速优化（如WebGPU）

未来发展方向包括3D活体检测、多模态生物特征融合等高级技术，但当前方案已能满足大多数中低安全场景需求。开发者可根据实际业务需求调整检测阈值和验证流程。