Using tracking.js for colour recognition

[vassyz]

What I want to achieve is to track someone's t-shirt, and read its color. I would want to use face tracking, select the area beneath the head, and read the colors from that selection. Is this possible using tracking.js? I can see there are some color features demoed, but it seems that I have to input the requested colors, not the other way around. Thanks.

[thiago-rocha]

I not sure if I understand what you want. So, before find the face area and based on this find the "body" area you want know what ins the color of this second region, right?

[vassyz]

Yes, that is exactly what I was looking for, I found an example built in C doing something similar, but not real time tracking. I think this image explains it better. I want to get the color from that square on the subject's t-shirt.

[thiago-rocha]

Ok, you a use a canvas to render the results?

[vassyz]

I need the result as a color. I wrote some code that works, but I'm not sure it's the best way of doing it.

My trackCanvasInternal_ method looks like this:

tracking.trackCanvasInternal_ = function(element, tracker) {
  var width = element.width;
  var height = element.height;
  var context = element.getContext('2d');
  var imageData = context.getImageData(0, 0, width, height);
  tracker.track(imageData.data, width, height);

  tracker.on('track', function(event) {
    result = event.data[0];
    if (typeof(result) != 'undefined') {
      var beneathHeadData = context.getImageData(result.x, result.y + result.height, result.width, result.height);
      setColor(beneathHeadData);
    }
  });
};

The setColor method gets the RGBA value out of the beneathHeadData object using something similar to this gist. If I put the tracker.on('track') listener outside the library, it doesn't work. I don't really know why.