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

notebin 发布于2019-08-22 18:35 / 765人阅读

摘要：识别出人脸后，要算宽度，要在一定的宽度才算人脸，可以裁剪出正方形发送检索人脸。

人脸签到

花了一个星期做了人脸签到的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来写些效果

服务器托管超融合服务器 three.js three.js极客 three.js教程 three.js cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96014.html

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

摘要：识别出人脸后，要算宽度，要在一定的宽度才算人脸，可以裁剪出正方形发送检索人脸。人脸签到花了一个星期做了人脸签到的demo，github地址欢迎star,在线预览大屏幕demo 先说些废话，以前做年会的抽奖，感觉好傻，现在正好在学threejs，就想做个这样的场景来抽奖的方式，又在学人脸识别的知识，就想做人脸识别签到，就想都做在浏览器中体验完整过程 1.微信扫描注册上传头像 s...

Cciradih 2019-08-05 14:21 评论0 收藏0
Web 前端中的增强现实（AR）开发技术

摘要：增强现实以下简称浪潮正滚滚而来，浏览器作为人们最唾手可得的人机交互终端，正在大力发展技术。目前年底前端要想实现，都是靠的视频透视式技术。但这两个都是移动的，于是谷歌的团队提供了和两个库，以便开发者能用技术来基于和开发，从而实现。本文作者 GeekPlux，博客地址：http://geekplux.com/2018/01/18/augmented-reality-development...

Jochen 2019-08-22 17:18 评论0 收藏0
Web 前端中的增强现实（AR）开发技术

摘要：增强现实以下简称浪潮正滚滚而来，浏览器作为人们最唾手可得的人机交互终端，正在大力发展技术。目前年底前端要想实现，都是靠的视频透视式技术。但这两个都是移动的，于是谷歌的团队提供了和两个库，以便开发者能用技术来基于和开发，从而实现。本文作者 GeekPlux，博客地址：http://geekplux.com/2018/01/18/augmented-reality-development...

fanux 2019-08-05 13:53 评论0 收藏0
前端工程师做Face Detection

摘要：身为一名前业务程序员和现前端程序员，这样的功能还是陌生的领域。需求使用加摄像头，通过人脸检测，完成自动拍照功能。在的屏幕上，显示摄像头的实时画面，要是画面中检测出人脸，则触发拍照。这样做的效果能够获得更高的，同时还能完成更远距离脸部的捕获。因为项目原因，需要使用人脸检测（face detection）功能。身为一名前JAVA业务程序员和现前端程序员，这样的功能还是陌生的领域。那能不能...

nodejh 2019-08-20 14:33 评论0 收藏0
前端人脸检测指南

摘要：的发布已经有一些时日，其主要的提供的能力是给予前端直接可用的特征检测的接口包括条形码人脸文本检测。本文将简单的对其进行介绍，对前端进行人脸检测进行普适性的讲解。 Shape Detection API 的发布已经有一些时日，其主要的提供的能力是给予前端直接可用的特征检测的接口（包括条形码、人脸、文本检测）。本文将简单的对其进行介绍，对前端进行人脸检测进行普适性的讲解。（本文不讲算法～望...

dockerclub 2019-08-22 16:43 评论0 收藏0