Augmented Reality in JavaScript

augmented reality.js

JS.everywhere, 2013Friday, October 25, 13

@eduardolundgrenFriday, October 25, 13

I’m from brazilFriday, October 25, 13

Friday, October 25, 13

I ♥ JavaScript

Friday, October 25, 13

jQueryjQueryUI

YUI3Liferay

tracking.js

AlloyUI

jQuerySimulate

nodegh

Friday, October 25, 13

jQueryjQueryUI

YUI3Liferay

tracking.js

AlloyUI

jQuerySimulate

nodegh

Friday, October 25, 13

jQueryjQueryUI

YUI3Liferay

tracking.js

AlloyUI

jQuerySimulate

nodegh

Friday, October 25, 13

jQueryjQueryUI

YUI3Liferay

tracking.js

AlloyUI

jQuerySimulate

nodegh

Friday, October 25, 13

jQueryjQueryUI

YUI3Liferay

tracking.js

AlloyUI

jQuerySimulate

nodegh

Friday, October 25, 13

jQueryjQueryUI

YUI3Liferay

tracking.js

AlloyUI

jQuerySimulate

nodegh

Friday, October 25, 13

jQueryjQueryUI

YUI3Liferay

tracking.js

AlloyUI

jQuerySimulate

nodegh

Friday, October 25, 13

jQueryjQueryUI

YUI3Liferay

tracking.js

AlloyUI

jQuerySimulate

nodegh

Friday, October 25, 13

jQueryjQueryUI

YUI3Liferay

tracking.js

AlloyUI

jQuerySimulate

nodegh

Friday, October 25, 13

today we’regoing to talk

about augmented

reality...Friday, October 25, 13

Friday, October 25, 13

...and how tointegrate different

HTML5 APIsFriday, October 25, 13

augmented reality is

everywhere

Friday, October 25, 13

first head-mounted displayFriday, October 25, 13

google glassFriday, October 25, 13

what is augmented reality?

Friday, October 25, 13

terminatorFriday, October 25, 13

terminatorFriday, October 25, 13

what is visual tracking?

Friday, October 25, 13

visual trackingFriday, October 25, 13

how can you do it using

JavaScript?

Friday, October 25, 13

1. capture webcam

Friday, October 25, 13

Friday, October 25, 13

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

Friday, October 25, 13

Friday, October 25, 13

navigator.getUserMedia({ video: true, audio: true}, onSuccess, onFail);

STEP 1

Access user's camera

Friday, October 25, 13

2. play the captured video

Friday, October 25, 13

Friday, October 25, 13

STEP 2Play webcam's content into a video elementfunction onSuccess(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Ready };}

Friday, October 25, 13

3. track a pattern of pixels

Friday, October 25, 13

Friday, October 25, 13

Friday, October 25, 13

Friday, October 25, 13

javascript typed arraysFriday, October 25, 13

“Study the past if you would define the future”

- Confucius

Friday, October 25, 13

fiducial markers

Friday, October 25, 13

hitl.washington.edu/artoolkit

Friday, October 25, 13

github.com/kig/JSARToolKit

Friday, October 25, 13

soundstep.com/blog/experiments/jstracking/

Friday, October 25, 13

soundstep.com/blog/experiments/jstracking/

Friday, October 25, 13

bit.ly/XR0aGH

Friday, October 25, 13

bit.ly/XR0aGH

Friday, October 25, 13

what was the problem?

Friday, October 25, 13

trackingjs.comFriday, October 25, 13

eduardo.io/3F0d360z2q1PFriday, October 25, 13

tracking.js features

Friday, October 25, 13

Friday, October 25, 13

Friday, October 25, 13

eduardo.io/23033L0Q1i3zFriday, October 25, 13

eduardo.io/23033L0Q1i3zFriday, October 25, 13

STEP 1COLOR TRACKING

Import tracking.js core

<script src="tracking.js"></script>

Import tracking.js color module

<script src="tracker/color.js"></script>

Friday, October 25, 13

STEP 2COLOR TRACKING

Gets user's camera and renders it

var videoCamera = new tracking .VideoCamera() .render();

Friday, October 25, 13

STEP 3COLOR TRACKING

Register tracking for yellow color

videoCamera.track({ type: 'color', color: 'yellow', onFound: function() {}, onNotFound: function() {}});

Friday, October 25, 13

STEP 4COLOR 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);}

Friday, October 25, 13

Friday, October 25, 13

eduardo.io/233C2J0Q3z0UFriday, October 25, 13

eduardo.io/233C2J0Q3z0UFriday, October 25, 13

STEP 1FACE DETECTION

Register human tracking for frontal face

videoCamera.track({ type: 'human', data: 'frontal_face', onFound: function() {}, onNotFound: function() {}});

Friday, October 25, 13

STEP 2FACE DETECTION

Paint all detected faces rectanglesonFound: 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); }}

Friday, October 25, 13

real world examples

Friday, October 25, 13

github.com/auduno/headtrackr

Friday, October 25, 13

webdesign.maratz.com/lab/responsivetypography

Friday, October 25, 13

webdesign.maratz.com/lab/responsivetypography

Friday, October 25, 13

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

Friday, October 25, 13

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

Friday, October 25, 13

alexhancock.github.io/street-facing

Friday, October 25, 13

alexhancock.github.io/street-facing

Friday, October 25, 13

markerless tracking

Friday, October 25, 13

unifeye viewer

Friday, October 25, 13

github.com/eduardolundgren/tracking.js

Friday, October 25, 13

let’s see in action?

Friday, October 25, 13

popularity

Friday, October 25, 13

638 citiesFriday, October 25, 13

445 tweetsFriday, October 25, 13

thank you :)@eduardolundgren

Friday, October 25, 13