⼀、face-api.js
Face-api.js 是⼀个 JavaScript API，是基于 tensorflow.js 核⼼ API 的⼈脸检测和⼈脸识别的浏览器实现。它实现了⼀系列的卷积神经⽹络（CNN），它实现了三种卷积神经⽹络（CNN）架构，⽤于完成⼈脸检测、识别和特征点检测任务。 ⼆、引⼊
npm i face-api.js
import {
detectSingleFace,
nets,
matchDimensions,人脸识别器
resizeResults,
draw,
SsdMobilenetv1Options,
Box,
} from 'face-api.js';gsm模块
created() {
// 指定⾯部检测器
this.options = new SsdMobilenetv1Options({
极压高温润滑脂// 最⼩置信阈值
// 默认值：0.5
minConfidence: 0.9
});
}
mounted() {
this.canvas = this.$refs["canvas"] as HTMLCanvasElement;
this.video = this.$refs["video"] as HTMLVideoElement;
this.init();
}
要加载模型，您必须提供相应的 manifest.json ⽂件以及model weight files (shards)作为资产。只需将它们复制到您的公共或资产⽂件夹。模型的 manifest.json 和 shard files 必须位于同⼀⽬录/可在同⼀路径下访问。
假设模型位于public/models：
async init(){
await nets.ssdMobilenetv1.loadFromUri('/models')
}
streams => {
//后续⽤于停⽌视频流
this.stream = streams;
//显⽰视频
if (this.video) this.video['srcObject'] = streams;
},
err => (UserMediaFail = true),
);
/** @name 调⽤摄像头 */
getUserMedia(
success: NavigatorUserMediaSuccessCallback,
error: NavigatorUserMediaErrorCallback,
) {
//优先使⽤前置摄像头（如果有的话）：{ video: { facingMode: "user" } } //强制使⽤后置摄像头：{ video: { facingMode: { exact: "environment" } } } // video: {
// width: { min: 1024, ideal: 1280, max: 1920 },
// height: { min: 776, ideal: 720, max: 1080 }
// }
//ideal（应⽤最理想的）值
const constraints = {
video: {
facingMode: 'user',
width: { ideal: this.width },
height: { ideal: this.height },
},
};
if (UserMedia) {
// 最新的标准API
.getUserMedia(constraints)
编织袋折边器.then(success)
.catch(error);
} else if (navigator.webkitGetUserMedia) {
// webkit核⼼浏览器
navigator.webkitGetUserMedia(constraints, success, error);
} else if (GetUserMedia) {
// firfox浏览器
} else if (UserMedia) {
// 旧版API
}
}
五、渲染显⽰视频流
render() {
return (
<div class="x-face-detect-modal">
<video ref="video" autoplay onCanplay={this.handleVideoCanPlay} />
{this.canPlay ? null : (
<ASpin size="large" tip="调取摄像头中..."></ASpin>
)}
{UserMediaFail ? '调取摄像头失败，请检查设备与设置' : null}
<canvas ref="canvas" width={this.width} height={this.height} />
{/* <img src={this.imgSrc} /> */}
</div>
);
}
<style lang="less" module>
.x-face-detect-modal {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
transform: rotateY(180deg);
// overflow: hidden;
canvas {
环氧树脂涂层position: absolute;
top: 0;
}
冶炼炉
video {
object-fit: fill;
}
}
</style>
注意：其中video和canvas的宽⾼保持⼀致，canvas⽤于绘制取景框或者显⽰检测到的⼈脸的盒⼦六、视频开始播放使⽤canvas绘制取景框 （1）初始化取景框
boxWidth、boxHeight：取景框盒⼦的宽⾼
videoWidth、videoHeight：视频宽⾼
通过取景框盒⼦和视频宽⾼计算出，取景框四个⾓的坐标
if (!this.video) return;
const marginLeft = (this.video.videoWidth - this.boxWidth) / 2; const marginTop = (this.video.videoHeight - this.boxHeight) / 2; if (this.canvas) {
this.canvas.width = this.video.videoWidth;
this.canvas.height = this.video.videoHeight;
}
this.viewFinderBox = {
topLeft: {
x: marginLeft,
y: marginTop
},
topRight: {
x: marginLeft + this.boxWidth,
y: marginTop
},
bottomLeft: {
x: marginLeft,
y: marginTop + this.boxHeight
},
bottomRight: {
x: marginLeft + this.boxWidth,
y: marginTop + this.boxHeight
}
};
}
（2）绘制取景框（使⽤canvas）
const context = this.canvas?.getContext("2d");
const rectWith = 50;
if (!context) return;
context.clearRect(0, 0, this.canvas?.width || 0, this.canvas?.height || 0); const fontLeft = this.video ? (this.video.videoWidth - 200) / 2 : 200;
context.font = "20px Arial";
context.fillText("请保持脸部在取景框内", fontLeft, 50);
const keys = Object.keys(this.viewFinderBox);
keys.forEach(key => {
const point = this.viewFinderBox[key];
if (!point) return;
switch (key) {
case "topLeft":
context.lineTo(point.x + rectWith, point.y);
context.lineTo(point.x, point.y + rectWith);
break;
case "topRight":
context.lineTo(point.x - rectWith, point.y);
context.lineTo(point.x, point.y + rectWith);
break;
case "bottomLeft":
context.lineTo(point.x + rectWith, point.y);
context.lineTo(point.x, point.y - rectWith);
break;
case "bottomRight":
context.lineTo(point.x - rectWith, point.y);
context.lineTo(point.x, point.y - rectWith);
break;
default:
break;
}
});
context.lineWidth = 2;
context.strokeStyle = "white";
context.stroke();
}
六、开始⼈脸检测
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议