事件监听器处理headtrackr.js

Event listener to handle headtrackr.js

本文关键字:js headtrackr 处理 监听器 事件      更新时间:2023-09-26

我希望能够使用headtrackr.js滚动头部运动的页面

https://github.com/auduno/headtrackr

我已经在一个基本的html页面上实现了代码。

<html>
<head>
<title>Test</title>
  <script src="headtrackr.js"></script>
</head>
<body>
<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>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</body>
</html>

以上是ssl启用-视频出现。人脸会被检测到。但是文档不能滚动。

我还需要什么吗?就像听者读头部追踪器的读数一样?我在github或http://www.digitoffee.com/video/scroll-a-document-by-just-moving-your-head/428/

的文档中找不到这个

也许试着添加这个事件监听器来改变你想做的事情?

document.addEventListener('headtrackingEvent', function(e) {
 window.scrollTo( e.x, e.y );
}