tracking.js
uma nova dimensão
Zeno Rocha

@zenorocha

discover.liferay.com/tdc2014

Visão computacional

Detecção de faces

Reconhecimento de faces

Robôs autônomos

Realidade virtual

Realidade aumentada

Como fazer isso?

OpenCV

ARToolkit

Como fazer isso
no browser?

Acessar a câmera
#1

Acesso à câmera
navigator.getUserMedia({
video: true
}, onSuccess, onFail);

Reproduzir o vídeo
#2

<video>

Callback de sucesso
function onSuccess(stream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
// Pronto
};
}

Obter matriz de pixels
#3

<canvas>

Algoritmos de tracking
#4

Resumo
Permissão do
usuário
<video>
Acessar a
câmera
Reproduzir
vídeo
Algoritmos
de tracking
Obter matriz
de pixels
<canvas> Resultado

tracking.js

JavaScript
Eduardo
Lundgren

Realidade
aumentada
Java

Maira
Bello
Pablo
Carvalho
Zeno
Rocha
Time
Eduardo
Lundgren
Java

tracking.js
100% JavaScript!
Open Source
Sem dependências
de outras bibliotecas
Algoritmos
implementados
Facilmente
extensível
API simples e
intuitiva
Alta performance
Testes de unidade e
de performance
Setup automático ~ 7 Kb

Trackers

Color Tracker

Demo

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
});
});

Object Tracker

Demo

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
});
});

Custom Tracker

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
});
};

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
});
});

Utilitários

Fast

Brief

Lições aprendidas

41ms por
frame
24 fps
Tempo real

Complexidade do
algoritmo

Int32Array
Uint16Array
Float64Array
Uint8ClampedArray
Arrays
tipados

jsperf.com/tracking-js-arrays

jsperf.com/tracking-js-arithmetic

Demo

</>
Web Components

Lembra?
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
});
});

Usando Web Components…
<video is="video-color-tracking"
target="magenta"
camera="true"
ontrack="onResult">

Documentação

trackingjs.com

Obrigado!
hi@zenorocha.com
twitter.com/zenorocha
trackingjs.com