Augmented Reality in JavaScript

augmented
reality.js
JS.everywhere, 2013
Friday, October 25, 13

@eduardolundgren

I’m from brazil

I ♥ JavaScript


jQuery

tracking.js

AlloyUI
jQueryUI
YUI3 nodegh
Liferay jQuery
Simulate


today we’re
going to talk
about
augmented
reality...

...and how to
integrate
different
HTML5 APIs

augmented
reality is
everywhere

first head-mounted display

google glass

what is
augmented
reality?

terminator

what is
visual
tracking?

visual tracking

how can you
do it using
JavaScript?

1. capture
webcam

dev.w3.org/2011/webrtc/editor/webrtc.html

STEP 1
Access user's camera
navigator.getUserMedia({
video: true,
audio: true
}, onSuccess, onFail);


2. play the
captured video

STEP 2
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
};
}


3. track a
pattern of
pixels

javascript typed arrays

“Study the past if
you would define
the future”
- Confucius


fiducial
markers

hitl.washington.edu/artoolkit

github.com/kig/JSARToolKit

soundstep.com/blog/experiments/jstracking/

bit.ly/XR0aGH

what was
the problem?

trackingjs.com

eduardo.io/3F0d360z2q1P

tracking.js
features

eduardo.io/23033L0Q1i3z

STEP 1

COLOR TRACKING
Import tracking.js core
<script src="tracking.js"></script>

Import tracking.js color module
<script src="tracker/color.js"></script>


STEP 2

COLOR TRACKING
Gets user's camera and renders it
var videoCamera = new tracking
.VideoCamera()
.render();


STEP 3

COLOR TRACKING
Register tracking for yellow color
videoCamera.track({
type: 'color',
color: 'yellow',
onFound: function() {},
onNotFound: function() {}
});

STEP 4

COLOR TRACKING
Paint 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);
}


eduardo.io/233C2J0Q3z0U

STEP 1

FACE DETECTION
Register human tracking for frontal face
videoCamera.track({
type: 'human',
data: 'frontal_face',
onFound: function() {},
onNotFound: function() {}
});

STEP 2

FACE DETECTION
Paint all detected faces rectangles
onFound: function(track) {
for (var i = 0, len = track.length; i < len; i++) {
var rect = track[i];
ctx.strokeStyle = "rgb(0,255,0)";
ctx.strokeRect(
rect.x, rect.y, rect.size, rect.size);
}
}


real world
examples

github.com/auduno/headtrackr

webdesign.maratz.com/lab/responsivetypography

auduno.github.io/headtrackr/examples/targets.html

alexhancock.github.io/street-facing

markerless
tracking

unifeye viewer

github.com/eduardolundgren/tracking.js

let’s see
in action?

popularity


638 cities

445 tweets

thank you :)
@eduardolundgren


Augmented Reality in JavaScript

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Augmented Reality in JavaScript

Semelhante a Augmented Reality in JavaScript (11)

Último

Último (20)

Augmented Reality in JavaScript