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
630
7 Habits of Highly Productive Developers
zenorocha
1
410
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
530
What's new in the Liferay Community
zenorocha
0
700
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.2k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
1k
Como investir em... você!
zenorocha
1
580
Other Decks in Programming
See All in Programming
Six and a half ridiculous things to do with Quarkus
hollycummins
0
200
ALL CODE BASE ARE BELONG TO STUDY
uzulla
26
6.6k
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
Introduce Hono CLI
yusukebe
6
3k
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
210
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
All About Angular's New Signal Forms
manfredsteyer
PRO
0
200
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
7k
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
770
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
6
3.3k
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
The Invisible Side of Design
smashingmag
302
51k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Bash Introduction
62gerente
615
210k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
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