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
340
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
230
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
140
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
3
550
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
2
470
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
240
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
250
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
230
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
11
1.4k

Other Decks in Programming

See All in Programming
023b04c98f39cc041293d780352432ff?s=48 koic
0
480
B546a9b97d993392e4b22b74b99b91fe?s=48 javiergs
PRO
0
130
977c74bb044a9d4fa90b305824eda390?s=48 olivergierke
3
350
B32c18d03687577950da29542d0a9180?s=48 kurumai
1
630
5059d3f370ad7e1f4d8de4be79ae1a2c?s=48 rvirus0817
0
610
79fc33e55cacc42beef647541de24d58?s=48 yasuakiomokawa
2
350
Ca1357a6e793898d30cec23068c3cb36?s=48 shingen29
0
300
0eb5ff24722856be0e9c4f66faf363be?s=48 greendog
1
3.4k
B3a7c0d5c590642dbce68bce8929a2df?s=48 david74chou
1
150
D76231a2114896dfcc7b79ac69558b79?s=48 yosuke_furukawa
PRO
29
9k
37b01da9150c1e789f35771b06d36890?s=48 morimorihoge
0
180
9b4e080285fdb22f989442f2c824e99c?s=48 yoshii27
0
7.6k

Featured

See All Featured
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
122
16k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
448
36k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
14
660
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
400k
282d599b414022eba5096510f675b6e2?s=48 chrislema
174
14k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
56
9.6k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
147
20k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
99
5.7k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
331
36k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
222
120k

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