阅读 2757

前端简单面部识别

前言

过年了,来点有趣的东西

最近一直在尝试通过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的内容,然后drawImagecanvas就好了

    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,不支持moutheyenose级别)

mdzz

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

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

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

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

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

node 识别 opencv

那么就看opencvnode有什么好的实现了

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

参考链接/推荐阅读

关注下面的标签,发现更多相似文章
评论

查看更多 >