Maira Bello

tracking.jsuma nova dimensão

Maira Bello

discover.liferay.com/frontinbh

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

Time

Zeno RochaEduardo Lundgren

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 frames por

segundo

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"></video>

Usando Web Components…

Documentação

trackingjs.com

Obrigada!maira.araujo@liferay.com

trackingjs.com