Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
augmented  reality.js      San Francisco, 2013.
I’m from brazil
no, I don’t samba
I ♥ HTML5
html5-pro.com/wormz
I ♥ opensource
browserdiet.com
today we’re    going to  talk aboutaugmented    reality...
...and how to     integrate      differentHTML5 APIs
augmented  reality is (or at leastaugumented reality is everywhere,         or it will be...   will be)everywhere
used Google Glassbefore it was cool
what isaugmentedreality?
how can youdo it usingjavascript?
mzl.la/ilyX7k
1. capturewebcam
dev.w3.org/2011/webrtc/editor/webrtc.html
STEP 1Access users camera and microphonenavigator.getUserMedia({  video: true,  audio: true}, onSuccess, onFail);
2. play thecapturedvideo
<video>
STEP 2Play webcams content into a video elementfunction onSuccess(stream) {  var video = document.querySelector(video);  v...
3. track apattern ofpixels
<canvas>
<video><canvas>
fiducialmarkers
github.com/kig/JSARToolKit
libspark.org/wiki/saqoosha/FLARToolKit/en
hitl.washington.edu/artoolkit
soundstep.com/blog/experiments/jstracking/
bit.ly/XR0aGH
FIDUCIALMARKERS bit.ly/124FT3A
<html><head><script src="../../src/NyAs3Utils.js"></script><script src="../../src/FLARArrayUtil.js"></script><script src="...
face detection
RESPONSIVE    TYPOGRAPHYwebdesign.maratz.com/lab/responsivetypography
github.com/auduno/headtrackr
HEADTRACKR        TARGETSauduno.github.com/headtrackr/examples/targets.html
@eduardolundgren (Liferay)
trackingjs.com
bit.ly/YVPz3e
TRACKING.JSSINGLE CONTROLLER      bit.ly/ZSZuUd
STEP 1   SINGLE CONTROLLERImports tracking.js core<script src="tracking.js"></script>Imports tracking.js color module<scri...
STEP 2   SINGLE CONTROLLERGets users camera and renders itvar videoCamera = new tracking                  .VideoCamera()  ...
STEP 3   SINGLE CONTROLLERHides video camera and renders a canvas from itvideoCamera = videoCamera             .hide()    ...
STEP 4   SINGLE CONTROLLERInstantiates tracking by magenta colorvideoCamera.track({  type: color,  color: magenta,  onFoun...
STEP 5     SINGLE CONTROLLERPaints with magenta all detected pixelsonFound: function(track) {  var pixels = track.pixels, ...
TRACKING.JSMULTIPLE CONTROLLERS       bit.ly/118nzaL
STEP 1MULTIPLE CONTROLLERSGets users camera and renders itvar videoCamera = new tracking                  .VideoCamera()  ...
STEP 2MULTIPLE CONTROLLERSHides video camera and renders a canvas from itvideoCamera = videoCamera             .hide()    ...
STEP 3MULTIPLE CONTROLLERSInstantiates tracking by magenta colorvideoCamera.track({  type: color,  color: magenta,  onFoun...
STEP 4MULTIPLE CONTROLLERSDraws a square around tracked areaonFound: function(track) {  var size = 60 - track.z;  var ctx ...
STEP 5MULTIPLE CONTROLLERSInstantiates tracking by cyan colorvideoCamera.track({  type: color,  color: cyan,  onFound: fun...
STEP 6MULTIPLE CONTROLLERSDraws a square around tracked areaonFound: function(track) {  var size = 60 - track.z;  var ctx ...
TRACKING.JSDRAW SOMETHING    bit.ly/10mIS6h
TRACKING.JS MINECRAFT   bit.ly/XR5vha
TRACKING.JS  GLASSES   bit.ly/X6LuGj
IT’S UP TO YOU!
thanks :)zenorocha.com
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Upcoming SlideShare
Loading in …5
×

Augmented Reality in JavaScript

854 views

Published on

Presented at HTML5 Dev Conf - San Francisco, 2013.

Published in: Technology
  • Be the first to comment

Augmented Reality in JavaScript

  1. 1. augmented reality.js San Francisco, 2013.
  2. 2. I’m from brazil
  3. 3. no, I don’t samba
  4. 4. I ♥ HTML5
  5. 5. html5-pro.com/wormz
  6. 6. I ♥ opensource
  7. 7. browserdiet.com
  8. 8. today we’re going to talk aboutaugmented reality...
  9. 9. ...and how to integrate differentHTML5 APIs
  10. 10. augmented reality is (or at leastaugumented reality is everywhere, or it will be... will be)everywhere
  11. 11. used Google Glassbefore it was cool
  12. 12. what isaugmentedreality?
  13. 13. how can youdo it usingjavascript?
  14. 14. mzl.la/ilyX7k
  15. 15. 1. capturewebcam
  16. 16. dev.w3.org/2011/webrtc/editor/webrtc.html
  17. 17. STEP 1Access users camera and microphonenavigator.getUserMedia({ video: true, audio: true}, onSuccess, onFail);
  18. 18. 2. play thecapturedvideo
  19. 19. <video>
  20. 20. STEP 2Play webcams content into a video elementfunction onSuccess(stream) { var video = document.querySelector(video); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Ready };}
  21. 21. 3. track apattern ofpixels
  22. 22. <canvas>
  23. 23. <video><canvas>
  24. 24. fiducialmarkers
  25. 25. github.com/kig/JSARToolKit
  26. 26. libspark.org/wiki/saqoosha/FLARToolKit/en
  27. 27. hitl.washington.edu/artoolkit
  28. 28. soundstep.com/blog/experiments/jstracking/
  29. 29. bit.ly/XR0aGH
  30. 30. FIDUCIALMARKERS bit.ly/124FT3A
  31. 31. <html><head><script src="../../src/NyAs3Utils.js"></script><script src="../../src/FLARArrayUtil.js"></script><script src="../../src/FLARException.js"></script><script src="../../src/FLARMat.js"></script><script src="../../src/FLARRgbPixelReader.js"></script><script src="../../src/NyARHistogramAnalyzer.js"></script><script src="../../src/NyARPca2d.js"></script><script src="../../src/NyARRasterReader.js"></script><script src="../../src/NyARTypes.js"></script><script src="../../src/FLARRasterFilter.js"></script><script src="../../src/FLARTypes.js"></script><script src="../../src/NyARLabel.js"></script><script src="../../src/FLARLabeling.js"></script><script src="../../src/NyARParam.js"></script><script src="../../src/FLARParam.js"></script><script src="../../src/NyARRaster.js"></script><script src="../../src/FLARRaster.js"></script><script src="../../src/NyARCode.js"></script><script src="../../src/FLARCode.js"></script><script src="../../src/NyARMatch.js"></script><script src="../../src/NyARRasterAnalyzer.js"></script><script src="../../src/FLARRasterAnalyzer.js"></script><script src="../../src/NyARRasterFilter.js"></script><script src="../../src/NyARSquareDetect.js"></script><script src="../../src/FLARSquareDetect.js"></script><script src="../../src/NyARTransMat.js"></script><script src="../../src/FLARTransMat.js"></script>
  32. 32. face detection
  33. 33. RESPONSIVE TYPOGRAPHYwebdesign.maratz.com/lab/responsivetypography
  34. 34. github.com/auduno/headtrackr
  35. 35. HEADTRACKR TARGETSauduno.github.com/headtrackr/examples/targets.html
  36. 36. @eduardolundgren (Liferay)
  37. 37. trackingjs.com
  38. 38. bit.ly/YVPz3e
  39. 39. TRACKING.JSSINGLE CONTROLLER bit.ly/ZSZuUd
  40. 40. STEP 1 SINGLE CONTROLLERImports tracking.js core<script src="tracking.js"></script>Imports tracking.js color module<script src="tracker/color.js"></script>
  41. 41. STEP 2 SINGLE CONTROLLERGets users camera and renders itvar videoCamera = new tracking .VideoCamera() .render();
  42. 42. STEP 3 SINGLE CONTROLLERHides video camera and renders a canvas from itvideoCamera = videoCamera .hide() .renderVideoCanvas();
  43. 43. STEP 4 SINGLE CONTROLLERInstantiates tracking by magenta colorvideoCamera.track({ type: color, color: magenta, onFound: function() {}, onNotFound: function() {}});
  44. 44. STEP 5 SINGLE 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);}
  45. 45. TRACKING.JSMULTIPLE CONTROLLERS bit.ly/118nzaL
  46. 46. STEP 1MULTIPLE CONTROLLERSGets users camera and renders itvar videoCamera = new tracking .VideoCamera() .render();
  47. 47. STEP 2MULTIPLE CONTROLLERSHides video camera and renders a canvas from itvideoCamera = videoCamera .hide() .renderVideoCanvas();
  48. 48. STEP 3MULTIPLE CONTROLLERSInstantiates tracking by magenta colorvideoCamera.track({ type: color, color: magenta, onFound: function() {}, onNotFound: function() {}});
  49. 49. 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);}
  50. 50. STEP 5MULTIPLE CONTROLLERSInstantiates tracking by cyan colorvideoCamera.track({ type: color, color: cyan, onFound: function() {}, onNotFound: function() {}});
  51. 51. 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);}
  52. 52. TRACKING.JSDRAW SOMETHING bit.ly/10mIS6h
  53. 53. TRACKING.JS MINECRAFT bit.ly/XR5vha
  54. 54. TRACKING.JS GLASSES bit.ly/X6LuGj
  55. 55. IT’S UP TO YOU!
  56. 56. thanks :)zenorocha.com

×