Face-api的github地址:
地址一: 原Face-api地址 最后一次commit还是在两年前
地址二: 维护版本地址 “君子性非异也 善假于物也”在原有基础上不断完善

本文将基于VUE讲解face-api的使用及部分方法:

一、使用

1、安装必要的插件

npm i --save face-api.js 
npm i --save webrtc-adapter

2、加载需要的 models,如算法模型、轮廓模型、表情模型、年龄等

根据项目需要加载不同的模型,不同的模型有一些区别,按需加载可提升使用性能。

await faceapi.nets[this.nets].loadFromUri("../../static/models"); // 算法模型
await faceapi.loadFaceLandmarkModel("../../static/models"); // 轮廓模型
await faceapi.loadFaceExpressionModel("../../static/models"); // 表情模型
await faceapi.loadAgeGenderModel("../../static/models"); // 年龄模型
......

3、算法模型区别

ssdMobilenetv1:大小约为5.4M,精度较高
tinyFaceDetector:体积更小约为190kb,速度快、资源消耗更小,但是精度不如ssdMobilenetv1高
mtcnn:体积略大,约为2M,但是可配置空间更大,可以获取面部

二、开启 webcam

使用video标签,获取当前设备摄像头信息,开启

if (typeof window.stream === "object") return;
  this.timeout = setTimeout(() => {
    navigator.mediaDevices
      .getUserMedia(this.constraints)
      .then(this.fnSuccess)
      .catch(this.fnError);
  }, 300);

三、把 webcam 源放入 video 做显示

this.videoEl.srcObject = stream;
this.videoEl.play();

四、通过 faceapi 扫描 video

根据不同的模型,执行对应的算法,并实时获取结果,如:执行单人脸识别

let result = await faceapi['detectSingleFace'](
        videoEl(视频el),
        this.options(识别相关配置)
      ).withFaceLandmarks();

成功后,会返回对应的结果,根据这个结果,可以拿到相应的脸部信息
如:人脸的68个点的坐标、获取鼻子等信息:

result.landmarks.positions()
result.landmarks.getNose()

五、渲染 canvas 画布

根据是否显面部轮廓,并将结果展示在画布上

const dims = faceapi.matchDimensions(画布el, 视频el, true);
const resizeResult = faceapi.resizeResults(result, dims);
是否显示面部轮廓 ? faceapi.draw.drawDetections(画布el, resizeResult) : faceapi.draw.drawFaceLandmarks(画布el, resizeResult);

六、通过 faceapi draw 人脸位置, 轮廓, 表情

可以通过人脸坐标细分(68个点的详细坐标),去绘制自己需要的特效和功能:
下巴: 0~17,
左眉: 18~ 22,
右眉: 23~27,
鼻梁: 28 ~ 31,
鼻子:32~36,
左眼: 37~42,
右眼: 43~48,
lipOuter: 49~60,
lipInner:61~68

Logo

前往低代码交流专区

更多推荐