tracking.js

Zeno Rocha

tracking.jsuma nova dimensão

@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

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

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

</>

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?

<video is="video-color-tracking" target="magenta" camera="true" ontrack="onResult">

Usando Web Components…

Documentação

trackingjs.com

Obrigado!

trackingjs.com

hi@zenorocha.comtwitter.com/zenorocha