前言
过年了，来点有趣的东西
最近一直在尝试通过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里面的内容也就开始动起来了
下面就是必要重要的内容了
面部识别
我要做的是面部识别，所有怎么识别呢
- 让我自己现场实现一个（不存在的，虽然在学机器学习，但是才学了几天，还远远远远不够）
- 找开源（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级别，好像不太够
再找
yooyoo，眼睛鼻子都识别出来了，很屌嘛，就你了
那就直接搭node服务跑起来呗
然后简单花了10分钟搭了个koa2的服务
整体思路就是：
- 前端开启
video video=>canvas=>base64=>ArrayBuffer（这个库只能识别图片对象或者ArrayBuffer）websocket前后端通讯- 后端处理图片，返回
face、mouth在图片上的位置数据 - 前端渲染嘴巴位置
- 加上胡子
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
本地测试一切正常，但是部署到服务器上的时候，还是有一些问题
- 服务器安装
opencv的时候有深坑 video，只能在https下用https下的websocket得升级到wss- 静态资源访问又遇到问题，妈的
这里既然是前端文章，那么我就不张开来讲部署的问题了，
差不多就是这样思路
最后
可能是今年最后一篇，写的可能比较随意，不知道上下文连不连贯（看官们，抱歉）
然后最后的结果就如文章最开始所见：
点击这里看自己的效果（需要允许摄像头呀！！）
详细代码的话：
前后端都在这里了： face-decorator
