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

Augmented Reality in JavaScript

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
670
7 Habits of Highly Productive Developers
Avatar for Zeno Rocha zenorocha
1
430
7 Hábitos de Desenvolvedores Altamente Produtivos
Avatar for Zeno Rocha zenorocha
1
550
What's new in the Liferay Community
Avatar for Zeno Rocha zenorocha
0
720
Launching Liferay Projects Faster with WeDeploy
Avatar for Zeno Rocha zenorocha
1
600
How Liferay fits into the real of latest technologies
Avatar for Zeno Rocha zenorocha
0
650
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
1.1k
Como investir em... você!
Avatar for Zeno Rocha zenorocha
1
590

Other Decks in Programming

See All in Programming
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.4k
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
1k
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6.1k
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
7.4k
ノイジーネイバー問題を解決する 公平なキューイング
Avatar for Shoichi Ochi occhi
0
110
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
270
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
180
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
140
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140
Raku Raku Notion 20260128
Avatar for hareyaka hareyakayuruyaka
0
340
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
180
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.8k

Featured

See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
86
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
74
11k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
74
5k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
200

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