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
49
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
410
Getting Started with YUI3 and AlloyUI
eduardolundgren
0
79
Getting started with AlloyUI
eduardolundgren
0
81
Augmented Reality.js
eduardolundgren
0
160
Liferay UI revolution
eduardolundgren
0
190
Other Decks in Technology
See All in Technology
Azure Well-Architected Framework入門
tomokusaba
1
310
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.5k
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
110
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
0
110
実装で解き明かす並行処理の歴史
zozotech
PRO
1
390
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.9k
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
110
「Verify with Wallet API」を アプリに導入するために
hinakko
1
240
Where will it converge?
ibknadedeji
0
180
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
1
330
GopherCon Tour 概略
logica0419
2
190
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
4k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
The Pragmatic Product Professional
lauravandoore
36
6.9k
GitHub's CSS Performance
jonrohan
1032
460k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Done Done
chrislema
185
16k
Become a Pro
speakerdeck
PRO
29
5.5k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
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