Augmented Reality in JavaScript
•
12 likes•7,911 views
This document appears to be notes from a presentation on augmented reality and visual tracking using JavaScript. It discusses accessing the user's camera, playing video, tracking patterns/colors/faces, examples of augmented reality projects, and markerless tracking. The presentation introduces augmented reality and JavaScript APIs for integrating augmented content, then covers visual tracking techniques like color tracking, face detection and real-world examples before discussing markerless tracking and popularity metrics.
More Related Content
Similar to Augmented Reality in JavaScript
Similar to Augmented Reality in JavaScript (11)
Recently uploaded
Recently uploaded (20)
Augmented Reality in JavaScript
- 3. I’m from brazil Friday, October 25, 13
- 4. Friday, October 25, 13
- 5. I ♥ JavaScript Friday, October 25, 13
- 15. today we’re going to talk about augmented reality... Friday, October 25, 13
- 16. Friday, October 25, 13
- 17. ...and how to integrate different HTML5 APIs Friday, October 25, 13
- 19. first head-mounted display Friday, October 25, 13
- 20. google glass Friday, October 25, 13
- 21. what is augmented reality? Friday, October 25, 13
- 24. what is visual tracking? Friday, October 25, 13
- 25. visual tracking Friday, October 25, 13
- 26. how can you do it using JavaScript? Friday, October 25, 13
- 27. 1. capture webcam Friday, October 25, 13
- 28. Friday, October 25, 13
- 30. Friday, October 25, 13
- 31. STEP 1 Access user's camera navigator.getUserMedia({ video: true, audio: true }, onSuccess, onFail); Friday, October 25, 13
- 32. 2. play the captured video Friday, October 25, 13
- 33. Friday, October 25, 13
- 34. 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 }; } Friday, October 25, 13
- 35. 3. track a pattern of pixels Friday, October 25, 13
- 36. Friday, October 25, 13
- 37. Friday, October 25, 13
- 38. Friday, October 25, 13
- 39. javascript typed arrays Friday, October 25, 13
- 40. “Study the past if you would define the future” - Confucius Friday, October 25, 13
- 48. what was the problem? Friday, October 25, 13
- 52. Friday, October 25, 13
- 53. Friday, October 25, 13
- 56. STEP 1 COLOR TRACKING Import tracking.js core <script src="tracking.js"></script> Import tracking.js color module <script src="tracker/color.js"></script> Friday, October 25, 13
- 57. STEP 2 COLOR TRACKING Gets user's camera and renders it var videoCamera = new tracking .VideoCamera() .render(); Friday, October 25, 13
- 58. STEP 3 COLOR TRACKING Register tracking for yellow color videoCamera.track({ type: 'color', color: 'yellow', onFound: function() {}, onNotFound: function() {} }); Friday, October 25, 13
- 59. STEP 4 COLOR TRACKING Paint 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); } Friday, October 25, 13
- 60. Friday, October 25, 13
- 63. STEP 1 FACE DETECTION Register human tracking for frontal face videoCamera.track({ type: 'human', data: 'frontal_face', onFound: function() {}, onNotFound: function() {} }); Friday, October 25, 13
- 64. STEP 2 FACE DETECTION Paint all detected faces rectangles onFound: function(track) { for (var i = 0, len = track.length; i < len; i++) { var rect = track[i]; ctx.strokeStyle = "rgb(0,255,0)"; ctx.strokeRect( rect.x, rect.y, rect.size, rect.size); } } Friday, October 25, 13
- 65. real world examples Friday, October 25, 13
- 74. unifeye viewer Friday, October 25, 13
- 76. let’s see in action? Friday, October 25, 13
- 78. 638 cities Friday, October 25, 13
- 79. 445 tweets Friday, October 25, 13
- 80. thank you :) @eduardolundgren Friday, October 25, 13