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

Question

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

3.6k views Asked by Vinicius Silva At 22 August 2014 at 02:50

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.

Original Q&A

There are 3 answers

Marcus Pope On 19 May 2017 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.

Stretch0 On 05 July 2017 at 02:25

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

**Julia Schwarz** · Accepted Answer · 2014-08-22 03:37:20

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

TechQA.

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

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in TRACKING.JS

Popular Questions

Popular Tags

Trending Questions