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

Augmented Reality in JavaScript

Avatar for Zeno Rocha Zeno Rocha
April 02, 2013
Programming
13
11k

Augmented Reality in JavaScript

Presented at HTML5 Dev Conf - San Francisco, 2013.
Avatar for Zeno Rocha

Zeno Rocha

April 02, 2013
Tweet

More Decks by Zeno Rocha

See All by Zeno Rocha
The Next Generation of Developer-First Products
Avatar for Zeno Rocha zenorocha
1
600
7 Habits of Highly Productive Developers
Avatar for Zeno Rocha zenorocha
1
390
7 Hábitos de Desenvolvedores Altamente Produtivos
Avatar for Zeno Rocha zenorocha
1
490
What's new in the Liferay Community
Avatar for Zeno Rocha zenorocha
0
680
Launching Liferay Projects Faster with WeDeploy
Avatar for Zeno Rocha zenorocha
1
560
How Liferay fits into the real of latest technologies
Avatar for Zeno Rocha zenorocha
0
590
Estoicismo e JavaScript
Avatar for Zeno Rocha zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
Avatar for Zeno Rocha zenorocha
2
970
Como investir em... você!
Avatar for Zeno Rocha zenorocha
1
560

Other Decks in Programming

See All in Programming
PHPでWebSocketサーバーを実装しよう2025
Avatar for kubotak kubotak
0
160
Result型で“失敗”を型にするPHPコードの書き方
Avatar for Takuma Kajikawa kajitack
4
380
Create a website using Spatial Web
Avatar for Akio Itaya akkeylab
0
300
XSLTで作るBrainfuck処理系
Avatar for MakKi makki_d
0
210
地方に住むエンジニアの残酷な現実とキャリア論
Avatar for nakamichi ichimichi
5
1.3k
関数型まつりレポート for JuliaTokai #22
Avatar for GOTOH Shunsuke antimon2
0
150
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
210
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
Avatar for ANDPAD inc andpad
0
260
Cline指示通りに動かない？ AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
Avatar for 葦沢かもめ kamomeashizawa
1
570
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
Avatar for Naoya Ito naoya
17
4.9k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
190
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
Avatar for Akira Kobori koboriakira
0
380

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
179
9.8k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.3k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k

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