Download as PDF, PPTX
![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](https://image.slidesharecdn.com/slides-131025123155-phpapp01/85/Augmented-Reality-in-JavaScript-59-320.jpg)
![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](https://image.slidesharecdn.com/slides-131025123155-phpapp01/85/Augmented-Reality-in-JavaScript-64-320.jpg)
Uploaded byEduardo Lundgren
Augmented Reality in JavaScript
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.
![Class[3][5th jun] [three js]](https://cdn.slidesharecdn.com/ss_thumbnails/class35thjun-threejs-210609051622-thumbnail.jpg?width=640&height=640&fit=bounds)
Augmented Reality in JavaScript
- 1.
- 2.
- 3. I’m from brazil Friday,October 25, 13
- 4.
- 5. I ♥ JavaScript Friday,October 25, 13
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. today we’re going totalk about augmented reality... Friday, October 25, 13
- 16.
- 17. ...and how to integrate different HTML5APIs Friday, October 25, 13
- 18.
- 19. first head-mounted display Friday,October 25, 13
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. how can you doit using JavaScript? Friday, October 25, 13
- 27.
- 28.
- 29.
- 30.
- 31. STEP 1 Access user'scamera navigator.getUserMedia({ video: true, audio: true }, onSuccess, onFail); Friday, October 25, 13
- 32. 2. play the capturedvideo Friday, October 25, 13
- 33.
- 34. STEP 2 Play webcam'scontent 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 patternof pixels Friday, October 25, 13
- 36.
- 37.
- 38.
- 39. javascript typed arrays Friday,October 25, 13
- 40. “Study the pastif you would define the future” - Confucius Friday, October 25, 13
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. what was the problem? Friday,October 25, 13
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56. STEP 1 COLOR TRACKING Importtracking.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 Getsuser's camera and renders it var videoCamera = new tracking .VideoCamera() .render(); Friday, October 25, 13
- 58. STEP 3 COLOR TRACKING Registertracking for yellow color videoCamera.track({ type: 'color', color: 'yellow', onFound: function() {}, onNotFound: function() {} }); Friday, October 25, 13
- 59. STEP 4 COLOR TRACKING Paintall 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.
- 61.
- 62.
- 63. STEP 1 FACE DETECTION Registerhuman tracking for frontal face videoCamera.track({ type: 'human', data: 'frontal_face', onFound: function() {}, onNotFound: function() {} }); Friday, October 25, 13
- 64. STEP 2 FACE DETECTION Paintall 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.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76. let’s see in action? Friday,October 25, 13
- 77.
- 78.
- 79.
- 80. thank you :) @eduardolundgren Friday,October 25, 13