I'm trying to get familiar with tracking.js, but when I try to run the very same example given on the project's page (http://trackingjs.com/docs.html#introduction), nothing happens. Google-chrome doesn't even shows the prompt asking if I want to allow the page to access to my webcam. The same thing happens for Firefox.
I have already ran the other examples from the tracking.js-master/ package, and the only one that fails is the one described on the tutorial, which I've added.
Below is the code which I copied and pasted from the tracking.js intro page to my first_tracking.html file.
<!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>
Has anyone tried and succeeded in running the introduction examples listed on the tracking.js page and have any pointers?
Research: Most of the stuff found on a google search relate to Google Analytics, Node.js and other JS frameworks. I also found some people suggesting setting the preload option to auto, resulting in preload="auto", but it didn't work.
I was able to get the example working with the webcam. Here's how.
First, Go into to root tracking.js directory and start a simple server. If you have python installed, try running
python -m SimpleHTTPServer
, then visithttp://localhost:8000/examples/first_tracking.html
to see your example, assuming your file is located in the examples directory of the unzipped file. This is important. If you just open the file in your browser, you will get an error: Canvas tainted by cross-origin dataSave the following code to first_tracking.html:
Make sure your server is still running, then visit
http://localhost:8000/examples/first_tracking.html
and inspect the console. You should see output like the following260 47 37 47 "cyan" first_tracking.html:18