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
Augmented Reality in JavaScript
Search
Zeno Rocha
April 02, 2013
Programming
13
11k
Augmented Reality in JavaScript
Presented at HTML5 Dev Conf - San Francisco, 2013.
Zeno Rocha
April 02, 2013
Tweet
Share
More Decks by Zeno Rocha
See All by Zeno Rocha
The Next Generation of Developer-First Products
zenorocha
1
620
7 Habits of Highly Productive Developers
zenorocha
1
400
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
520
What's new in the Liferay Community
zenorocha
0
690
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
570
How Liferay fits into the real of latest technologies
zenorocha
0
620
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
990
Como investir em... você!
zenorocha
1
570
Other Decks in Programming
See All in Programming
VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Face blurring with Vision Framework
imaizume
0
170
Local Peer-to-Peer APIはどのように使われていくのか?
hal_spidernight
2
400
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
0
490
大規模アプリにおけるXcode Previews実用化までの道のり
ikesyo
0
910
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
私はどうやって技術力を上げたのか
yusukebe
35
16k
気づいて!アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
waka12
0
240
株式会社 Sun terras カンパニーデック
sunterras
0
140
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
920
Advance Your Career with Open Source
ivargrimstad
0
110
CSC305 Lecture 02
javiergs
PRO
1
250
Learn CPU architecture with Assembly
akkeylab
1
1.3k
Featured
See All Featured
Designing for Performance
lara
610
69k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
How STYLIGHT went responsive
nonsquared
100
5.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
A better future with KSS
kneath
239
17k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Agile that works and the tools we love
rasmusluckow
330
21k
Transcript
augmented reality.js San Francisco, 2013.
None
I’m from brazil
no, I don’t samba
None
None
I ♥ HTML5
html5-pro.com/wormz
I ♥ opensource
browserdiet.com
today we’re going to talk about augmented reality...
None
...and how to integrate different HTML5 APIs
augumented reality is everywhere, or it will be... augmented reality
is (or at least will be) everywhere
before it was cool used Google Glass
what is augmented reality?
None
how can you do it using javascript?
mzl.la/ilyX7k
1. capture webcam
None
dev.w3.org/2011/webrtc/editor/webrtc.html
None
Access user's camera and microphone navigator.getUserMedia({ video: true, audio: true
}, onSuccess, onFail); STEP 1
2. play the captured video
<video>
Play webcam's content into a video element function onSuccess(stream) {
var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Ready }; } STEP 2
3. track a pattern of pixels
<canvas>
<video> <canvas>
None
fiducial markers
github.com/kig/JSARToolKit
libspark.org/wiki/saqoosha/FLARToolKit/en
hitl.washington.edu/artoolkit
soundstep.com/blog/experiments/jstracking/
bit.ly/XR0aGH
bit.ly/124FT3A FIDUCIAL MARKERS
None
<html><head> <script src="../../src/NyAs3Utils.js"></script> <script src="../../src/FLARArrayUtil.js"></script> <script src="../../src/FLARException.js"></script> <script src="../../src/FLARMat.js"></script> <script
src="../../src/FLARRgbPixelReader.js"></script> <script src="../../src/NyARHistogramAnalyzer.js"></script> <script src="../../src/NyARPca2d.js"></script> <script src="../../src/NyARRasterReader.js"></script> <script src="../../src/NyARTypes.js"></script> <script src="../../src/FLARRasterFilter.js"></script> <script src="../../src/FLARTypes.js"></script> <script src="../../src/NyARLabel.js"></script> <script src="../../src/FLARLabeling.js"></script> <script src="../../src/NyARParam.js"></script> <script src="../../src/FLARParam.js"></script> <script src="../../src/NyARRaster.js"></script> <script src="../../src/FLARRaster.js"></script> <script src="../../src/NyARCode.js"></script> <script src="../../src/FLARCode.js"></script> <script src="../../src/NyARMatch.js"></script> <script src="../../src/NyARRasterAnalyzer.js"></script> <script src="../../src/FLARRasterAnalyzer.js"></script> <script src="../../src/NyARRasterFilter.js"></script> <script src="../../src/NyARSquareDetect.js"></script> <script src="../../src/FLARSquareDetect.js"></script> <script src="../../src/NyARTransMat.js"></script> <script src="../../src/FLARTransMat.js"></script>
None
face detection
webdesign.maratz.com/lab/responsivetypography RESPONSIVE TYPOGRAPHY
github.com/auduno/headtrackr
auduno.github.com/headtrackr/examples/targets.html HEADTRACKR TARGETS
None
None
@eduardolundgren (Liferay)
trackingjs.com
bit.ly/YVPz3e
bit.ly/ZSZuUd TRACKING.JS SINGLE CONTROLLER
None
Imports tracking.js core Imports tracking.js color module <script src="tracker/color.js"></script> <script
src="tracking.js"></script> STEP 1 SINGLE CONTROLLER
Gets user's camera and renders it var videoCamera = new
tracking .VideoCamera() .render(); STEP 2 SINGLE CONTROLLER
Hides video camera and renders a canvas from it videoCamera
= videoCamera .hide() .renderVideoCanvas(); STEP 3 SINGLE CONTROLLER
STEP 4 SINGLE CONTROLLER Instantiates tracking by magenta color videoCamera.track({
type: 'color', color: 'magenta', onFound: function() {}, onNotFound: function() {} });
STEP 5 SINGLE CONTROLLER Paints with magenta all detected pixels
onFound: function(track) { var pixels = track.pixels, ctx = videoCamera.canvas.context; for (var i = 0, len = pixels.length; i < len; i += 2) { ctx.fillStyle = "rgb(255,0,255)"; ctx.fillRect(pixels[i], pixels[i+1], 2, 2); } ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(track.x, track.y, 5, 5); }
bit.ly/118nzaL TRACKING.JS MULTIPLE CONTROLLERS
None
Gets user's camera and renders it var videoCamera = new
tracking .VideoCamera() .render(); STEP 1 MULTIPLE CONTROLLERS
Hides video camera and renders a canvas from it videoCamera
= videoCamera .hide() .renderVideoCanvas(); STEP 2 MULTIPLE CONTROLLERS
STEP 3 MULTIPLE CONTROLLERS Instantiates tracking by magenta color videoCamera.track({
type: 'color', color: 'magenta', onFound: function() {}, onNotFound: function() {} });
STEP 4 MULTIPLE CONTROLLERS Draws a square around tracked area
onFound: function(track) { var size = 60 - track.z; var ctx = videoCamera.canvas.context; ctx.strokeStyle = "rgb(255,0,255)"; ctx.lineWidth = 3; ctx.strokeRect(track.x - size*0.5, track.y - size*0.5, size, size); }
STEP 5 MULTIPLE CONTROLLERS Instantiates tracking by cyan color videoCamera.track({
type: 'color', color: 'cyan', onFound: function() {}, onNotFound: function() {} });
STEP 6 MULTIPLE CONTROLLERS Draws a square around tracked area
onFound: function(track) { var size = 60 - track.z; var ctx = videoCamera.canvas.context; ctx.strokeStyle = "rgb(0,255,255)"; ctx.lineWidth = 3; ctx.strokeRect(track.x - size*0.5, track.y - size*0.5, size, size); }
bit.ly/10mIS6h TRACKING.JS DRAW SOMETHING
None
bit.ly/XR5vha TRACKING.JS MINECRAFT
None
None
bit.ly/X6LuGj TRACKING.JS GLASSES
IT’S UP TO YOU!
None
thanks :) zenorocha.com