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

Question

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

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

1. gesture.js （我们的自定义javascript代码）
2. reveal.js （幻灯片的框架工作）

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

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

Answer 1

要在网络应用中启用手势交互，您可以使用navigator.getUserMedia（）从本地网络摄像头获取视频，定期放置视频帧数据into a canvas element，然后分析帧之间的更改。

有几个JavaScript手势库和演示可用（包括一个不错的slide controller）。对于面部/头部跟踪，您可以使用headtrackr.js等库：simpl.info/headtrackr处的示例。

Answer 2

我现在正在玩那个，从我理解的那一刻起 最基本的技术是：

1. 您要求使用用户的网络摄像头拍摄视频。
2. 授予权限时，创建一个用于放置视频的画布。
3. 您在视频中使用过滤器（黑白）。
4. 你在画布框架中放置了一些控制点（在其中注册了所有像素颜色的小区域）
5. 你开始为每一帧添加一个函数（为了解释的目的，我只展示左右手势）

每一帧：

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

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

• （**）x = DeltaN
• （**）x = Delta（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，所以相同的形状可以在移动时改变。

这是a more precise explanation。希望我的解释有所帮助。