vue中实现人脸识别
Vue 中实现人脸识别的步骤
安装依赖库
使用现成的人脸识别库如 face-api.js 或 tracking.js。以 face-api.js 为例：
npm install face-api.js加载模型文件
将 face-api.js 的模型文件（如 weights 文件夹）放入项目的 public 目录，确保浏览器能访问到。
初始化人脸识别
在 Vue 组件中引入库并加载模型：
import * as faceapi from 'face-api.js';
export default {
async mounted() {
await faceapi.nets.tinyFaceDetector.loadFromUri('/weights');
await faceapi.nets.faceLandmark68Net.loadFromUri('/weights');
}
};视频流处理
通过 video 标签捕获摄像头视频流：
<template>
<div>
<video ref="video" width="600" height="450" autoplay muted></video>
<canvas ref="canvas" width="600" height="450"></canvas>
</div>
</template>
<script>
export default {
methods: {
async setupCamera() {
const video = this.$refs.video;
const stream = await navigator.mediaDevices.getUserMedia({ video: {} });
video.srcObject = stream;
return new Promise(resolve => {
video.onloadedmetadata = () => resolve(video);
});
}
}
};
</script>实时检测与绘制
在 mounted 中调用检测逻辑：
async mounted() {
await this.setupCamera();
const video = this.$refs.video;
const canvas = this.$refs.canvas;
const context = canvas.getContext('2d');
setInterval(async () => {
const detections = await faceapi.detectAllFaces(
video,
new faceapi.TinyFaceDetectorOptions()
).withFaceLandmarks();
context.clearRect(0, 0, canvas.width, canvas.height);
faceapi.draw.drawDetections(canvas, detections);
faceapi.draw.drawFaceLandmarks(canvas, detections);
}, 100);
}样式调整
添加 CSS 确保画布覆盖视频：
video, canvas {
position: absolute;
top: 0;
left: 0;
}
canvas {
z-index: 10;
}注意事项
- 模型文件较大，首次加载可能需要较长时间
- 需在 HTTPS 环境或 localhost 下使用摄像头 API
- 可调整
TinyFaceDetectorOptions中的inputSize参数平衡性能与精度
扩展功能
如需表情识别或年龄检测，可加载额外模型：
await faceapi.nets.faceExpressionNet.loadFromUri('/weights');
await faceapi.nets.ageGenderNet.loadFromUri('/weights');检测时调用对应方法：
const detections = await faceapi
.detectAllFaces(video)
.withFaceExpressions()
.withAgeAndGender();
