基于 Vue 3 的人脸识别与活体检测实现
在现代前端开发中，人脸识别技术逐渐被加入到各种应用场景中，如身份验证、社交应用等。通过使用 JavaScript 库，我们可以在浏览器中实现这一功能。本文将介绍如何使用 Vue 3 搭配 tracking.js, face.js, 和 face-api.js 来实现简单的人脸识别及活体检测（例如：张嘴动作）。
准备工作
首先，你需要在项目中安装相关的库。可以通过 npm 或者直接在 HTML 中引入。
npm install @tensorflow/tfjs @tensorflow-models/face-landmarks-detection face-api.js tracking
创建 Vue 3 项目
使用 Vue CLI 创建一个新的 Vue 3 项目：
vue create face-detection-app
cd face-detection-app
导入库
在你的 Vue 组件中导入需要的库。
<script>
import * as faceapi from 'face-api.js';
import tracking from 'tracking';
export default {
name: 'FaceDetection'
}
</script>
设定组件
以下是一个简单的 Vue 组件，可以用于实时展示视频和检测人脸。
<template>
<div>
<video id="video" width="640" height="480" autoplay></video>
<canvas id="overlay"></canvas>
</div>
</template>
<script>
import * as faceapi from 'face-api.js';
export default {
name: 'FaceDetection',
mounted() {
this.startVideo();
this.loadModels();
},
methods: {
async loadModels() {
const MODEL_URL = '/models'; // 替换为你的模型路径
await faceapi.nets.ssdMobilenetv1.loadFromUri(MODEL_URL);
await faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL);
await faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL);
console.log("模型加载完成");
},
startVideo() {
navigator.mediaDevices.getUserMedia({ video: {} })
.then(stream => {
const video = document.getElementById('video');
video.srcObject = stream;
video.play();
this.detectFace();
})
.catch(err => console.error("获取视频流错误:", err));
},
async detectFace() {
const video = document.getElementById('video');
const canvas = document.getElementById('overlay');
faceapi.matchDimensions(canvas, { width: video.width, height: video.height });
setInterval(async () => {
const detections = await faceapi.detectAllFaces(video)
.withFaceLandmarks()
.withFaceDescriptors();
const resizedDetections = faceapi.resizeResults(detections, { width: video.width, height: video.height });
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
faceapi.draw.drawDetections(canvas, resizedDetections);
faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
// 简单的活体检测示例
this.checkMouthOpen(resizedDetections);
}, 100);
},
checkMouthOpen(detections) {
if (detections.length > 0) {
const landmarks = detections[0].landmarks.positions;
const mouthTop = landmarks[62]; // 嘴唇顶部点
const mouthBottom = landmarks[66]; // 嘴唇底部点
const distance = mouthBottom.y - mouthTop.y;
if (distance > 10) { // 梯度值可调
console.log("张嘴中...");
}
}
}
}
}
</script>
<style>
#overlay {
position: absolute;
top: 0;
left: 0;
}
</style>
说明
- 视频流获取：使用
navigator.mediaDevices.getUserMedia来获取用户的摄像头视频流。 - 模型加载：使用
face-api.js加载人脸检测和姿势识别模型。 - 人脸检测与实时绘制：
detectFace方法中调用detectAllFaces进行人脸检测，并在画布上描绘出人脸和关键点。 - 活体检测简单实现：通过监测嘴巴上下点的距离来判断是否张嘴。
总结
通过上述方式，我们实现了一个基本的前端人脸识别系统，能够检测人脸并进行简单的活体检测。当然，在真实应用中，你可能需要对模型进行微调，增加更多的活体检测策略，以提高准确性和安全性。希望这篇文章能对你有所帮助，欢迎大家继续探索人脸识别的更多可能性！
