不能在Chrome上运行第一个tracking.js的例子
Can't run very first tracking.js example on Chrome
我试图熟悉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>
有没有人尝试并成功地运行了跟踪.js页面上列出的介绍示例,并有任何指针?
研究:在谷歌搜索中发现的大部分内容都与谷歌分析、Node.js和其他JS框架有关。我还发现有些人建议将preload选项设置为auto,导致preload="auto",但它不起作用。
我能够让这个例子与网络摄像头一起工作。这是如何。
首先,进入根目录tracking.js并启动一个简单的服务器。如果您已经安装了python,请尝试运行python -m SimpleHTTPServer
,然后访问http://localhost:8000/examples/first_tracking.html
以查看示例,假设您的文件位于解压缩文件的示例目录中。这很重要。如果您只是在浏览器中打开该文件,您将得到一个错误:Canvas被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
我最近遇到了这个问题,我的问题是缺少一个参数的跟踪。跟踪()调用…
在线示例显示如下:
tracking.track('#myVideo', colors);
当它应该是:
tracking.track('#myVideo', colors, { camera: true });
从技术上讲,Julia的帖子包括这个参数,所以我可以接受这个答案,但以防别人遇到这个问题,这就是为我解决的问题。有了相机标志,我就可以在不等待dom加载的情况下运行这个例子,如果这对其他人来说很重要的话。
{ camera: true }
在示例代码中缺失。如前所述,包括tracking.track('#myVideo', colors, { camera: true });
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- Node.js v6.2.0类扩展不是函数错误
- 当js函数's已执行
- 要求未定义JS回调参数
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 如何从Java/scala调用js美化程序
- 如何更改<svg>标记为<img>用js标记
- 如何使用 node.js 比较两个 json 数组
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- 不能在Chrome上运行第一个tracking.js的例子
- 无法使用tracking.js跟踪眼睛
- 在node.js上使用tracking.js