人脸识别之基于Face-api的使用

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