tracking js
Post on 05-Dec-2014
1.423 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
top related