vue 使用 face-api.js 实现人脸识别

HTML 代码如下

<div class="videoBox" id="videoBox">
  <video ref="videoPlayer" width="800" height="600" autoplay muted playsinline></video>
  <canvas ref="overlay"></canvas>
</div>

把模型放到 public 文件夹内的 models 文件夹内

模型下载地址：
GitHub
蓝奏云

引入 face-api.min.js

face-api 地址：
GitHub
蓝奏云

import "./assets/js/face-api.min.js";

在 created 方法内加载模型

Promise.all([
  // 用于人脸检测的高精度模型
  faceapi.nets.ssdMobilenetv1.loadFromUri("./models"),
  // 用于人脸检测的小型模型，速度快但精度略低
  // faceapi.nets.tinyFaceDetector.loadFromUri("./models"),
  // 用于检测 68 个面部特征点
  faceapi.nets.faceLandmark68Net.loadFromUri("./models"),
  // 用于检测 68 个面部特征点的小型模型
  // faceapi.nets.faceLandmark68TinyNet.loadFromUri("./models"),
  // 用于人脸识别
  faceapi.nets.faceRecognitionNet.loadFromUri("./models"),
  // 用于估计年龄和性别
  faceapi.nets.ageGenderNet.loadFromUri("./models"),
  // 用于检测面部表情（如快乐、悲伤、愤怒等）
  faceapi.nets.faceExpressionNet.loadFromUri("./models"),
])
  .then(() => {
   
    this.$nextTick(() => {