5

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

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

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

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

我不是要代码。我只是在询问机制，或者一些提供重要信息的链接就可以了。我非常相信，如果这项技术的准确性可以提高，这项技术在不久的将来会创造奇迹。

4

2 回答 2

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 的，所以相同的形状可以移动时改变。

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

于 2013-06-17T11:28:49.830 回答
2

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

有几个 JavaScript 手势库和演示可用（包括一个不错的滑动控制器）。对于面部/头部跟踪，您可以使用诸如 headtrackr.js 之类的库： simpl.info/headtrackr 中的示例。

于 2013-06-10T07:48:01.613 回答