augmented reality in javascript
DESCRIPTION
Presented at JS.everywhere - San Francisco, 2013.TRANSCRIPT
![Page 1: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/1.jpg)
augmented reality.js
JS.everywhere, 2013Friday, October 25, 13
![Page 2: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/2.jpg)
@eduardolundgrenFriday, October 25, 13
![Page 3: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/3.jpg)
I’m from brazilFriday, October 25, 13
![Page 4: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/4.jpg)
Friday, October 25, 13
![Page 5: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/5.jpg)
I ♥ JavaScript
Friday, October 25, 13
![Page 6: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/6.jpg)
jQueryjQueryUI
YUI3Liferay
tracking.js
AlloyUI
jQuerySimulate
nodegh
Friday, October 25, 13
![Page 7: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/7.jpg)
jQueryjQueryUI
YUI3Liferay
tracking.js
AlloyUI
jQuerySimulate
nodegh
Friday, October 25, 13
![Page 8: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/8.jpg)
jQueryjQueryUI
YUI3Liferay
tracking.js
AlloyUI
jQuerySimulate
nodegh
Friday, October 25, 13
![Page 9: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/9.jpg)
jQueryjQueryUI
YUI3Liferay
tracking.js
AlloyUI
jQuerySimulate
nodegh
Friday, October 25, 13
![Page 10: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/10.jpg)
jQueryjQueryUI
YUI3Liferay
tracking.js
AlloyUI
jQuerySimulate
nodegh
Friday, October 25, 13
![Page 11: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/11.jpg)
jQueryjQueryUI
YUI3Liferay
tracking.js
AlloyUI
jQuerySimulate
nodegh
Friday, October 25, 13
![Page 12: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/12.jpg)
jQueryjQueryUI
YUI3Liferay
tracking.js
AlloyUI
jQuerySimulate
nodegh
Friday, October 25, 13
![Page 13: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/13.jpg)
jQueryjQueryUI
YUI3Liferay
tracking.js
AlloyUI
jQuerySimulate
nodegh
Friday, October 25, 13
![Page 14: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/14.jpg)
jQueryjQueryUI
YUI3Liferay
tracking.js
AlloyUI
jQuerySimulate
nodegh
Friday, October 25, 13
![Page 15: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/15.jpg)
today we’regoing to talk
about augmented
reality...Friday, October 25, 13
![Page 16: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/16.jpg)
Friday, October 25, 13
![Page 17: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/17.jpg)
...and how tointegrate different
HTML5 APIsFriday, October 25, 13
![Page 18: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/18.jpg)
augmented reality is
everywhere
Friday, October 25, 13
![Page 19: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/19.jpg)
first head-mounted displayFriday, October 25, 13
![Page 20: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/20.jpg)
google glassFriday, October 25, 13
![Page 21: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/21.jpg)
what is augmented reality?
Friday, October 25, 13
![Page 22: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/22.jpg)
terminatorFriday, October 25, 13
![Page 23: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/23.jpg)
terminatorFriday, October 25, 13
![Page 24: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/24.jpg)
what is visual tracking?
Friday, October 25, 13
![Page 25: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/25.jpg)
visual trackingFriday, October 25, 13
![Page 26: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/26.jpg)
how can you do it using
JavaScript?
Friday, October 25, 13
![Page 27: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/27.jpg)
1. capture webcam
Friday, October 25, 13
![Page 28: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/28.jpg)
Friday, October 25, 13
![Page 29: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/29.jpg)
dev.w3.org/2011/webrtc/editor/webrtc.html
Friday, October 25, 13
![Page 30: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/30.jpg)
Friday, October 25, 13
![Page 31: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/31.jpg)
navigator.getUserMedia({ video: true, audio: true}, onSuccess, onFail);
STEP 1
Access user's camera
Friday, October 25, 13
![Page 32: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/32.jpg)
2. play the captured video
Friday, October 25, 13
![Page 33: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/33.jpg)
Friday, October 25, 13
![Page 34: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/34.jpg)
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
![Page 35: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/35.jpg)
3. track a pattern of pixels
Friday, October 25, 13
![Page 36: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/36.jpg)
Friday, October 25, 13
![Page 37: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/37.jpg)
Friday, October 25, 13
![Page 38: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/38.jpg)
Friday, October 25, 13
![Page 39: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/39.jpg)
javascript typed arraysFriday, October 25, 13
![Page 40: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/40.jpg)
“Study the past if you would define the future”
- Confucius
Friday, October 25, 13
![Page 41: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/41.jpg)
fiducial markers
Friday, October 25, 13
![Page 42: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/42.jpg)
hitl.washington.edu/artoolkit
Friday, October 25, 13
![Page 43: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/43.jpg)
github.com/kig/JSARToolKit
Friday, October 25, 13
![Page 44: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/44.jpg)
soundstep.com/blog/experiments/jstracking/
Friday, October 25, 13
![Page 45: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/45.jpg)
soundstep.com/blog/experiments/jstracking/
Friday, October 25, 13
![Page 46: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/46.jpg)
bit.ly/XR0aGH
Friday, October 25, 13
![Page 47: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/47.jpg)
bit.ly/XR0aGH
Friday, October 25, 13
![Page 48: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/48.jpg)
what was the problem?
Friday, October 25, 13
![Page 49: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/49.jpg)
trackingjs.comFriday, October 25, 13
![Page 50: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/50.jpg)
eduardo.io/3F0d360z2q1PFriday, October 25, 13
![Page 51: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/51.jpg)
tracking.js features
Friday, October 25, 13
![Page 52: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/52.jpg)
Friday, October 25, 13
![Page 53: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/53.jpg)
Friday, October 25, 13
![Page 54: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/54.jpg)
eduardo.io/23033L0Q1i3zFriday, October 25, 13
![Page 55: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/55.jpg)
eduardo.io/23033L0Q1i3zFriday, October 25, 13
![Page 56: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/56.jpg)
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
![Page 57: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/57.jpg)
STEP 2COLOR TRACKING
Gets user's camera and renders it
var videoCamera = new tracking .VideoCamera() .render();
Friday, October 25, 13
![Page 58: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/58.jpg)
STEP 3COLOR TRACKING
Register tracking for yellow color
videoCamera.track({ type: 'color', color: 'yellow', onFound: function() {}, onNotFound: function() {}});
Friday, October 25, 13
![Page 59: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/59.jpg)
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
![Page 60: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/60.jpg)
Friday, October 25, 13
![Page 61: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/61.jpg)
eduardo.io/233C2J0Q3z0UFriday, October 25, 13
![Page 62: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/62.jpg)
eduardo.io/233C2J0Q3z0UFriday, October 25, 13
![Page 63: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/63.jpg)
STEP 1FACE DETECTION
Register human tracking for frontal face
videoCamera.track({ type: 'human', data: 'frontal_face', onFound: function() {}, onNotFound: function() {}});
Friday, October 25, 13
![Page 64: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/64.jpg)
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
![Page 65: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/65.jpg)
real world examples
Friday, October 25, 13
![Page 66: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/66.jpg)
github.com/auduno/headtrackr
Friday, October 25, 13
![Page 67: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/67.jpg)
webdesign.maratz.com/lab/responsivetypography
Friday, October 25, 13
![Page 68: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/68.jpg)
webdesign.maratz.com/lab/responsivetypography
Friday, October 25, 13
![Page 69: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/69.jpg)
auduno.github.io/headtrackr/examples/targets.html
Friday, October 25, 13
![Page 70: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/70.jpg)
auduno.github.io/headtrackr/examples/targets.html
Friday, October 25, 13
![Page 71: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/71.jpg)
alexhancock.github.io/street-facing
Friday, October 25, 13
![Page 72: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/72.jpg)
alexhancock.github.io/street-facing
Friday, October 25, 13
![Page 73: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/73.jpg)
markerless tracking
Friday, October 25, 13
![Page 74: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/74.jpg)
unifeye viewer
Friday, October 25, 13
![Page 75: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/75.jpg)
github.com/eduardolundgren/tracking.js
Friday, October 25, 13
![Page 76: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/76.jpg)
let’s see in action?
Friday, October 25, 13
![Page 77: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/77.jpg)
popularity
Friday, October 25, 13
![Page 78: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/78.jpg)
638 citiesFriday, October 25, 13
![Page 79: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/79.jpg)
445 tweetsFriday, October 25, 13
![Page 80: Augmented Reality in JavaScript](https://reader033.vdocument.in/reader033/viewer/2022060109/5551eab3b4c905f56f8b4d19/html5/thumbnails/80.jpg)
thank you :)@eduardolundgren
Friday, October 25, 13