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

最新推荐文章于 2022-09-03 20:50:27 发布
置顶 最新推荐文章于 2022-09-03 20:50:27 发布
阅读量2.4k 收藏 6
点赞数
分类专栏： 前端 文章标签： three.js tracking.js socket 人脸 anime.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39538270/article/details/80929129
版权
本文介绍了一种基于浏览器的人脸实时签到系统，利用three.js和tracking.js进行人脸识别，通过socket通信实现大屏幕同步显示。用户通过微信扫描注册并上传头像，系统在识别到人脸后，将其匹配到腾讯云人脸库。同时，文章提到了项目中涉及的three.js场景构建、动画效果、SSL配置以及未来改进计划。
摘要由CSDN通过智能技术生成

人脸签到

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

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

最低0.47元/天 解锁文章
Necis
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
3D微信墙签到
07-05 4605
1.首先的后台页面如下：2.当点击微信墙的时候，进入下个页面：当扫二维码时候，微信的个人信息会在左边显示出来：
html5酷炫的3D签到墙动画特效
12-20
预览地址：https://www.17sucai.com/pins/26503.html 采用three.js之前元素周期表改过来的，把元素改成了图片、增加了用户签到提示效果。缺点：图片数量多，会导致浏览器奔溃、代码体积有点大，仅供参考。
3D 签到墙 ThreeJS动画
11-05
原资源链接：http://www.jq22.com/jquery-info16193，可以在线演示查看
人脸实时签到（three.js+tracking.js）基于浏览器
weixin_34066347的博客
07-05 925
人脸签到 花了一个星期做了人脸签到的demo，github地址欢迎star,在线预览大屏幕demo 先说些废话，以前做年会的抽奖，感觉好傻，现在正好在学threejs，就想做个这样的场景来抽奖的方式，又在学人脸识别的知识，就想做人脸识别签到，就想都做在浏览器中 体验完整过程 1.微信扫描注册上传头像 手机浏览器打开人脸识别（ios11支持，微信浏览器不支持） 3.电脑打开大屏幕 ...
一个简单炫酷的前端小项目（html+css+js）----3D图片演示
热门推荐
hsingle的博客
04-14 1万+
一个简单炫酷的前端小项目（html+css+js）----3D图片演示前言一、页面动画视频展示二、使用步骤1.引入库2.读入数据总结新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 提示：文章写完后，目录可以自动生成，如何
Vue+tracking.js 实现前端人脸检测功能
10-15
tracking.js 是一个JavaScript计算机视觉库，它包含了多种图像处理和模式识别模块，如人脸检测。在前端实现人脸检测功能，tracking.js 提供了一个简单易用的API来检测视频流中的人脸。 项目实现的流程如下： 1. **...
quantum-face-register:使用Three.js和Tracking.js进行人脸注册
05-08
人脸签到（trakcing.js+three.js+anime.js）微信注册：手机浏览器打开人脸识别（iphone需要ios11，微信不支持）：电脑打开：掘金文章项目说明##目录结构├── .gitignore //git忽略文件├── README.md //项目说明...
基于HTML5+tracking.js实现刷脸支付功能
11-21
本篇文章将详细讲解如何利用HTML5和tracking.js库来实现实时的人脸识别和刷脸支付功能。 首先，我们需要获取用户的摄像头权限。在HTML5中，可以通过两种方式实现：一是使用`*"/>`，这会让用户选择开启摄像头进行...
基于Three.js和MindAR实现的网页端人脸识别功能和仿抖音猫脸特效的各种面罩实现源码
03-17
这里基于mind-ar-js-master\examples\face-tracking\example1.html案例修改而来，主要是将部分托管在cdn服务器的脚本库进行了本地化关联（解决加载太慢的问题）和然后UI上新增了各个面部贴图的小图按钮，通过点击...
html5 微信签到墙,3D签到墙 webgl示例源码(three.js)
weixin_30957757的博客
06-04 1883
【实例简介】【实例截图】【核心代码】three.js css3d - periodic tablehtml, body {height: 100%;}body {background-color: #000000;margin: 0;font-family: Helvetica, sans-serif;;overflow: hidden;}a {color: #ffffff;}#info {pos...
3D 签到墙 年会 Three.js
09-27
非常实用且好用3d年会签到墙源码，可以轻松实现年会大气效果
基于threejs实现室内模型的动态装载源码(智慧楼宇).zip
11-20
1,智慧楼宇楼层设施动态装载 2,基于threejs分步加载减少初始化压力。
html5 3d 签到墙,GO互动首创年会自定义动态主题背景签到墙，活动策划人必备！...
weixin_36377930的博客
06-19 521
一场会议活动最开始的的视觉焦点都聚集在活动主题展示上，因为它能够清晰地表明活动的活动目的和内容。而在会议活动刚开始的签到过程中，却往往会忽视这一点。这次GO互动将签到墙全新升级，不仅将活动主题背景与签到完美结合，而且使用独家引擎打造海量动态背景素材库，主办方可以在素材库中任意选择。当然动态背景中的主题文字也可以修改，主办方只要提交活动主题文字、样式、字体、大小等需求，GO互动就会派专人进入制作云编...
tree.js 酷炫的效果，人脸识别签到思路，html5 3D微信头像自动抽奖代码
hangGe0111的博客
04-04 2755
1.酷炫效果 1.1 网址：https://wow.techbrood.com/fiddle/43962 网址：https://wow.techbrood.com/fiddle/25678 1.2网址：https://www.techbrood.com/?q=three+%E6%97%8B%E8%BD%AC 这个网站，有一些效果，会有一些实现的思路效果，可以关注着看一下 2...
AR人脸识别 Three.js + tensorflow.js（一）
qq_39503511的博客
10-30 5190
AR人脸识别 Three.js + tensorflow.js（一）概述tensorflow.js介绍项目搭建初始化摄像头初始化three.js 概述 这一期来使用Three.js和tensorflow.js来完成一个AR人脸识别的项目，主要使用的前端框架为Vue，项目中主要的功能点有可以实现人脸替换，在摄像头检测检测到人脸后会将人脸替换成一个预先准备好的人脸模型，然后我们人脸移动和变化的时候模型会跟随移动和变化，在模型上我们可以画线，画logo, 可以自由作图，然后还具备返回上一步和删除的功能 先来看一下
前端人脸识别框架tracking.js，解决ios浏览器调摄像头黑屏的问题，兼容pc、安卓、ios。
周气气的博客
05-26 7725
总结两版人脸识别的心路历程。主要是开发中遇到的问题。 需求：实现pc端、webapp人脸拍照打卡的功能。 第一版，使用flash+JqueryFaceDetection.js 。 因为项目最初是http协议，使用getUserMedia需要https协议，所以pc端使用flash调摄像头。也没有要求真正的人脸识别，就用facedetection检测是否为人脸，但并不能保证是否为本人。 方案：使用jquery.webcam.min.js，调取摄像头拍照，使用facedetection检测照片中是否..
IOS中使用getUserMedia获取视频流展示到video中，进行人脸识别
ᴴᴱᴸᴸᴼ
01-20 1505
IOS中使用getUserMedia获取视频流展示到video中，进行人脸识别在Safari浏览器中，能看到相机授权，也能看到录像标识但是vedio组件获取不到视频流显示出来，如下图请问大佬们有知道解决方法的吗~ 在Safari浏览器中，能看到相机授权，也能看到录像标识但是vedio组件获取不到视频流显示出来，如下图 请问大佬们有知道解决方法的吗~ html代码 <div v-show="showContainer" class="face-capture" id="face-cap
【tracking.js】前端人脸识别框架 tracking.js 活体检测/拍照在 vue2 的使用
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
07-11 4147
Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件(足够使用了)。 做项目要用到活体检测和拍照的 实现效果 活体检测组件 包需到下载 tracking-min.js ...
vue项目中使用trackingjs人脸识别
CH_Y的博客
09-03 6720
新需求要做一个前端人脸登录，最终选用了trackingjs库实现识别的前端部分，在前端进行识数据采集，并把信息保存后发送给后端进行处理。就差个和后端传数据的接口，图片信息打印在日志中。
tracking.js在安卓能用吗
最新发布
10-22
tracking.js是一个基于JavaScript的电脑视觉库，用于实时在浏览器中进行人脸检测、追踪和分析。从理论上讲，tracking.js可以在安卓平台上运行。然而，实际上在安卓设备上使用tracking.js需要考虑一些因素。 首先，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值