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

Posted jlfw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了人脸实时签到(three.js+tracking.js)基于浏览器相关的知识,希望对你有一定的参考价值。

人脸签到

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


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


体验完整过程

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

技术图片

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

本文转载于猿2048:人脸实时签到(three.js+tracking.js)基于浏览器

以上是关于人脸实时签到(three.js+tracking.js)基于浏览器的主要内容,如果未能解决你的问题,请参考以下文章

转《trackingjs人脸检测》

AR人脸识别 Three

Android课程设计 人脸识别签到

JavaScript人脸检测的实现方法

Python+OpenCV 轻松实现人脸识别签到考勤系统

Python人脸识别签到考勤系统