前言
过年了,来点有趣的东西
最近一直在尝试通过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