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(() => {