人脸实时签到（three.js+tracking.js）基于浏览器

人脸签到

花了一个星期作了人脸签到的demo，github地址欢迎star,在线预览大屏幕demo

---

先说些废话，之前作年会的抽奖，感受好傻，如今正好在学threejs，就想作个这样的场景来抽奖的方式，又在学人脸识别的知识，就想作人脸识别签到，就想都作在浏览器中

---

体验完整过程

• 1.微信扫描注册上传头像

• 2. 手机浏览器打开人脸识别（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来写些效果