tracking.js works with sample image but not more complex data

62 Views Asked by At

I'm trying to use tracking.js for color detection. I'm testing the code locally, and can replicate the example results when using the sample image provided in the tracking.js live demo.

I can also add a new color and get the tracker to identify the fourth bulb in that sample:

tracking.ColorTracker.registerColor('#8CF0BE', function(r, g, b) {
  if (r < 150 && g > 225 && b < 200) {
    return true;
  }
  return false;
});

But when I swap out the default image on my local test page with the one below (which is from an unrelated but excellent SO post, nothing at all gets highlighted/boxed.

Railway switch in trainyard Image by Mecanismo, via Wikimedia Commons. Used under the CC BY-SA 3.0 license.

I'm specifically trying to get the switch to light up, with this color definition:

tracking.ColorTracker.registerColor('orangered', function(r, g, b) {
  if (r > g && r > b) {
    return true;
  }
  return false;
});

I used a digital color meter to determine that all the switches in the pixel have red values in the 150-200 range, green values in the 30-100 range, and blue values in the 10-100 range (and mostly not the high ends of those scales).

For what it's worth, I know the custom color definition itself isn't completely broken, because it does have an effect on that initial sample image:

Sample image with highlighting

What am I doing wrong or not understanding here?

0

There are 0 best solutions below