Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Augmented Reality in JavaScript

E190023b66e2b8aa73a842b106920c93?s=47 Zeno Rocha
April 02, 2013
Programming
13
11k

Augmented Reality in JavaScript

Presented at HTML5 Dev Conf - San Francisco, 2013.

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

April 02, 2013
Tweet

More Decks by Zeno Rocha

See All by Zeno Rocha
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
320
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
200
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
120
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
3
530
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
2
450
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
220
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
230
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
210
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
12
1.4k

Other Decks in Programming

See All in Programming
De266761b955b2636e454a1bc7a99ed4?s=48 masayaaoyama
1
530
C27317d1ebe4e4a01504acab9d87fe61?s=48 hellsquirrel
0
380
10467e82d1ff23f3be6ec26723a09101?s=48 mokagio
0
150
922f51d458d6ffee8578b9d3ab0a52b6?s=48 ug
0
580
E6311847f4fe11546a24eec9e7a403a5?s=48 startjapan
4
490
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
250
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
2
1.6k
2dea59f12b07aa47a8604dc21ba27036?s=48 izm
0
500
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
310
06b10e0c3e87349fa6cc74a63493eb9c?s=48 okmttdhr
2
220
Eb6733f8d1fe3c983ff11b830945eccb?s=48 mikito
1
200
45477cf77ae1a156e65fbc860078bf59?s=48 xu3u4
0
320

Featured

See All Featured
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
221
15k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
2k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
25
1.5k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
204
38k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
233
920k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
168
7.5k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
10
560
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
104
6.4k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
84
8k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
293
28k
A9179349dd2bdc67f377719f56d85656?s=48 garrettdimon
289
110k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
72
3.7k

Transcript

  1. augmented reality.js San Francisco, 2013.

  2. None

  3. I’m from brazil

  4. no, I don’t samba

  5. None
  6. None

  7. I ♥ HTML5

  8. html5-pro.com/wormz

  9. I ♥ opensource

  10. browserdiet.com

  11. today we’re going to talk about augmented reality...

  12. None

  13. ...and how to integrate different HTML5 APIs

  14. augumented reality is everywhere, or it will be... augmented reality

    is (or at least will be) everywhere

  15. before it was cool used Google Glass

  16. what is augmented reality?

  17. None

  18. how can you do it using javascript?

  19. mzl.la/ilyX7k

  20. 1. capture webcam

  21. None

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

  23. None

  24. Access user's camera and microphone navigator.getUserMedia({ video: true, audio: true

    }, onSuccess, onFail); STEP 1

  25. 2. play the captured video

  26. <video>

  27. 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 }; } STEP 2

  28. 3. track a pattern of pixels

  29. <canvas>

  30. <video> <canvas>

  31. None

  32. fiducial markers

  33. github.com/kig/JSARToolKit

  34. libspark.org/wiki/saqoosha/FLARToolKit/en

  35. hitl.washington.edu/artoolkit

  36. soundstep.com/blog/experiments/jstracking/

  37. bit.ly/XR0aGH

  38. bit.ly/124FT3A FIDUCIAL MARKERS

  39. None

  40. <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>
  41. None

  42. face detection

  43. webdesign.maratz.com/lab/responsivetypography RESPONSIVE TYPOGRAPHY

  44. github.com/auduno/headtrackr

  45. auduno.github.com/headtrackr/examples/targets.html HEADTRACKR TARGETS

  46. None
  47. None

  48. @eduardolundgren (Liferay)

  49. trackingjs.com

  50. bit.ly/YVPz3e

  51. bit.ly/ZSZuUd TRACKING.JS SINGLE CONTROLLER

  52. None

  53. Imports tracking.js core Imports tracking.js color module <script src="tracker/color.js"></script> <script

    src="tracking.js"></script> STEP 1 SINGLE CONTROLLER

  54. Gets user's camera and renders it var videoCamera = new

    tracking .VideoCamera() .render(); STEP 2 SINGLE CONTROLLER

  55. Hides video camera and renders a canvas from it videoCamera

    = videoCamera .hide() .renderVideoCanvas(); STEP 3 SINGLE CONTROLLER

  56. STEP 4 SINGLE CONTROLLER Instantiates tracking by magenta color videoCamera.track({

    type: 'color', color: 'magenta', onFound: function() {}, onNotFound: function() {} });

  57. STEP 5 SINGLE CONTROLLER Paints with magenta 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); }

  58. bit.ly/118nzaL TRACKING.JS MULTIPLE CONTROLLERS

  59. None

  60. Gets user's camera and renders it var videoCamera = new

    tracking .VideoCamera() .render(); STEP 1 MULTIPLE CONTROLLERS

  61. Hides video camera and renders a canvas from it videoCamera

    = videoCamera .hide() .renderVideoCanvas(); STEP 2 MULTIPLE CONTROLLERS

  62. STEP 3 MULTIPLE CONTROLLERS Instantiates tracking by magenta color videoCamera.track({

    type: 'color', color: 'magenta', onFound: function() {}, onNotFound: function() {} });

  63. STEP 4 MULTIPLE CONTROLLERS Draws a square around tracked area

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

  64. STEP 5 MULTIPLE CONTROLLERS Instantiates tracking by cyan color videoCamera.track({

    type: 'color', color: 'cyan', onFound: function() {}, onNotFound: function() {} });

  65. STEP 6 MULTIPLE CONTROLLERS Draws a square around tracked area

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

  66. bit.ly/10mIS6h TRACKING.JS DRAW SOMETHING

  67. None

  68. bit.ly/XR5vha TRACKING.JS MINECRAFT

  69. None
  70. None

  71. bit.ly/X6LuGj TRACKING.JS GLASSES

  72. IT’S UP TO YOU!

  73. None

  74. thanks :) zenorocha.com