Augmented Reality.js

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

@eduardolundgren Friday, October 25, 13

I’m from brazil Friday, October 25, 13

Friday, October 25, 13

I — JavaScript Friday, October 25, 13

jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh Friday,
October 25, 13

today we’re going to talk about augmented reality... Friday, October
25, 13

...and how to integrate different HTML5 APIs Friday, October 25,
13

augmented reality is everywhere Friday, October 25, 13

first head-mounted display Friday, October 25, 13

google glass Friday, October 25, 13

what is augmented reality? Friday, October 25, 13

terminator Friday, October 25, 13

what is visual tracking? Friday, October 25, 13

visual tracking Friday, October 25, 13

how can you do it using JavaScript? Friday, October 25,
13

1. capture webcam Friday, October 25, 13

dev.w3.org/2011/webrtc/editor/webrtc.html 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

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 }; } Friday, October 25, 13

3. track a pattern of pixels Friday, October 25, 13

javascript typed arrays Friday, 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

bit.ly/XR0aGH Friday, October 25, 13

what was the problem? Friday, October 25, 13

trackingjs.com Friday, October 25, 13

eduardo.io/3F0d360z2q1P Friday, October 25, 13

tracking.js features Friday, October 25, 13

eduardo.io/23033L0Q1i3z Friday, October 25, 13

STEP 1 COLOR 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 2 COLOR TRACKING Gets user's camera and renders it
var videoCamera = new tracking .VideoCamera() .render(); Friday, October 25, 13

STEP 3 COLOR TRACKING Register tracking for yellow color videoCamera.track({
type: 'color', color: 'yellow', onFound: function() {}, onNotFound: function() {} }); Friday, October 25, 13

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); } Friday, October 25, 13

eduardo.io/233C2J0Q3z0U Friday, October 25, 13

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

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

auduno.github.io/headtrackr/examples/targets.html 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 cities Friday, October 25, 13

445 tweets Friday, October 25, 13

thank you :) @eduardolundgren Friday, October 25, 13

Augmented Reality.js

Augmented Reality.js

More Decks by Eduardo Lundgren

Other Decks in Technology

Featured

Transcript