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
69
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
たった1人からはじめる【Agile Community of Practice】~ソース原理とFearless Changeを添えて~
ktc_corporate_it
1
500
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
220
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
210
20240912 JJUGナイトセミナー
mii1004
0
140
開発者の定量・定性データを組み合わせて開発者体験を把握するための取り組み
ham0215
1
140
Fediverse Discovery Providers overview
andypiper
0
170
DevRelの始め方
moongift
PRO
2
390
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
190
サーバー管理しないサーバーサービスManaged DevOps Pool
kkamegawa
0
130
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
180
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
330
Creative UIs with Compose: DroidKaigi 2024
chrishorner
1
590
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
How to train your dragon (web standard)
notwaldorf
85
5.6k
KATA
mclloyd
27
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
5
480
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Making Projects Easy
brettharned
113
5.8k
Building Your Own Lightsaber
phodgson
101
6k
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