face-api.js 人脸识别终极指南：快速上手三部曲

face-api.js 是一个强大的 JavaScript API，专为浏览器和 Node.js 环境设计，提供全面的人脸识别与检测功能。借助 tensorflow.js 后端，它让开发者能够轻松实现面部特征点检测、表情分析、年龄性别预测等高级功能，无需深厚的机器学习背景。本文将通过三个简单步骤，带你从零开始掌握这一工具的核心应用。## 📌 第一步：环境搭建与基础配置### 快速安装指南

管翔渊Lacey

1103人浏览 · 2026-03-02 03:17:24

管翔渊Lacey · 2026-03-02 03:17:24 发布

face-api.js 人脸识别终极指南：快速上手三部曲

【免费下载链接】face-api.js JavaScript API for face detection and face recognition in the browser and nodejs with tensorflow.js 项目地址: https://gitcode.com/gh_mirrors/fa/face-api.js

📌 第一步：环境搭建与基础配置

快速安装指南

face-api.js 支持两种主流开发环境，选择适合你的方式开始：

浏览器环境：直接通过 CDN 引入 tensorflow.js 和 face-api.js：

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>

Node.js 环境：

克隆仓库：git clone https://gitcode.com/gh_mirrors/fa/face-api.js
安装依赖：cd face-api.js && npm install
查看示例：cd examples/examples-nodejs && npm install && npm start

核心模型文件位于项目的 weights/ 目录下，包含人脸检测、特征点识别、表情分析等预训练模型，总大小约 100MB。

🔍 第二步：核心功能与实战演示

人脸检测基础

face-api.js 提供多种检测算法，其中 SSD MobileNet v1 是平衡速度与精度的理想选择：

// 加载模型
await Promise.all([
  faceapi.nets.ssdMobilenetv1.loadFromUri('/weights'),
  faceapi.nets.faceLandmark68Net.loadFromUri('/weights')
]);

// 检测图片中的人脸
const detections = await faceapi.detectAllFaces(imgElement)
  .withFaceLandmarks();

使用 SSD MobileNet 模型检测图片中的多个人脸，红色框标记检测结果

表情识别与特征分析

通过组合不同模型，可以实现更丰富的分析功能：

// 加载表情识别模型
await faceapi.nets.faceExpressionNet.loadFromUri('/weights');

// 同时检测人脸、特征点和表情
const results = await faceapi.detectAllFaces(img)
  .withFaceLandmarks()
  .withFaceExpressions();

face-api.js 能够识别多种表情状态，包括开心、悲伤、惊讶等

🚀 第三步：高级应用与性能优化

实时视频流处理

利用浏览器的 MediaStream API，可以实现实时人脸追踪：

const video = document.getElementById('videoInput');
const canvas = document.getElementById('overlay');

// 获取摄像头流
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => video.srcObject = stream);

// 实时处理每一帧
setInterval(async () => {
  const detections = await faceapi.detectAllFaces(video)
    .withFaceLandmarks()
    .withFaceExpressions();
  
  // 在画布上绘制结果
  faceapi.draw.drawDetections(canvas, detections);
  faceapi.draw.drawFaceExpressions(canvas, detections);
}, 100);

相关实现可参考项目中的 examples/examples-browser/views/webcamFaceExpressionRecognition.html 文件。