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