Question

我正在尝试熟悉tracking.js，但是当我尝试运行项目页面（http://trackingjs.com/docs.html#introduction）上给出的相同示例时，没有任何反应。 Google-chrome甚至没有显示提示，询问我是否要允许该页面访问我的网络摄像头。 Firefox也是如此。

我已经运行了tracking.js-master / package中的其他示例，唯一失败的是我在教程中描述的那个，我已经添加了。

以下是我从tracking.js介绍页面复制并粘贴到我的first_tracking.html文件的代码。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - first tracking</title>
  <script src="../build/tracking-min.js"></script>
</head>
<body>
  <p>This shows in the browser</p>
  <video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
  <script>
  var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

  colors.on('track', function(event) {
      if (event.data.length === 0) {
      // No colors were detected in this frame.
      } else {
      event.data.forEach(function(rect) {
        console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
        });
      }
      });

  tracking.track('#myVideo', colors);
  </script>
</body>
</html>

有没有人尝试并成功运行了tracking.js页面上列出的介绍示例并有任何指示？

研究：谷歌搜索中发现的大部分内容与Google Analytics，Node.js和其他JS框架有关。我还发现有些人建议将 preload 选项设置为 auto ，从而导致 preload =“auto”，但它不起作用。< / p>

Answer 1

我能够使用网络摄像头的示例。这是怎么回事。

首先，进入root tracking.js目录并启动一个简单的服务器。如果您安装了python，请尝试运行python -m SimpleHTTPServer，然后访问http://localhost:8000/examples/first_tracking.html以查看您的示例，假设您的文件位于解压缩文件的示例目录中。 这很重要。如果您只是在浏览器中打开该文件，则会收到错误消息：Canvas tainted by cross-origin data

将以下代码保存到first_tracking.html：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - first tracking</title>
  <script src="../build/tracking-min.js"></script>
</head>
<body>
<video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
<script>
var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

colors.on('track', function(event) {
  if (event.data.length === 0) {
    // No colors were detected in this frame.
  } else {
    event.data.forEach(function(rect) {
      console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
    });
  }
});

window.onload = function() {
  // note here that 'camera' is set to true, I believe this tells tracking.js to use
  // the webcam.
  tracking.track('#myVideo', colors, {camera: true});  
}

</script>
</body>
</html>

确保您的服务器仍在运行，然后访问http://localhost:8000/examples/first_tracking.html并检查控制台。你应该看到如下的输出

260 47 37 47 "cyan" first_tracking.html:18

Answer 2

我最近遇到了这个问题，对我而言，问题是跟踪.track（）调用缺少参数......

在线示例显示了这一点：

tracking.track('#myVideo', colors);

应该如此：

tracking.track('#myVideo', colors, { camera: true });

从技术上讲，朱莉娅的帖子中包含了这个参数，所以我很乐意将其作为公认的答案，但万一其他人遇到这个问题，这就是为我解决的问题。使用相机标志，我能够在不等待dom加载的情况下运行该示例，如果这对任何其他人都很重要。

Answer 3

示例代码中缺少

{ camera: true }。如前所述，请提及tracking.track('#myVideo', colors, { camera: true });

无法在Chrome上运行第一个tracking.js示例

3 个答案: