当前位置:首页 > 技术文章 > 正文内容

HTML5+眼球追踪?黑科技颠覆传统手机体验

zonemu3个月前 (07-09)技术文章61

今天,iH5工具推出一个新的神秘功能——眼动追踪,可以通过摄像头捕捉观众眼球活动!

为了给大家具体演示该功能的使用,我做了一个案例,供大家参考。

实际效果如下:

案例比较简单,就是通过眼动功能获取视觉焦点位置,剔除用户看中的牌。现在,舞台的属性中多了一个“启用眼动”的选项,另外,还多了一个“启用摄像头”的事件。

具体实现如下:

1、素材准备:随机六张扑克牌、背景是牌桌

2、核心事件和逻辑:

舞台 属性中“启用眼动”设置“Yes”

舞台 添加事件(初始化时“启用摄像头”)

确定按钮 添加事件(轻触时获取视觉焦点X/Y,分别赋值给变量x和变量y)

3、最后通过判断x和y的数值范围就能知道用户看的是哪张牌啦

以上就是iH5最新眼动功能的使用方法,是不是有种地球人已经无法阻止iH5的感觉,赶快喊小伙伴试试吧!!!

http://fce6896351ab.ih5.cn/idea/SUKM3VV

(温馨提示:注意看评论!!!)

相关文章

Vue3 中,父子组件如何传递参数?(vue父子组件传递数据方法)

在 Vue3 中,组件化开发是非常重要的特征,那么组件之间传值就是开发中常见的需求了。组件之间的传值三种方式:父传子、子传父、非父子组件传值。一、父传子( defineProps )父组件主要通过使用...

学习ES6- 入门Vue(大量源代码及笔记,带你起飞)

ES6学习网站: https://es6.ruanyifeng.com/箭头函数普通函数//普通函数 this 指向调用时所在的对象(可变) let fn = function fn(a, b) {...

前端React面试基础系列(React基础篇)

本文阅读8分钟,喜欢的小伙伴可以持续关系小编哦1. 什么是受控组件和非受控组件?受控组件像表单元素在用户输入时,像<input> <select>等元素需要绑定一个 chang...

vue 3 学习笔记 (八)——provide 和 inject 用法及原理

在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传...

java调用API操作GitLab(java调用zabbix api)

最近需要在一个WEB项目中集成GitLab,用到了GitLab的API操作,在网上找了很久都是说直接调用GitLab的Http接口,而且API官方只有javadoc没有其它说明文档,特别记录下,以备查...

高效使用 Vim 编辑器的 10 个技巧

在 Reverb,我们使用 MacVim 来标准化开发环境,使配对更容易,并提高效率。当我开始使用 Reverb 时,我以前从未使用过 Vim。我花了几个星期才开始感到舒服,但如果没有这样的提示,可能...