为手势控制的网站生成事件 [英] Generating events for gesture-controlled websites

问题描述

我很高兴我有机会在一个基于手势的网站上工作。
我对此有一些启发：链接

I am very happy that I got the opportunity to work on a website that is gesture-based. I have a few inspiration for this: link

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

I visited lot of websites and googled it, Wikipedia and gitHub also didn't help much. There is not much information provided as these technologies are in nascent stages. I think I will have to use some js for this project

1. gesture.js （我们的自定义javascript代码）


2. reveal.js （幻灯片展示框架）

1. gesture.js (our custom javascript code)
2. reveal.js (Frame work for slideshow)

我的问题是手势如何产生事件，我的JavaScript如何与我的网络摄像头互动？我是否必须使用某些API或算法？

我不是要求代码。我只是问机制，或者提供重要信息的一些链接。我认真地相信，如果能够提高这项技术的准确性，这项技术可以在不久的将来创造奇迹。

I am not asking for code. I am just asking the mechanism, or some links providing vital info will do. I seriously believe that if the accuracy on this technology can be improved, this technology can do wonders in the near future.

推荐答案

我我现在正在玩那个，所以，根据我的理解，
最基本的技巧是：

I'm playing a little bit with that at the moment so, from what I understood the most basic technique is:

1. 你请求使用用户的网络摄像头拍摄视频。


2. 获得许可时，创建一个用于放置视频的画布。


3. 您使用视频上的过滤器（黑白）。


4. 你在画布框架中放置了一些控制点（一个小区域，其中所有像素颜色都已注册）


5. 你开始为每一帧添加一个函数（为了解释的目的，我只展示左右手势）

1. you request to use the user's webcam to take a video.
2. when permission is given, create a canvas in which to put the video.
3. you use a filter (black and white) on the video.
4. you put some control points in the canvas frame (a small area in where all the pixel colors in it are registered)
5. you start attaching a function for each frame (for the purpose of the explanation, I'll only demonstrate left-right gestures)

每一帧：

• 如果框架是第一个（F0）继续


• 如果不是：我们从前一个$ b中减去当前帧的像素（Fn） $ b
  
  
  • 如果Fn和F之间没有移动（n-1）所有像素都是黑色
  
  
  • 如果有，你会看到区别Delta = Fn - F（n-1）为白色像素
  
  

  重复相同的操作直到你有两个或更多的Deltas变量然后从控制点Delta（n-1）中减去控制点DeltaN，你将得到一个向量

  Repeat the same operations until you have two or more Deltas variables and you subtract the control points DeltaN from the control points Delta(n-1) and you'll have a vector

  
  
  • （**） x = DeltaN
  
  
  • （**）x = Delta（N-1）
  
  
  • （+2）x = DeltaN - Delta（N-1） ）
  
  

  您现在可以测试矢量是正面还是负面，或测试值是否优于您选择的值

  You can now test if the vector is either positive or negative, or test if the values are superior to some value of your choosing

  if positive on x and value > 5
  

  并触发一个事件，然后听取它：

  and trigger an event, then listen to it:

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

  您可以通过缓存向量或添加向量来大大提高精度，并仅在向量值变为时触发事件一个明智的价值。

  You can greatly improve the precision by caching the vectors or adding them and only trigger an event when the vector values becomes a sensible value.

  您还可以在第一次减法时看到一个形状并尝试映射手或盒子
  并听取更改形状的坐标，但请记住手势是3D，分析是2D，因此相同的形状可以在移动时改变。

  You can also expect a shape on your first subtractions and try to map a "hand" or a "box" and listen to the changes of the shape's coordinates, but remember the gestures are in 3D and the analysis is 2D so the same shape can change while moving.

  这是更精确的解释。希望我的解释有所帮助。

  Here's a more precise explanation. Hope my explanation helped.

  这篇关于为手势控制的网站生成事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！