Javascript Can'；t在Chrome上运行第一个tracking.js示例_Javascript_Html_Tracking.js

Javascript Can'；t在Chrome上运行第一个tracking.js示例

javascript html

Javascript Can'；t在Chrome上运行第一个tracking.js示例,javascript,html,tracking.js,Javascript,Html,Tracking.js,我试图熟悉tracking.js，但是当我尝试运行项目页面（）上给出的相同示例时，什么都没有发生。 Google chrome甚至没有显示提示，询问我是否允许该页面访问我的网络摄像头。Firefox也是如此我已经运行了tracking.js-master/包中的其他示例，唯一失败的示例是我在教程中添加的示例下面是我从tracking.js简介页面复制并粘贴到第一个_tracking.html文件的代码 <!doctype html> <html> <head&g

我试图熟悉tracking.js，但是当我尝试运行项目页面（）上给出的相同示例时，什么都没有发生。 Google chrome甚至没有显示提示，询问我是否允许该页面访问我的网络摄像头。Firefox也是如此

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

下面是我从tracking.js简介页面复制并粘贴到第一个_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-第一次跟踪
这将显示在浏览器中
var colors=new tracking.ColorTracker（['洋红'，'青色'，'黄色']）；
颜色。在（'轨道'，功能（事件）{
if（event.data.length==0）{
//在此帧中未检测到任何颜色。
}否则{
event.data.forEach（函数（rect）{
log（rect.x、rect.y、rect.height、rect.width、rect.color）；
});
}
});
跟踪。跟踪（“#我的视频”，颜色）；

是否有人尝试并成功运行tracking.js页面上列出的介绍示例，并且有任何提示

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

我能够让这个示例使用网络摄像头。这是怎么做的

首先，进入root tracking.js目录并启动一个简单的服务器。如果安装了python，请尝试运行

python-msimplehttpserver

，然后访问

http://localhost:8000/examples/first_tracking.html

要查看您的示例，假设您的文件位于解压缩文件的examples目录中这很重要。如果仅在浏览器中打开文件，则会出现错误：

将以下代码保存到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>


tracking.js-第一次跟踪
var colors=new tracking.ColorTracker（['洋红'，'青色'，'黄色']）；
颜色。在（'轨道'，功能（事件）{
if（event.data.length==0）{
//在此帧中未检测到任何颜色。
}否则{
event.data.forEach（函数（rect）{
log（rect.x、rect.y、rect.height、rect.width、rect.color）；
});
}
});
window.onload=函数（）{
//注意这里的“camera”设置为true，我相信这会告诉tracking.js使用
//网络摄像头。
track.track（'#myVideo'，colors，{camera:true}）；
}

确保服务器仍在运行，然后访问

http://localhost:8000/examples/first_tracking.html

并检查控制台。您应该看到如下输出

260 47 37 47“cyan”first_tracking.html:18

我最近自己也遇到了这个问题，问题是tracking.track（）调用缺少一个参数

在线示例显示：

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

什么时候应该是这样：

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

从技术上讲，Julia的帖子包含了这个参数，所以我同意这是一个公认的答案，但为了防止其他人遇到这个问题，这就是为我解决这个问题的方法。有了camera标志，我也可以在不等待dom加载的情况下运行示例，如果这对其他人来说很重要的话。

{camera:true}

在示例代码中缺失。正如前面的答案所提到的，包括

tracking.track（“#myVideo”，colors，{camera:true}）
嘿，朱莉娅，谢谢你的回答。我有一个网络摄像头，我还运行了apache。我能够在代码检查器上看到实际的视频帧，但页面仍然是空的。我尝试了您关于使用python的SimpleHTTPServer的建议，并用图像标记替换了视频。我能够看到图像，但在代码检查器上我得到：“Uncaught IndexSizeError:未能在‘CanvasRenderingContext2D’上执行‘getImageData’：源宽度为0.tracking-min.js:8 tracking.trackCanvasInternal u tracking-min.js:8（匿名函数）tracking-min.js:8 s.onload”Hi Vinicius，您收到的错误是因为tracking.track
代码在图像完全加载之前执行。是代码tracking.track（…）窗口中选择code>。是否启用onload
功能？窗口中的所有代码。在页面上加载所有资源后，将执行onload
。我可以通过将tracking.track
移动到窗口外来重现您的错误。onload
函数。嗨，Julia，我仔细检查并确保tracking.track（…）
是从窗口内调用的。onload
函数。代码看起来是这样的：，但仍然失败。谢谢你的帮助，顺便说一下，=）我想我遇到了一个与@ViniciusSilva类似的问题-在我更改或重命名文件之前，这些示例工作正常。我想知道这是否是一个编码问题。。。