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
400
7 Habits of Highly Productive Developers
zenorocha
1
260
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
290
What's new in the Liferay Community
zenorocha
0
540
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
440
How Liferay fits into the real of latest technologies
zenorocha
0
370
Estoicismo e JavaScript
zenorocha
3
850
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
740
Como investir em... você!
zenorocha
1
460
Other Decks in Programming
See All in Programming
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
pixivアプリでマルチモジュールを実現するまで
gatosyocora
1
130
Ruby Function Composition
bkuhlmann
1
320
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.7k
プールにゆこう
irof
2
120
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
9
5.6k
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
350
Elm 0.19.0 Changes
bkuhlmann
0
480
Hanami and htmx
bkuhlmann
0
190
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
Featured
See All Featured
Building an army of robots
kneath
300
41k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Teambox: Starting and Learning
jrom
128
8.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Rails Girls Zürich Keynote
gr2m
91
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
The Cost Of JavaScript in 2023
addyosmani
13
3.8k
Fireside Chat
paigeccino
19
2.6k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
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