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
41
Introducing Liferay Standalone Applications
eduardolundgren
3
500
Single Page Applications in Liferay
eduardolundgren
5
2.5k
Single Page Applications done right
eduardolundgren
10
740
Single Page Application
eduardolundgren
0
390
Getting Started with YUI3 and AlloyUI
eduardolundgren
0
59
Getting started with AlloyUI
eduardolundgren
0
62
Augmented Reality.js
eduardolundgren
0
140
Liferay UI revolution
eduardolundgren
0
160
Other Decks in Technology
See All in Technology
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
JAWS-UG Bedrock Claude Night
yamahiro
3
560
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.5k
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
300
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.5k
VS CodeでAWSを操作しよう
smt7174
7
1.6k
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
500
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
280
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
650
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
120
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Infographics Made Easy
chrislema
238
18k
Adopting Sorbet at Scale
ufuk
68
8.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Clear Off the Table
cherdarchuk
84
310k
Building Applications with DynamoDB
mza
88
5.6k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Become a Pro
speakerdeck
PRO
11
4.5k
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