Presented at HTML5 Dev Conf - San Francisco, 2013.
augmentedreality.jsSan Francisco, 2013.
View Slide
I’m from brazil
no, I don’t samba
I ♥ HTML5
html5-pro.com/wormz
I ♥ opensource
browserdiet.com
today we’regoing totalk aboutaugmentedreality...
...and how tointegratedifferentHTML5 APIs
augumented reality is everywhere,or it will be...augmentedreality is(or at leastwill be)everywhere
before it was coolused Google Glass
what isaugmentedreality?
how can youdo it usingjavascript?
mzl.la/ilyX7k
1. capturewebcam
dev.w3.org/2011/webrtc/editor/webrtc.html
Access user's camera and microphonenavigator.getUserMedia({video: true,audio: true}, onSuccess, onFail);STEP 1
2. play thecapturedvideo
Play 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};}STEP 2
3. track apattern ofpixels
fiducialmarkers
github.com/kig/JSARToolKit
libspark.org/wiki/saqoosha/FLARToolKit/en
hitl.washington.edu/artoolkit
soundstep.com/blog/experiments/jstracking/
bit.ly/XR0aGH
bit.ly/124FT3AFIDUCIALMARKERS
face detection
webdesign.maratz.com/lab/responsivetypographyRESPONSIVETYPOGRAPHY
github.com/auduno/headtrackr
auduno.github.com/headtrackr/examples/targets.htmlHEADTRACKRTARGETS
@eduardolundgren (Liferay)
trackingjs.com
bit.ly/YVPz3e
bit.ly/ZSZuUdTRACKING.JSSINGLE CONTROLLER
Imports tracking.js coreImports tracking.js color moduleSTEP 1SINGLE CONTROLLER
Gets user's camera and renders itvar videoCamera = new tracking.VideoCamera().render();STEP 2SINGLE CONTROLLER
Hides video camera and renders a canvas from itvideoCamera = videoCamera.hide().renderVideoCanvas();STEP 3SINGLE CONTROLLER
STEP 4SINGLE CONTROLLERInstantiates tracking by magenta colorvideoCamera.track({type: 'color',color: 'magenta',onFound: function() {},onNotFound: function() {}});
STEP 5SINGLE CONTROLLERPaints with magenta all detected pixelsonFound: 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);}
bit.ly/118nzaLTRACKING.JSMULTIPLE CONTROLLERS
Gets user's camera and renders itvar videoCamera = new tracking.VideoCamera().render();STEP 1MULTIPLE CONTROLLERS
Hides video camera and renders a canvas from itvideoCamera = videoCamera.hide().renderVideoCanvas();STEP 2MULTIPLE CONTROLLERS
STEP 3MULTIPLE CONTROLLERSInstantiates tracking by magenta colorvideoCamera.track({type: 'color',color: 'magenta',onFound: function() {},onNotFound: function() {}});
STEP 4MULTIPLE CONTROLLERSDraws a square around tracked areaonFound: function(track) {var size = 60 - track.z;var ctx = videoCamera.canvas.context;ctx.strokeStyle = "rgb(255,0,255)";ctx.lineWidth = 3;ctx.strokeRect(track.x - size*0.5, track.y - size*0.5,size, size);}
STEP 5MULTIPLE CONTROLLERSInstantiates tracking by cyan colorvideoCamera.track({type: 'color',color: 'cyan',onFound: function() {},onNotFound: function() {}});
STEP 6MULTIPLE CONTROLLERSDraws a square around tracked areaonFound: function(track) {var size = 60 - track.z;var ctx = videoCamera.canvas.context;ctx.strokeStyle = "rgb(0,255,255)";ctx.lineWidth = 3;ctx.strokeRect(track.x - size*0.5, track.y - size*0.5,size, size);}
bit.ly/10mIS6hTRACKING.JSDRAW SOMETHING
bit.ly/XR5vhaTRACKING.JSMINECRAFT
bit.ly/X6LuGjTRACKING.JSGLASSES
IT’S UP TO YOU!
thanks :)zenorocha.com