Unable to register new color javascript tracking.js

Question

I'm trying to add an identification to a green color. All default colors work fine but I have not been able to add a new color for color with camera.

for more info : ColorTracker

window.onload = function() {
  var video = document.getElementById('video');
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var tracker = new tracking.ColorTracker();

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

  tracking.track('#video', tracker, { camera: true });

  tracker.on('track', function(event) {
    context.clearRect(0, 0, canvas.width, canvas.height);

    event.data.forEach(function(rect) {
      if (rect.color === 'custom') {
        rect.color = tracker.customColor;
      }

      context.strokeStyle = rect.color;
      context.strokeRect(rect.x, rect.y, rect.width, rect.height);
      context.font = '11px Helvetica';
      context.fillStyle = "#fff";
      context.fillText('x: ' + rect.x + 'px', rect.x + rect.width + 5, rect.y + 11);
      context.fillText('y: ' + rect.y + 'px', rect.x + rect.width + 5, rect.y + 22);
    });
  });

 initGUIControllers(tracker);
};

Answer 1

You are doing it right, just the color tracking is very picky. It will choose whatever is closest to the G in the RGB color. It does pick up some black and other colors because of that. I would recommend getting the RGB color of the exact green you want to track and go off of that. I included the few I have working in my project( this does not mean these will work for your green)

tracking.ColorTracker.registerColor('darkgreen', function (r, g, b) {
  if (r < 120   &&   r > 80   &&   g < 150  && b < 70) {
    return true;
  }
    return false;
});

tracking.ColorTracker.registerColor('lightgreen', function (r, g, b) {
  if (r < 30 && g < 100 && b < 30) {
    return true;
  }
  return false;
});

tracking.ColorTracker.registerColor('green', function (r, g, b) {
  if (r < 30 && g < 50 && b < 30) {
    return true;
  }
  return false;
});