H5 基于 face-api 实现简单人脸活体检测

一、背景与需求分析

随着互联网应用的普及，人脸识别技术已广泛应用于身份验证、支付认证等场景。然而，传统的人脸识别系统容易受到照片、视频等伪造攻击，导致安全风险。活体检测技术通过分析人脸的动态特征（如眨眼、头部运动）或生理特征（如皮肤纹理、血流变化），能够有效区分真实人脸与伪造攻击，成为保障人脸识别安全性的关键环节。

在H5场景下，由于浏览器环境的限制，传统基于硬件（如3D摄像头）或复杂算法的活体检测方案难以直接应用。而face-api.js作为一款基于TensorFlow.js的轻量级人脸检测库，能够在浏览器中运行，支持人脸关键点检测、表情识别等功能，为H5场景下的活体检测提供了可行的技术路径。

本文将详细介绍如何基于H5和face-api.js实现一个简单的人脸活体检测系统，涵盖技术原理、实现步骤、代码示例及优化建议，帮助开发者快速构建安全可靠的人脸验证功能。

二、技术原理与face-api.js简介

1. 活体检测技术原理

活体检测的核心是通过分析人脸的动态或生理特征，判断其是否为真实活体。常见的方法包括：

• 动作配合检测：要求用户完成指定动作（如眨眼、张嘴、摇头），通过检测动作的连续性和自然性验证活体。
• 纹理分析检测：利用真实人脸的皮肤纹理、毛孔分布等特征，与照片、视频等平面伪造攻击进行区分。
• 血流分析检测：通过分析人脸区域的血流变化（如红外成像下的血管分布），判断是否为活体。

在H5场景下，由于无法直接获取红外或深度信息，动作配合检测成为最实用的方案。本文将基于动作配合检测实现活体验证。

2. face-api.js简介

face-api.js是一个基于TensorFlow.js的JavaScript库，提供了以下核心功能：

• 人脸检测：定位图像中的人脸位置。
• 人脸关键点检测：识别68个人脸关键点（如眼睛、鼻子、嘴巴）。
• 表情识别：判断表情类型（如开心、悲伤）。
• 年龄与性别识别：估计年龄和性别。

face-api.js的优势在于其轻量级和浏览器兼容性，无需后端支持即可在H5页面中运行。通过结合人脸关键点检测和动作分析，可以实现简单的活体检测功能。

三、实现步骤与代码示例

1. 环境准备

首先，需要在H5页面中引入face-api.js库。可以通过CDN引入：

<script src="https://cdn.jsdelivr.net/npm/face-api.js@latest/dist/face-api.min.js"></script>

2. 初始化模型

face-api.js需要加载预训练模型才能进行人脸检测和关键点识别。在页面加载时初始化模型：

async function loadModels() {
  await faceapi.nets.tinyFaceDetector.loadFromUri('/models');
  await faceapi.nets.faceLandmark68Net.loadFromUri('/models');
}
// 调用初始化
loadModels().catch(console.error);

其中，/models是模型文件的存放路径，需提前下载并放置到对应目录。

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

通过摄像头获取视频流，并实时检测人脸和关键点：

const video = document.getElementById('video');
async function startVideo() {
  const stream = await navigator.mediaDevices.getUserMedia({ video: {} });
  video.srcObject = stream;
}
video.addEventListener('play', async () => {
  const canvas = faceapi.createCanvasFromMedia(video);
  document.body.append(canvas);
  const displaySize = { width: video.width, height: video.height };
  faceapi.matchDimensions(canvas, displaySize);
  setInterval(async () => {
    const detections = await faceapi
      .detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
      .withFaceLandmarks();
    const resizedDetections = faceapi.resizeResults(detections, displaySize);
    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
    faceapi.draw.drawDetections(canvas, resizedDetections);
    faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
  }, 100);
});
startVideo().catch(console.error);

上述代码实现了：

1. 调用摄像头获取视频流。
2. 每隔100ms检测一次人脸和关键点。
3. 在画布上绘制检测结果。

4. 动作配合检测（眨眼检测）

通过检测眼睛的闭合程度判断是否眨眼。定义一个函数计算眼睛的纵横比（EAR）：

function getEyeAspectRatio(landmarks) {
  const verticalDist = distance(landmarks[1], landmarks[5]) + distance(landmarks[2], landmarks[4]);
  const horizontalDist = distance(landmarks[0], landmarks[3]);
  return verticalDist / (2 * horizontalDist);
}
function distance(point1, point2) {
  return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
}

在视频检测循环中加入眨眼判断逻辑：

let isBlinking = false;
let blinkCount = 0;
const EAR_THRESHOLD = 0.2;
const BLINK_FRAME_THRESHOLD = 3;
setInterval(async () => {
  const detections = await faceapi
    .detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
    .withFaceLandmarks();
  if (detections.length > 0) {
    const landmarks = detections[0].landmarks.positions;
    const leftEye = [landmarks[36], landmarks[37], landmarks[38], landmarks[39], landmarks[40], landmarks[41]];
    const rightEye = [landmarks[42], landmarks[43], landmarks[44], landmarks[45], landmarks[46], landmarks[47]];
    const leftEAR = getEyeAspectRatio(leftEye);
    const rightEAR = getEyeAspectRatio(rightEye);
    const avgEAR = (leftEAR + rightEAR) / 2;
    if (avgEAR < EAR_THRESHOLD && !isBlinking) {
      isBlinking = true;
    } else if (avgEAR >= EAR_THRESHOLD && isBlinking) {
      blinkCount++;
      isBlinking = false;
    }
  }
  if (blinkCount >= BLINK_FRAME_THRESHOLD) {
    console.log('眨眼检测通过');
    blinkCount = 0;
  }
}, 100);

上述代码实现了：

1. 计算左右眼的EAR值。
2. 当EAR值低于阈值时标记为眨眼开始。
3. 当EAR值恢复时标记为眨眼结束，并计数。
4. 如果连续检测到多次眨眼，则认为活体检测通过。

5. 完整流程整合

将人脸检测、关键点识别和眨眼检测整合为一个完整的活体检测流程：

1. 用户点击“开始检测”按钮，启动摄像头。
2. 系统实时检测人脸并绘制关键点。
3. 系统检测眨眼动作，并提示用户完成指定次数（如3次）。
4. 检测通过后，显示“活体检测成功”，并提交验证结果。

四、优化建议与注意事项

1. 性能优化

• 模型选择：使用TinyFaceDetector替代SsdMobilenetv1以提高检测速度。
• 检测频率：适当降低检测频率（如100ms→200ms）以减少计算量。
• 画布更新：仅在检测到人脸时更新画布，避免不必要的绘制。

2. 安全性增强

• 多动作配合：结合张嘴、摇头等动作，提高抗攻击能力。
• 随机动作序列：生成随机动作序列，防止攻击者预录视频。
• 超时机制：设置检测超时时间，避免长时间无响应。

3. 用户体验优化

• 实时反馈：在检测过程中提供实时提示（如“请眨眼”“检测中”）。
• 结果可视化：通过动画或进度条展示检测进度。
• 错误处理：处理摄像头权限拒绝、模型加载失败等异常情况。

五、总结与展望

本文介绍了基于H5和face-api.js实现简单人脸活体检测的完整方案，包括技术原理、实现步骤和代码示例。通过动作配合检测（如眨眼），可以在浏览器环境中实现基本的活体验证功能。然而，该方案仍存在局限性，如易受到高级伪造攻击（如3D面具）。未来可结合以下方向进一步优化：

• 深度学习模型：引入更先进的活体检测模型（如基于RGB-D的模型）。
• 多模态融合：结合语音、行为等多模态信息提高检测准确性。
• 硬件加速：利用WebGPU或WebAssembly提升计算性能。

希望本文能为开发者提供实用的参考，助力构建安全可靠的人脸识别系统。