augmented reality in javascript

augmented reality.js

JS.everywhere, 2013Friday, October 25, 13

@eduardolundgrenFriday, October 25, 13

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

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

I’m from brazilFriday, October 25, 13

Friday, October 25, 13

I ♥ JavaScript


jQueryjQueryUI

YUI3Liferay

tracking.js

AlloyUI

jQuerySimulate

nodegh


today we’regoing to talk

about augmented

reality...Friday, October 25, 13

...and how tointegrate different

HTML5 APIsFriday, October 25, 13

augmented reality is

everywhere


first head-mounted displayFriday, October 25, 13

google glassFriday, October 25, 13

what is augmented reality?


terminatorFriday, October 25, 13

what is visual tracking?


visual trackingFriday, October 25, 13

how can you do it using

JavaScript?


1. capture webcam


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


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

STEP 1

Access user's camera


2. play the captured video


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


3. track a pattern of pixels


javascript typed arraysFriday, October 25, 13

“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.comFriday, October 25, 13

eduardo.io/3F0d360z2q1PFriday, October 25, 13

tracking.js features


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>



Gets user's camera and renders it

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



Register tracking for yellow color

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



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/233C2J0Q3z0UFriday, October 25, 13

STEP 1FACE DETECTION

Register human tracking for frontal face

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


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); }}


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 citiesFriday, October 25, 13

445 tweetsFriday, October 25, 13

thank you :)@eduardolundgren


augmented reality in javascript

Technology

color tracking import

color tracking paint

var videocamera

human tracking

var pixels

visual tracking

yellow color videocamera

new tracking