前端简单面部识别

前言

过年了，来点有趣的东西

最近一直在尝试通过web如何DIY视频，怎么捕捉视频的行为，给视频加点好玩的东西,比如给视频加一个胡子？

以下记录一下最近的玩具

---

live demo

点击这里看自己的效果（需要允许摄像头呀！！）

效果

效果大概如下:
就是给视频的脸上加个胡子（我手机上有防蓝光的膜，各位大爷将就着看吧）

思路

首先我做的视频动态绘制胡子的东西，那肯定要先支持视频吧

支持视频

这里代码就非常简单，新建一个html，写上一个video标签

navigator.getUserMedia =
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia

if (navigator.getUserMedia) {
    navigator.getUserMedia(
        { video: { width: 500, height: 500 } },
        function (stream) {
            var video = document.querySelector('video')
            video.srcObject = stream
            video.onloadedmetadata = function (e) {
                video.play()
            }
        },
        function (err) {
            console.log('The following error occurred: ' + err.name)
        }
    )
} else {
    console.log('getUserMedia not supported')
}

写到这里视频就可以播放了

然后我们把这个视频放进canvas里,

其实就是定时采集video的内容，然后drawImage到canvas就好了

    setInterval(() => {
      v.drawImage(video, 0, 0, 500, 375)
      vData = v.getImageData(0, 0, 500, 375)    
    }, 20) 

这里开始canvas里面的内容也就开始动起来了

下面就是必要重要的内容了

面部识别

我要做的是面部识别，所有怎么识别呢

1. 让我自己现场实现一个（不存在的，虽然在学机器学习，但是才学了几天，还远远远远不够）
2. 找开源（bingo，就是你了）

开源面部识别 trackingjs

然后就是找到了一个这个 trackingjs

看了一下效果，非常好，虽然有点慢，但是满足我们的功能

face(image)-demo
face(camera)-demo

好，那么先在本地跑个demo试试

......然后5min过去了

且慢，好像这个识别不能识别camera的内容（camera只支持到face，不支持mouth、eye、nose级别）

mdzz

ps: 如果只是简单加个帽子之类的东西的话，用这个库也就够了

下面几天我基本上就卡在这个环节几天都没有什么好的思路

直到某天，我随便刷的时候看到了这个实现face-detection-node-opencv

咦，她也实现了面部识别，好像这个人再trackingjs的contributor里面见过，然后她用到了opencv，记得在今年d2的大会上主会场某几个嘉宾也分享了ar主题的东西，也是用服务器来实现的(就是canvas的getImageData后把数据传给后端，后端处理完再把结果返回)，当时我以为效率会很差（在图片传输方面），其实看下来好像效果还可以

好，接下里就配上后端来写，似乎功能会多很多。那么接下来就像武器大师说的：开打开打

node 识别 opencv

那么就看opencv的node有什么好的实现了

then，node-opencv，这个可以识别到face级别，好像不太够

再找

faced

yooyoo，眼睛鼻子都识别出来了，很屌嘛，就你了

那就直接搭node服务跑起来呗

然后简单花了10分钟搭了个koa2的服务

整体思路就是：

1. 前端开启video
2. video => canvas => base64 => ArrayBuffer（这个库只能识别图片对象或者ArrayBuffer）
3. websocket前后端通讯
4. 后端处理图片，返回face、mouth在图片上的位置数据
5. 前端渲染嘴巴位置
6. 加上胡子

done

下面是 后端处理图片的时间，平均大概5ms，当做玩具的话，勉强够

start: 4.568ms
start: 3.881ms
start: 3.564ms
start: 3.690ms
start: 5.971ms
start: 4.069ms
start: 3.364ms
start: 5.054ms
start: 22.219ms
start: 5.586ms
start: 5.000ms

本地测试一切正常，但是部署到服务器上的时候，还是有一些问题

1. 服务器安装opencv的时候有深坑
2. video，只能在https下用
3. https 下的websocket 得升级到 wss
4. 静态资源访问又遇到问题，妈的

这里既然是前端文章，那么我就不张开来讲部署的问题了，

差不多就是这样思路

---

最后

可能是今年最后一篇，写的可能比较随意，不知道上下文连不连贯（看官们，抱歉）

然后最后的结果就如文章最开始所见：

点击这里看自己的效果（需要允许摄像头呀！！）

详细代码的话：

前后端都在这里了： face-decorator

参考链接/推荐阅读

• 咦？浏览器都能做人脸检测了？
• 前端工程师做Face Detection
• faced
• node-opencv
• HTML5-Face-Detection