Upgrade to Pro — share decks privately, control downloads, hide ads and more …

tracking.js with Maira Bello

tracking.js with Maira Bello

Eduardo Lundgren

July 22, 2014
Tweet

More Decks by Eduardo Lundgren

Other Decks in Technology

Transcript

  1. Callback de sucesso function onSuccess(stream) { var video = document.querySelector('video');

    video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Pronto }; }
  2. Resumo Permissão do usuário <video> Acessar a câmera Reproduzir vídeo

    Algoritmos de tracking Obter matriz de pixels <canvas> Resultado
  3. 100% JavaScript! Open Source Sem dependências de outras bibliotecas tracking.js

    Algoritmos implementados Facilmente extensível API simples e intuitiva Alta performance Testes de unidade e de performance Setup automático ~ 7 Kb
  4. var tracker = new tracking.ColorTracker(‘magenta’); ! tracking.track('#video', tracker, { camera:

    true }); ! tracker.on('track', function(event) { event.data.forEach(function(rect) { // Seu código aqui }); });
  5. var tracker = new tracking.ObjectTracker(‘face’); ! tracking.track('#video', tracker, { camera:

    true }); ! tracker.on('track', function(event) { event.data.forEach(function(rect) { // Seu código aqui }); });
  6. var MyTracker = function() { MyTracker.base(this, 'constructor'); }; ! tracking.inherits(MyTracker,

    tracking.Tracker); ! MyTracker.prototype.track = function(pixels, width, height) { // Seu código aqui ! this.emit('track', { // Seu código aqui }); };
  7. var tracker = new tracking.MyTracker(); ! tracking.track('#video', tracker, { camera:

    true }); ! tracker.on('track', function(event) { event.data.forEach(function(rect) { // Seu código aqui }); });
  8. var tracker = new tracking.ColorTracker(‘magenta’); ! tracking.track('#video', tracker, { camera:

    true }); ! tracker.on('track', function(event) { event.data.forEach(function(rect) { // Seu código aqui }); }); Lembra?