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