Unable to register new color javascript tracking.js - 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;
});