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
110
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
43
Introducing Liferay Standalone Applications
eduardolundgren
3
510
Single Page Applications in Liferay
eduardolundgren
5
2.5k
Single Page Applications done right
eduardolundgren
10
740
Single Page Application
eduardolundgren
0
400
Getting Started with YUI3 and AlloyUI
eduardolundgren
0
68
Getting started with AlloyUI
eduardolundgren
0
67
Augmented Reality.js
eduardolundgren
0
150
Liferay UI revolution
eduardolundgren
0
180
Other Decks in Technology
See All in Technology
実践的なバグバウンティ入門
scgajge12
4
2.2k
20240906_JAWS_Yamanashi_#1_leap_beyond_the_AWS_all_certifications
tsumita
1
140
強いチームを夢見て-PMからSREに転身して1年の振り返り / 20240906_bengo4_sre
bengo4com
1
770
AWS IAM Identity Center議論会 〜 認証認可結合モデルと認証認可分離モデル / 20240827-jawsug-arch-iam_identity_center
opelab
3
320
手軽に始める? おうちサーバーのすゝめ
nyagasan
0
180
セキュリティ監視の内製化 効率とリスク
mixi_engineers
PRO
5
680
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
1
160
CRTO/CRTL/OSEPの比較・勉強法とAV/EDRの検知実験
chayakonanaika
0
500
目標設定と習慣化で今よりも一歩生産性を上げる
sansantech
PRO
7
2.3k
New Relicで実践する外形監視
aeonpeople
1
120
20分で分かるIAM全機能 (拡大版) / 20240903-jawsug-yokohama-iam
opelab
3
120
Evolving DevOps Teams and Flexible Organizational Culture
kakehashi
1
140
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
22
3.9k
A better future with KSS
kneath
235
17k
From Idea to $5000 a Month in 5 Months
shpigford
378
46k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Designing the Hi-DPI Web
ddemaree
278
34k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Unsuck your backbone
ammeep
667
57k
Designing Experiences People Love
moore
138
23k
GitHub's CSS Performance
jonrohan
1029
450k
Navigating Team Friction
lara
183
13k
Practical Orchestrator
shlominoach
185
10k
Rails Girls Zürich Keynote
gr2m
93
13k
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