Augmented Reality in JavaScript

Presented at HTML5 Dev Conf - San Francisco, 2013.

Transcript

1. augmented
   reality.js
   San Francisco, 2013.
   

   View Slide

2. View Slide

3. I’m from brazil
   

   View Slide

4. no, I don’t samba
   

   View Slide

5. View Slide

6. View Slide

7. I ♥ HTML5
   

   View Slide

8. html5-pro.com/wormz
   

   View Slide

9. I ♥ opensource
   

   View Slide

10. browserdiet.com
    

    View Slide

11. today we’re
    going to
    talk about
    augmented
    reality...
    

    View Slide

12. View Slide

13. ...and how to
    integrate
    different
    HTML5 APIs
    

    View Slide

14. augumented reality is everywhere,
    or it will be...
    augmented
    reality is
    (or at least
    will be)
    everywhere
    

    View Slide

15. before it was cool
    used Google Glass
    

    View Slide

16. what is
    augmented
    reality?
    

    View Slide

17. View Slide

18. how can you
    do it using
    javascript?
    

    View Slide

19. mzl.la/ilyX7k
    

    View Slide

20. 1. capture
    webcam
    

    View Slide

21. View Slide

22. dev.w3.org/2011/webrtc/editor/webrtc.html
    

    View Slide

23. View Slide

24. Access user's camera and microphone
    navigator.getUserMedia({
    video: true,
    audio: true
    }, onSuccess, onFail);
    STEP 1
    

    View Slide

25. 2. play the
    captured
    video
    

    View Slide

26. 
    

    View Slide

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
    

    View Slide

28. 3. track a
    pattern of
    pixels
    

    View Slide

29. 
    

    View Slide

30. 
    
    

    View Slide

31. View Slide

32. fiducial
    markers
    

    View Slide

33. github.com/kig/JSARToolKit
    

    View Slide

34. libspark.org/wiki/saqoosha/FLARToolKit/en
    

    View Slide

35. hitl.washington.edu/artoolkit
    

    View Slide

36. soundstep.com/blog/experiments/jstracking/
    

    View Slide

37. bit.ly/XR0aGH
    

    View Slide

38. bit.ly/124FT3A
    FIDUCIAL
    MARKERS
    

    View Slide

39. View Slide

40. 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

41. View Slide

42. face detection
    

    View Slide

43. webdesign.maratz.com/lab/responsivetypography
    RESPONSIVE
    TYPOGRAPHY
    

    View Slide

44. github.com/auduno/headtrackr
    

    View Slide

45. auduno.github.com/headtrackr/examples/targets.html
    HEADTRACKR
    TARGETS
    

    View Slide

46. View Slide

47. View Slide

48. @eduardolundgren (Liferay)
    

    View Slide

49. trackingjs.com
    

    View Slide

50. bit.ly/YVPz3e
    

    View Slide

51. bit.ly/ZSZuUd
    TRACKING.JS
    SINGLE CONTROLLER
    

    View Slide

52. View Slide

53. Imports tracking.js core
    Imports tracking.js color module
    
    
    STEP 1
    SINGLE CONTROLLER
    

    View Slide

54. Gets user's camera and renders it
    var videoCamera = new tracking
    .VideoCamera()
    .render();
    STEP 2
    SINGLE CONTROLLER
    

    View Slide

55. Hides video camera and renders a canvas from it
    videoCamera = videoCamera
    .hide()
    .renderVideoCanvas();
    STEP 3
    SINGLE CONTROLLER
    

    View Slide

56. STEP 4
    SINGLE CONTROLLER
    Instantiates tracking by magenta color
    videoCamera.track({
    type: 'color',
    color: 'magenta',
    onFound: function() {},
    onNotFound: function() {}
    });
    

    View Slide

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);
    }
    

    View Slide

58. bit.ly/118nzaL
    TRACKING.JS
    MULTIPLE CONTROLLERS
    

    View Slide

59. View Slide

60. Gets user's camera and renders it
    var videoCamera = new tracking
    .VideoCamera()
    .render();
    STEP 1
    MULTIPLE CONTROLLERS
    

    View Slide

61. Hides video camera and renders a canvas from it
    videoCamera = videoCamera
    .hide()
    .renderVideoCanvas();
    STEP 2
    MULTIPLE CONTROLLERS
    

    View Slide

62. STEP 3
    MULTIPLE CONTROLLERS
    Instantiates tracking by magenta color
    videoCamera.track({
    type: 'color',
    color: 'magenta',
    onFound: function() {},
    onNotFound: function() {}
    });
    

    View Slide

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);
    }
    

    View Slide

64. STEP 5
    MULTIPLE CONTROLLERS
    Instantiates tracking by cyan color
    videoCamera.track({
    type: 'color',
    color: 'cyan',
    onFound: function() {},
    onNotFound: function() {}
    });
    

    View Slide

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);
    }
    

    View Slide

66. bit.ly/10mIS6h
    TRACKING.JS
    DRAW SOMETHING
    

    View Slide

67. View Slide

68. bit.ly/XR5vha
    TRACKING.JS
    MINECRAFT
    

    View Slide

69. View Slide

70. View Slide

71. bit.ly/X6LuGj
    TRACKING.JS
    GLASSES
    

    View Slide

72. IT’S UP TO YOU!
    

    View Slide

73. View Slide

74. thanks :)
    zenorocha.com
    

    View Slide