Suivi du visage sur la toile via tracking.js

Question

tracking.js permet de détecter facilement un visage sur un <img>. Ils ont un wonderful hello world example pour cela, mais je me demandais si quelqu'un savait encore comment détecter un visage sur un élément <canvas>.

J'ai essayé:

var canvas = document.getElementById('canvas'), 
context = canvas.getContext('2d'), 
img = img = context.getImageData(0, 0, canvas.width, canvas.height); 

var tracker = new tracking.ObjectTracker(['face']); 
tracker.setStepSize(1.7); 

tracking.track('#canvas', tracker); 

tracker.on('track', function(event) { 
    event.data.forEach(function(rect) { 
    window.plot(rect.x, rect.y, rect.width, rect.height); 
    }); 
}); 

window.plot = function(x, y, w, h) { 
    var rect = document.createElement('div'); 
    document.querySelector('#preview').appendChild(rect); 
    rect.classList.add('rect'); 
    rect.style.width = w + 'px'; 
    rect.style.height = h + 'px'; 
    rect.style.left = (img.offsetLeft + x) + 'px'; 
    rect.style.top = (img.offsetTop + y) + 'px'; 
    rect.style.borderColor = '#ff0000'; 
}; 

Rien ne se passe: -/

Answer 1

J'ai eu le même problème. Changez juste l'ordre. Mettez tracking.track('#canvas', tracker) derrière la section tracker.on et cela devrait fonctionner. Mais si vous voulez le "mettre en surbrillance" sur une toile, vous devez dessiner sur le contexte au lieu de tracer. Vous pouvez également passer le imageData directement tracker.track(imgData, width, height) ... Amusez-vous.