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

【问题标题】：Can't run very first tracking.js example on Chrome无法在 Chrome 上运行第一个 tracking.js 示例
【发布时间】：2014-10-15 19:49:49
【问题描述】：

我正在尝试熟悉 tracking.js，但是当我尝试运行项目页面 (http://trackingjs.com/docs.html#introduction) 上给出的完全相同的示例时，什么也没有发生。 Google-chrome 甚至没有显示询问我是否要允许该页面访问我的网络摄像头的提示。 Firefox 也会发生同样的事情。

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

以下是我从 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 页面上列出的介绍示例并有任何指示？

研究：在谷歌搜索中找到的大部分内容都与谷歌分析、Node.js 和其他 JS 框架有关。我还发现有人建议将 preload 选项设置为 auto，导致 preload="auto"，但它不起作用。

【问题讨论】：

标签： javascript html tracking.js

【解决方案1】：

我能够获得使用网络摄像头的示例。方法如下。

首先，进入根 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

【讨论】：

嗨，朱莉娅，感谢您的回答。我确实有一个网络摄像头，我也运行了 apache。我能够在代码检查器上看到实际的视频帧，但页面仍然是空的。我尝试了您使用 python 的 SimpleHTTPServer 的建议，并用图像标签替换了视频。我能够看到图像，但在代码检查器上我得到：“未捕获的 IndexSizeError：无法在 'CanvasRenderingContext2D' 上执行 'getImageData'：源宽度为 0。 tracking-min.js:8 tracking.trackCanvasInternal_ tracking-min .js:8 (匿名函数) tracking-min.js:8 s.onload"
您好 Vinicius，您遇到的错误是因为在图像完全加载之前正在执行 tracking.track 代码。 window.onload 函数中的代码 tracking.track(...); 是什么？ window.onload 中的所有代码将在页面上所有资源加载后执行。通过将 tracking.track 移到 window.onload 函数之外，我能够重现您的错误。
嗨 Julia，我仔细检查并确保 tracking.track(...) 是从 window.onload 函数中调用的。这就是代码的样子：gist.github.com/anonymous/4111ff316c529a6ea56e，但它仍然失败。谢谢你的帮助顺便说一句。 =)
我认为我遇到了与@ViniciusSilva 类似的问题 - 示例工作正常，直到我进行更改或重命名文件。不知道是不是编码问题……

【解决方案2】：

我自己最近遇到了这个问题，对我来说问题是 tracking.track() 调用缺少参数...

网上的例子是这样的：

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

什么时候应该是这样的：

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

从技术上讲，Julia 的帖子包含这个参数，所以我可以接受它作为接受的答案，但以防万一其他人遇到这个问题，这就是为我解决的问题。使用相机标志，我也能够运行示例而无需等待 dom 加载，如果这对其他人很重要的话。

【讨论】：

【解决方案3】：

示例代码中缺少{ camera: true }。正如之前的答案所提到的，包括tracking.track('#myVideo', colors, { camera: true });

【讨论】：