发布时间:2023-02-10 22:00
Face-api的github地址:
地址一: 原Face-api地址 最后一次commit还是在两年前
地址二: 维护版本地址 “君子性非异也 善假于物也”在原有基础上不断完善
本文将基于VUE讲解face-api的使用及部分方法:
npm i --save face-api.js
npm i --save webrtc-adapter
根据项目需要加载不同的模型,不同的模型有一些区别,按需加载可提升使用性能。
await faceapi.nets[this.nets].loadFromUri("../../static/models"); // 算法模型
await faceapi.loadFaceLandmarkModel("../../static/models"); // 轮廓模型
await faceapi.loadFaceExpressionModel("../../static/models"); // 表情模型
await faceapi.loadAgeGenderModel("../../static/models"); // 年龄模型
......
ssdMobilenetv1:大小约为5.4M,精度较高
tinyFaceDetector:体积更小约为190kb,速度快、资源消耗更小,但是精度不如ssdMobilenetv1高
mtcnn:体积略大,约为2M,但是可配置空间更大,可以获取面部
使用video标签,获取当前设备摄像头信息,开启
if (typeof window.stream === "object") return;
this.timeout = setTimeout(() => {
navigator.mediaDevices
.getUserMedia(this.constraints)
.then(this.fnSuccess)
.catch(this.fnError);
}, 300);
this.videoEl.srcObject = stream;
this.videoEl.play();
根据不同的模型,执行对应的算法,并实时获取结果,如:执行单人脸识别
let result = await faceapi['detectSingleFace'](
videoEl(视频el),
this.options(识别相关配置)
).withFaceLandmarks();
成功后,会返回对应的结果,根据这个结果,可以拿到相应的脸部信息
如:人脸的68个点的坐标、获取鼻子等信息:
result.landmarks.positions()
result.landmarks.getNose()
根据是否显面部轮廓,并将结果展示在画布上
const dims = faceapi.matchDimensions(画布el, 视频el, true);
const resizeResult = faceapi.resizeResults(result, dims);
是否显示面部轮廓 ? faceapi.draw.drawDetections(画布el, resizeResult) : faceapi.draw.drawFaceLandmarks(画布el, resizeResult);
可以通过人脸坐标细分(68个点的详细坐标),去绘制自己需要的特效和功能:
下巴: 0~17,
左眉: 18~ 22,
右眉: 23~27,
鼻梁: 28 ~ 31,
鼻子:32~36,
左眼: 37~42,
右眼: 43~48,
lipOuter: 49~60,
lipInner:61~68
IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
【视频目标检测论文阅读笔记】Optimizing Video Object Detection via a Scale-Time Lattice
论文解读(KP-GNN)《How Powerful are K-hop Message Passing Graph Neural Networks》
目标检测经典论文——Fast R-CNN论文翻译(纯中文版):Fast R-CNN(微软研究院)
Spark SQL functions.scala 源码解析(三)Window functions (基于 Spark 3.3.0)