纯前端人脸识别检测

2018-04-29

最近真的好懒好懒，多久没有更新了。
回归正题，这期主要介绍下存前端下如果实现人脸的检测

前言

如果提到人脸检测，那么我们最直观的想到的解决方案是什么？

对接第三方厂商，比如国内比较出名的旷世科技以及商谈科技
底层框架的实现，比如后台语言以及APP的实现方案
基于各种识别算法实现的库

总结：压根就是没前端什么事！！！

科普

我们先不管前端到底是否无所作为，先来看看什么是人脸识别？又是如果做到人脸识别的？

人脸识别：是基于人的脸部特征信息进行身份识别的一种生物识别技术。用摄像机或摄像头采集含有人脸的图像或视频流，并自动在图像中检测和跟踪人脸，进而对检测到的人脸进行脸部的一系列相关技术，通常也叫做人像识别、面部识别。
具体实现：利用分布在人脸上从低到高80个节点或标点，通过测量眼睛、颧骨、下巴等之间的间距来进行身份认证

那么大家注意标红的2点，后面所有的检测也都是基于这2点的

1、检测基于人脸特征
2、所有的检测都是基于图像的，也就是说对于视频的检测也是基于静态图像的

前端人脸检测方案

因为图片的识别比较的消耗资源，所以一般来说，我们的处理都是放在服务器或则APP来实现，但这并不是说前端就一无所能了，现在我们就来看看前端的实现方案

一、Shape Detection API

概念

Chrome 2016年提出的图像识别算法，现在主要还是在chrome浏览器中支持，它是基于用户设备的一些基础硬件功能上创建的标准接口

效果

最上面一张为Shape Detection API的实现效果，左边为face++的实现，右边为商汤科技的实现，很明显可以看到，在某些图片的识别上Shape Detection API的识别效果更佳

图片检测实现
Shape Detection API的人脸识别算法非常的简单

1、定义

const faceDetector = new FaceDetector({
            // 速度优先
            fastMode: true,
            // 最大识别
            maxDetectedFaces: 5
        });

2、使用

async function handleDetect(image) {
    // image  为图片对象，detectedFaces中包含的人脸的位置信息以及大小
    const detectedFaces = await faceDetector.detect(image)
}

直播/视频实现
这个比图片检测会复杂些，但是最终依旧是图片的识别，大致过程如下:

其中涉及了比较多的api，不在本文讨论中，都比较基础，大家自行了解，demo在本文最后

其他
Shape Detection API 除了实现人脸检测之外还实现了二维码识别以及文字识别，基于文字识别API以及html5语音合成技术，我们可以搞出很多好玩的东西，只可以到目前为止chrome版本的文字识别依旧无法识别出来，所以使用Speech Synthesis API写了一个有意思的chrome插件，可以读出浏览器上的文字，点击获取代码链接

总结

识别率高，使用简单，效率高，就是目前浏览器支持度还不高

二、trackingjs

基于FAST和Brief算法实现的前端人脸识别库，识别率不高，仅做了解。demo
三、clmtrackr

基于CLM算法实现的前端人脸识别库，识别率不高，仅做了解。demo
四、jQuery.faceDetection

基于jquery实现的前端人脸识别库，识别率不高，仅做了解。demo
五、HAAR.js,FILTER.js,js-objectdetect

基于HAAR分类器实现的前端人脸识别库，识别率不高，仅做了解。demo
六、tensorflow.js

这个可就厉害了！tensorflow.js 是一个机器学习的前端框架，在实现方面tensorflow团队使用了WebGL库对运算过程进行了优化，使得tensorflow.js在学习尤其是网络扩大的时候能够有更好的性能表现。这个是谷歌在今年3月30日推出的，没错又是谷歌，这块是走在最前列了。具体的我好没有深入去研究过，暂时做个标记，以后可以研究下

总结

前端由于单线程以及无法访问系统底层资源的限制，使得我们在人工只能领域还处于原始的阶段，但是随着技术(web worker等)的发展，我相信前端很快会在这领域站稳脚跟，并发挥出其独特的作用