Augmented Reality in JavaScript
•
1 recomendación•1,060 vistas
Presented at HTML5 Dev Conf - San Francisco, 2013.
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Augmented Reality in JavaScript
Similar a Augmented Reality in JavaScript (20)
Más de Zeno Rocha
Más de Zeno Rocha (16)
Último
Último (20)
Augmented Reality in JavaScript
- 1. augmented reality.js San Francisco, 2013.
- 4. no, I don’t samba
- 7. I ♥ HTML5
- 10. browserdiet.com
- 11. today we’re going to talk about augmented reality...
- 13. ...and how to integrate different HTML5 APIs
- 14. augmented reality is (or at least augumented reality is everywhere, or it will be... will be) everywhere
- 15. used Google Glass before it was cool
- 18. how can you do it using javascript?
- 19. mzl.la/ilyX7k
- 24. STEP 1 Access user's camera and microphone navigator.getUserMedia({ video: true, audio: true }, onSuccess, onFail);
- 26. <video>
- 27. STEP 2 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 }; }
- 28. 3. track a pattern of pixels
- 29. <canvas>
- 30. <video> <canvas>
- 32. fiducial markers
- 37. bit.ly/XR0aGH
- 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>
- 42. face detection
- 43. RESPONSIVE TYPOGRAPHY webdesign.maratz.com/lab/responsivetypography
- 45. HEADTRACKR TARGETS auduno.github.com/headtrackr/examples/targets.html
- 49. trackingjs.com
- 50. bit.ly/YVPz3e
- 51. TRACKING.JS SINGLE CONTROLLER bit.ly/ZSZuUd
- 53. STEP 1 SINGLE CONTROLLER Imports tracking.js core <script src="tracking.js"></script> Imports tracking.js color module <script src="tracker/color.js"></script>
- 54. STEP 2 SINGLE CONTROLLER Gets user's camera and renders it var videoCamera = new tracking .VideoCamera() .render();
- 55. STEP 3 SINGLE CONTROLLER Hides video camera and renders a canvas from it videoCamera = videoCamera .hide() .renderVideoCanvas();
- 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. TRACKING.JS MULTIPLE CONTROLLERS bit.ly/118nzaL
- 60. STEP 1 MULTIPLE CONTROLLERS Gets user's camera and renders it var videoCamera = new tracking .VideoCamera() .render();
- 61. STEP 2 MULTIPLE CONTROLLERS Hides video camera and renders a canvas from it videoCamera = videoCamera .hide() .renderVideoCanvas();
- 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. TRACKING.JS DRAW SOMETHING bit.ly/10mIS6h
- 68. TRACKING.JS MINECRAFT bit.ly/XR5vha
- 71. TRACKING.JS GLASSES bit.ly/X6LuGj
- 72. IT’S UP TO YOU!