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
300
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
190
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
100
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
3
500
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
2
430
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
220
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
0
220
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
1
210
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
12
1.4k

Other Decks in Programming

See All in Programming
948c23c57a850629ff283f2a83088173?s=48 yotuba088
2
600
7c9b8b368924556d8642bdaed3ded1f5?s=48 danilop
0
230
7c9b8b368924556d8642bdaed3ded1f5?s=48 danilop
0
100
877ac424e59bd3dd183859ef4cc9a08a?s=48 ryosukes
0
1.4k
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
180
Ad2155c75c67c0100dd008ad10858de5?s=48 legalforce
PRO
0
640
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
230
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
190
127f2573f14072eba29ccb60506663eb?s=48 madai0517
1
200
Fb469a72f1b12726aea391f479dc1b6d?s=48 gernotstarke
0
390
0b8ad408b31cb9d5cff2828086c65d58?s=48 temoki
2
220
C0e58802a4228552548bb8ca596ca966?s=48 mihyaeru21
0
360

Featured

See All Featured
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
369
42k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
610
B47b288784fda77a94aeb234ca743c24?s=48 keavy
107
14k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
71
260k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
257
36k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
7
400
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
8.8k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
683
180k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
19
1.2k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
8
550
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
237
10k

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