摘要:本文主要向大家介绍了机器人之人脸实时签到(three.js+tracking.js)基于浏览器前端,通过具体的内容向大家展现,希望对大家学习机器人有所帮助。
本文主要向大家介绍了机器人之人脸实时签到(three.js+tracking.js)基于浏览器前端,通过具体的内容向大家展现,希望对大家学习机器人有所帮助。
人脸签到
花了一个星期做了人脸签到的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来写些效果
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标人工智能智能机器人频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号