Download - Tracking.js
![Page 1: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/1.jpg)
Zeno Rocha
tracking.jsuma nova dimensão
![Page 2: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/2.jpg)
@zenorocha
![Page 3: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/3.jpg)
discover.liferay.com/tdc2014
![Page 4: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/4.jpg)
![Page 5: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/5.jpg)
![Page 6: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/6.jpg)
Visão computacional
![Page 7: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/7.jpg)
Detecção de faces
![Page 8: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/8.jpg)
Reconhecimento de faces
![Page 9: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/9.jpg)
Robôs autônomos
![Page 10: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/10.jpg)
Realidade virtual
![Page 11: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/11.jpg)
Realidade aumentada
![Page 12: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/12.jpg)
Como fazer isso?
![Page 13: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/13.jpg)
OpenCV
![Page 14: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/14.jpg)
ARToolkit
![Page 15: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/15.jpg)
Como fazer isso no browser?
![Page 16: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/16.jpg)
Acessar a câmera
#1
![Page 17: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/17.jpg)
Acesso à câmera
navigator.getUserMedia({ video: true}, onSuccess, onFail);
![Page 18: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/18.jpg)
Reproduzir o vídeo
#2
![Page 19: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/19.jpg)
<video>
![Page 20: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/20.jpg)
Callback de sucesso
function onSuccess(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Pronto };}
![Page 21: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/21.jpg)
Obter matriz de pixels
#3
![Page 22: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/22.jpg)
<canvas>
![Page 23: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/23.jpg)
Algoritmos de tracking
#4
![Page 24: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/24.jpg)
Resumo
Permissão do usuário
<video>
Acessar a câmera
Reproduzir vídeo
Algoritmos de tracking
Obter matriz de pixels
<canvas> Resultado
![Page 25: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/25.jpg)
tracking.js
![Page 26: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/26.jpg)
JavaScript
Eduardo Lundgren
![Page 27: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/27.jpg)
Realidade aumentada
Java
![Page 28: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/28.jpg)
Maira Bello
Pablo Carvalho
Zeno Rocha
Time
Eduardo Lundgren
Java
![Page 29: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/29.jpg)
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
![Page 30: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/30.jpg)
Trackers
![Page 31: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/31.jpg)
Color Tracker
![Page 32: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/32.jpg)
Demo
![Page 33: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/33.jpg)
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 });});
![Page 34: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/34.jpg)
Object Tracker
![Page 35: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/35.jpg)
Demo
![Page 36: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/36.jpg)
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 });});
![Page 37: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/37.jpg)
Custom Tracker
![Page 38: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/38.jpg)
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 });};
![Page 39: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/39.jpg)
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 });});
![Page 40: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/40.jpg)
Utilitários
![Page 41: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/41.jpg)
Fast
![Page 42: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/42.jpg)
![Page 43: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/43.jpg)
Brief
![Page 44: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/44.jpg)
![Page 45: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/45.jpg)
Lições aprendidas
![Page 46: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/46.jpg)
41ms por frame
24 fps
Tempo real
![Page 47: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/47.jpg)
![Page 48: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/48.jpg)
Complexidade do algoritmo
![Page 49: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/49.jpg)
Int32Array
Uint16Array
Float64Array
Uint8ClampedArray
Arrays tipados
![Page 52: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/52.jpg)
Demo
![Page 53: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/53.jpg)
Web Components
</>
![Page 54: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/54.jpg)
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?
![Page 55: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/55.jpg)
<video is="video-color-tracking" target="magenta" camera="true" ontrack="onResult">
Usando Web Components…
![Page 56: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/56.jpg)
Documentação
![Page 57: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/57.jpg)
trackingjs.com
![Page 58: Tracking.js](https://reader033.vdocuments.com.br/reader033/viewer/2022051411/547e87b7b37959492b8b54c7/html5/thumbnails/58.jpg)