Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
tracking.js with Maira Bello
Search
Eduardo Lundgren
July 22, 2014
Technology
0
120
tracking.js with Maira Bello
Eduardo Lundgren
July 22, 2014
Tweet
Share
More Decks by Eduardo Lundgren
See All by Eduardo Lundgren
WeDeploy
eduardolundgren
0
48
Introducing Liferay Standalone Applications
eduardolundgren
3
520
Single Page Applications in Liferay
eduardolundgren
5
2.5k
Single Page Applications done right
eduardolundgren
10
760
Single Page Application
eduardolundgren
0
400
Getting Started with YUI3 and AlloyUI
eduardolundgren
0
77
Getting started with AlloyUI
eduardolundgren
0
78
Augmented Reality.js
eduardolundgren
0
150
Liferay UI revolution
eduardolundgren
0
190
Other Decks in Technology
See All in Technology
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
410
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
420
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.7k
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
130
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
120
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
7.7k
How Community Opened Global Doors
hiroramos4
PRO
1
140
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
150
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
190
Connect 100+を支える技術
kanyamaguc
0
180
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
300
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
230
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Building Applications with DynamoDB
mza
95
6.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Side Projects
sachag
455
42k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Transcript
Maira Bello tracking.js uma nova dimensão
Maira Bello
None
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 Rocha Eduardo Lundgren Java
None
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
None
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
None
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
None
Brief
None
Lições aprendidas
41ms por frame 24 frames por segundo Tempo real
None
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!
[email protected]
trackingjs.com