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
640
7 Habits of Highly Productive Developers
Avatar for Zeno Rocha zenorocha
1
410
7 Hábitos de Desenvolvedores Altamente Produtivos
Avatar for Zeno Rocha zenorocha
1
530
What's new in the Liferay Community
Avatar for Zeno Rocha zenorocha
0
700
Launching Liferay Projects Faster with WeDeploy
Avatar for Zeno Rocha zenorocha
1
580
How Liferay fits into the real of latest technologies
Avatar for Zeno Rocha zenorocha
0
630
Estoicismo e JavaScript
Avatar for Zeno Rocha zenorocha
3
1.2k
Por que ninguém se importa com seu novo projeto open source?
Avatar for Zeno Rocha zenorocha
2
1k
Como investir em... você!
Avatar for Zeno Rocha zenorocha
1
580

Other Decks in Programming

See All in Programming
SidekiqでAIに商品説明を生成させてみた
Avatar for Aki Nakahara akinko_0915
0
120
SUZURIの規約違反チェックにおけるクリエイタフィードバックの試⾏錯誤/Trial and Error in Creator Feedback for SUZURI's Terms of Service Violation Checks
Avatar for watasan ae14watanabe
1
140
CSC305 Lecture 15
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
180
CSC509 Lecture 10
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
170
MCPサーバー「モディフィウス」で変更容易性の向上をスケールする / modifius
Avatar for MinoDriven minodriven
7
1.3k
GitHub Copilotを使いこなせ！/mastering_github_copilot!
Avatar for Kota Kageyama kotakageyama
2
870
CSC509 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
290
自動テストを活かすためのテスト分析・テスト設計の進め方/JaSST25 Shikoku
Avatar for Hiroki Iseri goyoki
1
480
CSC509 Lecture 11
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
オフライン対応！Flutterアプリに全文検索エンジンを実装する @FlutterKaigi2025
Avatar for JaiChangPark itsmedreamwalker
1
100
AI駆動開発カンファレンスAutumn2025 _AI駆動開発にはAI駆動品質保証
Avatar for Autify autifyhq
0
140
なぜ強調表示できず ** が表示されるのか — Perlで始まったMarkdownの歴史と日本語文書における課題
Avatar for hkws kwahiro
3
700

Featured

See All Featured
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
660
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
31k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
272
21k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k

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