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
470
7 Habits of Highly Productive Developers
zenorocha
1
320
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
360
What's new in the Liferay Community
zenorocha
0
590
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
480
How Liferay fits into the real of latest technologies
zenorocha
0
470
Estoicismo e JavaScript
zenorocha
3
940
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
820
Como investir em... você!
zenorocha
1
500
Other Decks in Programming
See All in Programming
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
190
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
380
月間4.5億回再生を超える大規模サービス TVer iOSアプリのリアーキテクチャ戦略 - iOSDC2024
techtver
PRO
1
640
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.6k
オートマトン学習しろ / Do automata learning
makenowjust
3
110
LangChainの現在とv0.3にむけて
os1ma
3
740
Swiftで高速フーリエ変換してオーディオビジュアライザーを作る / iOSDC Japan 2024 Day1 Track D
kyome22
2
490
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
230
iOSの隠されたAPIを解明し、開発効率を向上させる方法/iOSDC24
noppefoxwolf
2
120
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
110
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
420
ドメイン駆動設計を実践するために必要なもの
bikisuke
3
300
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Automating Front-end Workflow
addyosmani
1365
200k
Music & Morning Musume
bryan
46
6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
25
1.3k
How to Think Like a Performance Engineer
csswizardry
16
920
We Have a Design System, Now What?
morganepeng
48
7.1k
Raft: Consensus for Rubyists
vanstee
135
6.5k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Designing Experiences People Love
moore
138
23k
How to name files
jennybc
75
98k
Statistics for Hackers
jakevdp
793
220k
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