继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

人脸实时签到(three.js+tracking.js)基于浏览器前端

少年时光
关注TA
已关注
手记 1
粉丝 9
获赞 38

人脸签到

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


先说些废话,以前做年会的抽奖,感觉好傻,现在正好在学threejs,就想做个这样的场景来抽奖的方式,又在学人脸识别的知识,就想做人脸识别签到,就想都做在浏览器中


体验完整过程

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

    5b3de39e0001e07102800280.jpg


  1. 手机浏览器打开人脸识别(ios11支持,微信浏览器不支持)

    5b3de39f0001b61f02800280.jpg

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来写些效果



打开App,阅读手记
10人推荐
发表评论
随时随地看视频慕课网APP

热门评论

优秀

查看全部评论