前端人脸识别解决方案

最近业务功能需求开发中Web端需要接入人脸识别，于是做了技术预演

1.第三方解决方案

现有的云服务商解决方案：

市场还有很多类似的解决方案，这里不一一列举，下面是某云服务商的报价

Web API中有个MediaDevices.getUserMedia()的方法，调用后会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道。

旷世 - 人脸识别 face++[1] 腾讯云神图 - 人脸识别[2] 阿里云 - 人脸识别[3] 云服务商的方案更全面，不单单只支持人脸识别，还包括比如 五官定位 人脸对比、搜索等等 人脸核身（身边场景最多） 开发一个完整的人脸识别模块具体需要哪些步骤？ 主要有以下几个环节👇： 1 调起摄像头，获取摄像头的视频流数据 2 使用人脸识别库（下文讲解）识别视频流数据中的人脸数据，通过算法定位人脸 3 当捕获到人脸数据，则报错捕获状态下的视频流当前帧，用canvas绘制图像 4 将绘制的图片转为base64格式 以上就是完成人脸识别所需的步骤，如果你想在这个基础上，做人脸比对或者身份证校验等拓展功能，可以借助用户的身份证、姓名等信息，再结合第三方的AI服务，比如腾讯云的人脸核身[4]来完成，本质上底层数据支持来自公安的实名认证接口

上面是实例代码，注意定义好异常情况处理

详细参考文档：MediaDevices.getUserMedia() - Web API | MDN[5]

接下来我们来聊一聊本文的重点：人脸识别库～

2.开源库

2.1 Tracking.js

❝ 介绍：Tracking.js 库给浏览器带来不同的计算机视觉算法和技术，通过使用流行的 HTML5 规范可以让你实时的对网页进行颜色跟踪、人脸识别等等,体积也很小 官网链接[6] ❞

tracking.js是比较年限比较老的库，本质上是通过检测并捕获人脸（物体）的信息，最终触发JavaScript事件，并对人脸进行采集

我们是如何用Tracking.js捕获人脸的？看下图代码👇 (需注意：需等video的元数据加载后再触发，也就是video的onloadedmetadata事件)

拓展阅读：

Github - tracking.js[7]

2.2 Face-api.js

❝ 介绍：Face-api.js 本质上是一个建立在Tensorflow.js内核上的 javascript API，它实现了三种卷积神经网络架构，用于完成人脸检测、识别和特征的检查，可以在浏览器中进行人脸识别。官网链接[8]

Face-api.js vs Tracking.js 对比优势在于：前者在性能和准确度都表现更佳

❝ 啊乐同学：树酱，这个Tensorflow.js是什么？ ❞

我们来看看实际中使用的核心代码的实现👇（递归识别）

如果你想在vue中使用可以参考这个完整的Github Demo: face-api-demo-vue[9]

3.最后

❝ ❞

Reference

[1] 旷世 - 人脸识别 face++:https://www.faceplusplus.com.cn/face-detection/ [2] 腾讯云神图 - 人脸识别:https://cloud.tencent.com/product/facerecognition [3] 阿里云 - 人脸识别:https://ai.aliyun.com/face [4] 人脸核身:https://cloud.tencent.com/document/product/1007/31816 [5] MediaDevices.getUserMedia() - Web API | MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia [6] 官网链接:https://trackingjs.com/ [7] Github - tracking.js:https://github.com/eduardolundgren/tracking.js/ [8] 官网链接:https://justadudewhohacks.github.io/face-api.js/docs/index.html [9] face-api-demo-vue:https://github.com/TsMask/face-api-demo-vue