人脸签到
花了一个星期做了人脸签到的demo,github地址欢迎star,在线预览大屏幕demo
先说些废话,以前做年会的抽奖,感觉好傻,现在正好在学threejs,就想做个这样的场景来抽奖的方式,又在学人脸识别的知识,就想做人脸识别签到,就想都做在浏览器中
体验完整过程
- 1.微信扫描注册上传头像
- 手机浏览器打开人脸识别(ios11支持,微信浏览器不支持)
- 3.电脑打开大屏幕 地址
大屏幕可以同步显示刚刚的人脸
分享下制作过程
1.人脸识别
需要调用摄像头,实时显示有人脸,可以用node或者python调用opencv之类的,但是这是后端的应用,可以用树莓派做个装置,但是是浏览器识别,所以用tracking.js(已经好几年没有更新了,要识别其他的模型的话,可以python训练出来模型)。识别出人脸后,要算宽度,要在一定的宽度才算人脸,可以裁剪出正方形发送检索人脸。
2.人脸检索
人脸检索采用的是腾讯云的智能图像的api,需要创建个人信息,需要一个唯一的id(用的是微信的openid),一个人脸可以添加20张相似度低于99%的图片,一个组织可以有2w个人,肯定够用的,接口费用很便宜,月调去量是一万次免费
3.上传个人信息
获取微信openid,将照片上传到服务器保存,并添加到腾讯云的脸库中
4.threejs场景
- 添加一个天空盒
- 计算球(原实例用的CSS3render,需要改成webglrender)
- L形状 四个需要写顶点连接
- 动画效果 用anime.JS,感觉好用,为什么不用tween,因为自己刚刚学会的,所以想试一试
- 出现了人脸,需要将人脸飞到球的方块中,需要用到坐标转换,还有四元数,才能紧贴着
- 空闲没有人脸,会一直播放随机图片动画,有人脸了会动画结束后播放
5.socket通信
用socket.io通信,实时识别到人脸后,将人脸图及时发送到大屏幕
6.ssl
因为用摄像头识别需要ssl证书,他的请求都需要ssl,所以服务都要使用ssl证书,nginx或者apache需要配置https,并且将端口转发,配置node服务以及socket服务的https
未完成tasks
- 会修改人脸飞入的动画,需要有个中间点过度
- 增加粒子的动画,任意选个图片添加爆炸成图片的效果
- 用写shader来写些效果