Can't run very first tracking.js example on Chrome

Question

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.

score 4 · Accepted Answer · edited May 23 '17 at 12:34

4

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 visit http://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 data

Save the following code to 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>

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 following

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

edited May 23 '17 at 12:34

Community

1
1

answered Aug 22 '14 at 03:37

Julia Schwarz

2,610
1
19
25

1

Hey Julia, thanks for answering. I do have a webcam and I also had apache running. I was able to see the actual video frame on the code inspector, but still the page was empty. I tried your suggestion of using python's SimpleHTTPServer and replaced the video with the image tag. I was able to see the image, but on the code inspector I got: "Uncaught IndexSizeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0. tracking-min.js:8 tracking.trackCanvasInternal_ tracking-min.js:8 (anonymous function) tracking-min.js:8 s.onload" – Vinicius Silva Aug 23 '14 at 00:01
Hi Vinicius, the error you are getting is because the `tracking.track` code is being executed before the image has fully loaded. is the code `tracking.track(...);` in the `window.onload` function? All code inside `window.onload` will be executed after all resources are loaded on the page. I was able to reproduce your error by moving `tracking.track` outside of the `window.onload` function. – Julia Schwarz Aug 23 '14 at 14:19
Hi Julia, I double checked and made sure `tracking.track(...)` is being called from within the `window.onload` function. This is what the code looks like: https://gist.github.com/anonymous/4111ff316c529a6ea56e, and it still fails. Thanks for your help btw. =) – Vinicius Silva Sep 17 '14 at 02:26
I think I'm having a similar issue to @ViniciusSilva - the examples work fine, until I make a change or rename the file. I wonder if it's an encoding issue... – Hadi Apr 20 '15 at 02:05

score 2 · Answer 2 · answered May 19 '17 at 18:33

I recently ran into this problem myself and the issue for me was a missing parameter to the tracking.track() call...

The example online shows this:

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

When it should be this:

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

Technically Julia's post includes this param so I'm ok with that as the accepted answer, but just in case someone else runs into this problem, this is what fixed it for me. With the camera flag, I was able to run the example without waiting for dom load as well, if that matters for anyone else.

score 1 · Answer 3 · answered Jul 05 '17 at 02:25

1

{ camera: true } is missing from the example code. As previous answers mention, include tracking.track('#myVideo', colors, { camera: true });

answered Jul 05 '17 at 02:25

Stretch0

8,362
13
71
133

Can't run very first tracking.js example on Chrome

3 Answers3