How to detect eyes in the new version of trackingjs?

[sushant12]

In the older version of trackingjs , eye detecting feature was already there but in the new version only the face detecting feature is available. Even this did not tracked the eyes. var tracker = new tracking.ObjectTracker(['eye']);

[eduardolundgren]

Have you included on your page the file https://github.com/eduardolundgren/tracking.js/blob/master/build/data/eye.js?

[sushant12]

yes I have included it. Plus I have used the trackingjs package for meteor. Here is my code:

var tracker = new tracking.ObjectTracker('eye'); tracker.setInitialScale(4); tracker.setStepSize(2); tracker.setEdgesDensity(0.1);

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

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

    event.data.forEach(function(rect) {
      context.strokeStyle = '#a64ceb';
      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);
    });
  });

[sushant12]

The problem has been solved.

var tracker = new tracking.ObjectTracker('eye'); tracker.setStepSize(1.7);

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

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

event.data.forEach(function(rect) {
  context.strokeStyle = '#a64ceb';
  context.strokeRect(rect.x, rect.y, rect.width, rect.height);

});

});

[tetreault]

Not to ping a dead thread, but I'm doing this and am not having eye tracking working for me. Any help would be appreciated @eduardolundgren. My source:

      document.addEventListener('DOMContentLoaded', () => {
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        const testImg = document.getElementById('image-src-test');
        const testCam = document.getElementById('camera-src-test');
        const testImgContainer = document.getElementById('image-test-container');
        const testCamContainer = document.getElementById('camera-test-container');
        const tracker = new tracking.ObjectTracker('eye');
        tracker.setStepSize(1.7);

        testCam.addEventListener('click', (e) => {
          e.preventDefault();
          testImgContainer.style.display = 'none';
          testCamContainer.style.display = 'block';

          tracking.track('#video', tracker, { camera: true });
          tracker.on('track', function(event) {
            console.log(event);  // shows as empty array most of the time
            context.clearRect(0, 0, canvas.width, canvas.height);
            event.data.forEach(function(rect) {
              context.strokeStyle = '#a64ceb';
              context.strokeRect(rect.x, rect.y, rect.width, rect.height);
            });
          });
        });
      });

The little demo I'm making seems like it gets some seldom hits, but largely event returns as an empty array.

I have tracking-min.js and eye-min.js in the head tag as well, not missing those.

Anything I'm missing here? The demo for face works flawlessly on the trackingjs site, but here not so much.

[tetreault]

Wanted to add that when i filter out all the data array's with length 0 and hold my computer up to my face reeeally close, i start seeing the rectangles drawn but their regions are totally off in terms of dimensions and theyre offset oddly, like about half the canvas height from where the eyes in the camera feed actually are @eduardolundgren

[tetreault]

If i mess around with the rect x/y/width/height values randomly i can kind of get it close-ish but it seems like its still having quite a difficult time accurately painting the rectangles around the eye regions. Here's my most recent successful edit:

// the 0.5 and 0.3 are just messing around with values until the region
// is at least close to the eyes, still not perfect yet
context.strokeRect(rect.x * 0.5, rect.y * 0.5, rect.width * 0.3, rect.height * 0.3);