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
390
7 Habits of Highly Productive Developers
zenorocha
1
250
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
280
What's new in the Liferay Community
zenorocha
0
530
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
430
How Liferay fits into the real of latest technologies
zenorocha
0
350
Estoicismo e JavaScript
zenorocha
3
840
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
710
Como investir em... você!
zenorocha
1
450
Other Decks in Programming
See All in Programming
期限が近づいてきた!Privacy Manifests対応
ryunakayama
5
3.1k
before_rails_girls_after_rails_girls
maimux2x
0
300
上手な探索的テストとその上達方法について
matsu802
1
430
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
1.4k
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
210
私がエッジを使う理由
chimame
9
3.6k
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
0
260
Static Analysis Automation for Hunting Vulnerable Kernel Drivers
takahiro_haruyama
1
1.4k
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
150
プログラミングを楽しもう! / Enjoy Programming
chobishiba
1
700
ADRを一年運用してみた/our_story_about_adr
hanhan1978
3
1.1k
PHPカンファレンス関西2024でLTとスタッフした
ohmori_yusuke
2
120
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Raft: Consensus for Rubyists
vanstee
130
6.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
Automating Front-end Workflow
addyosmani
1353
200k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Designing Experiences People Love
moore
135
23k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
11
1.4k
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