1

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?

SOLO
  • 868
  • 9
  • 19

0 Answers0