为手势控制的网站生成事件

Generating events for gesture-controlled websites

本文关键字：事件 网站 控制      更新时间：2023-09-26

我很高兴有机会在一个基于手势的网站上工作。我对此有一些灵感:link

我访问了很多网站，用谷歌搜索，维基百科和gitHub也没有多大帮助。由于这些技术尚处于初级阶段，因此提供的信息不多。我想我将不得不使用一些js为这个项目

  1. gesture.js(自定义javascript代码)
  2. reveal.js (Frame for slideshow)

我的问题是如何手势生成事件，我的JavaScript如何与我的摄像头交互?我必须使用一些API或算法吗?

我不是在要求代码。我只是问的机制，或一些链接提供重要的信息将做。我真的相信，如果这项技术的精度可以提高，这项技术可以在不久的将来创造奇迹。

要在web应用中启用手势交互，你可以使用navigator.getUserMedia()从本地网络摄像头获取视频，定期将视频帧数据放入画布元素中，然后分析帧之间的变化。

有几个JavaScript手势库和演示可用(包括一个不错的幻灯片控制器)。对于面部/头部跟踪，你可以使用headtracker .js: example at simpl.info/headtrackr这样的库。

我现在正在玩一点，所以，从我的理解最基本的技巧是:

  1. 您请求使用用户的网络摄像头拍摄视频。
  2. 当获得许可时，创建一个画布来放置视频。
  3. 你在视频上使用滤镜(黑白)。
  4. 你在画布框架中放置一些控制点(一个小区域，其中所有的像素颜色都被注册)
  5. 开始为每一帧附加一个函数(为了解释的目的，我将只演示左右手势)

每一帧:

  • 如果帧是第一帧(F0)继续
  • 如果不是:我们从前一帧中减去当前帧的像素(Fn)
    • 如果在Fn和F(n-1)之间没有移动，则所有像素将为黑色
    • 如果有的话，你会看到Delta = Fn - F(n-1)作为白色像素的差异
  • 然后你可以测试你的控制点，哪些区域被点亮并存储它们(**)x = DeltaN

重复同样的操作，直到你有两个或更多的δ变量，你从控制点δ (n-1)减去控制点δ tan，你会得到一个向量

  • (**)x = DeltaN
  • (**)x = δ (N-1)
  • (+2)x = DeltaN - Delta(N-1)

你现在可以测试向量是正的还是负的，或者测试这些值是否优于你选择的某个值

if positive on x and value > 5

并触发一个事件，然后监听它:

$(document).trigger('MyPlugin/MoveLeft', values)
$(document).on('MyPlugin/MoveLeft', doSomething)

可以通过缓存或添加向量来极大地提高精度，并且只在向量值变为合理值时触发事件。

你也可以期待在你的第一个减法中得到一个形状，并尝试映射一个"手"或"盒子"并听取形状坐标的变化，但要记住手势是3D的，而分析是2D的，所以相同的形状可以在移动时改变。

这里有一个更精确的解释。希望我的解释对你有所帮助。

相关文章：