javascript - 使用 JavaScript 滚动眼动追踪

Question

我需要为使用 JavaScript 的 Web 应用程序制作类似三星 Galaxy S4 的 Eye Scroll（虽然名称中有眼睛；但我相信它实际上是头部）。我使用输入视频流，getUserMedia()但我真的不知道我可以从哪里......我看过

• http://www.html5rocks.com/en/tutorials/getusermedia/intro/
• http://www.adobe.com/devnet/html5/articles/javascript-motion-detection.html
• http://dev.opera.com/articles/view/head-tracking-with-webrtc/

但似乎我实际上无法使用这些中的任何一个来跟踪我的头部（上下）。另外，我不想使用 OpenCV 联系 Python 服务器等......我只想在网页上实时跟踪头部，然后从中做一些事情。如果我知道如何很好地使用 JavaScript，我会开始......

谢谢

Answer 1

我认为您所追求的答案在上述链接之一中。使用headtrackr.js可以很容易地实现您所追求的功能。

这个 javascript 库将让您检测并跟踪 2d（​​faceTracking 事件）或估计的 3d（来自 headTracking 事件）中的头部。

要开始，只需下载headtrackr.js并将其包含在您的项目中：

<script src="js/headtrackr.js"></script>

下面的代码将启动一个带有视频元素（媒体流）和画布元素的 headtrackr，帧将被复制到（有利于调试）

<canvas id="inputCanvas" width="320" height="240" style="display:none"></canvas>
<video id="inputVideo" autoplay loop></video>
<script type="text/javascript">
  var videoInput = document.getElementById('inputVideo');
  var canvasInput = document.getElementById('inputCanvas');

  var htracker = new headtrackr.Tracker();
  htracker.init(videoInput, canvasInput);
  htracker.start();
</script>