Slide 1
Slide 1 text
augmented
reality.js
San Francisco, 2013.
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
I’m from brazil
Slide 4
Slide 4 text
no, I don’t samba
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
I ♥ HTML5
Slide 8
Slide 8 text
html5-pro.com/wormz
Slide 9
Slide 9 text
I ♥ opensource
Slide 10
Slide 10 text
browserdiet.com
Slide 11
Slide 11 text
today we’re
going to
talk about
augmented
reality...
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
...and how to
integrate
different
HTML5 APIs
Slide 14
Slide 14 text
augumented reality is everywhere,
or it will be...
augmented
reality is
(or at least
will be)
everywhere
Slide 15
Slide 15 text
before it was cool
used Google Glass
Slide 16
Slide 16 text
what is
augmented
reality?
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
how can you
do it using
javascript?
Slide 19
Slide 19 text
mzl.la/ilyX7k
Slide 20
Slide 20 text
1. capture
webcam
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
dev.w3.org/2011/webrtc/editor/webrtc.html
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Access user's camera and microphone
navigator.getUserMedia({
video: true,
audio: true
}, onSuccess, onFail);
STEP 1
Slide 25
Slide 25 text
2. play the
captured
video
Slide 26
Slide 26 text
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
3. track a
pattern of
pixels
Slide 29
Slide 29 text
Slide 30
Slide 30 text
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
fiducial
markers
Slide 33
Slide 33 text
github.com/kig/JSARToolKit
Slide 34
Slide 34 text
libspark.org/wiki/saqoosha/FLARToolKit/en
Slide 35
Slide 35 text
hitl.washington.edu/artoolkit
Slide 36
Slide 36 text
soundstep.com/blog/experiments/jstracking/
Slide 37
Slide 37 text
bit.ly/XR0aGH
Slide 38
Slide 38 text
bit.ly/124FT3A
FIDUCIAL
MARKERS
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
face detection
Slide 43
Slide 43 text
webdesign.maratz.com/lab/responsivetypography
RESPONSIVE
TYPOGRAPHY
Slide 44
Slide 44 text
github.com/auduno/headtrackr
Slide 45
Slide 45 text
auduno.github.com/headtrackr/examples/targets.html
HEADTRACKR
TARGETS
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
@eduardolundgren (Liferay)
Slide 49
Slide 49 text
trackingjs.com
Slide 50
Slide 50 text
bit.ly/YVPz3e
Slide 51
Slide 51 text
bit.ly/ZSZuUd
TRACKING.JS
SINGLE CONTROLLER
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
Imports tracking.js core
Imports tracking.js color module
STEP 1
SINGLE CONTROLLER
Slide 54
Slide 54 text
Gets user's camera and renders it
var videoCamera = new tracking
.VideoCamera()
.render();
STEP 2
SINGLE CONTROLLER
Slide 55
Slide 55 text
Hides video camera and renders a canvas from it
videoCamera = videoCamera
.hide()
.renderVideoCanvas();
STEP 3
SINGLE CONTROLLER
Slide 56
Slide 56 text
STEP 4
SINGLE CONTROLLER
Instantiates tracking by magenta color
videoCamera.track({
type: 'color',
color: 'magenta',
onFound: function() {},
onNotFound: function() {}
});
Slide 57
Slide 57 text
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);
}
Slide 58
Slide 58 text
bit.ly/118nzaL
TRACKING.JS
MULTIPLE CONTROLLERS
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
Gets user's camera and renders it
var videoCamera = new tracking
.VideoCamera()
.render();
STEP 1
MULTIPLE CONTROLLERS
Slide 61
Slide 61 text
Hides video camera and renders a canvas from it
videoCamera = videoCamera
.hide()
.renderVideoCanvas();
STEP 2
MULTIPLE CONTROLLERS
Slide 62
Slide 62 text
STEP 3
MULTIPLE CONTROLLERS
Instantiates tracking by magenta color
videoCamera.track({
type: 'color',
color: 'magenta',
onFound: function() {},
onNotFound: function() {}
});
Slide 63
Slide 63 text
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);
}
Slide 64
Slide 64 text
STEP 5
MULTIPLE CONTROLLERS
Instantiates tracking by cyan color
videoCamera.track({
type: 'color',
color: 'cyan',
onFound: function() {},
onNotFound: function() {}
});
Slide 65
Slide 65 text
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);
}
Slide 66
Slide 66 text
bit.ly/10mIS6h
TRACKING.JS
DRAW SOMETHING
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
bit.ly/XR5vha
TRACKING.JS
MINECRAFT
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
bit.ly/X6LuGj
TRACKING.JS
GLASSES
Slide 72
Slide 72 text
IT’S UP TO YOU!
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
thanks :)
zenorocha.com