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

Augmented Reality.js

Augmented Reality.js

Eduardo Lundgren

November 20, 2013
Tweet

More Decks by Eduardo Lundgren

Other Decks in Technology

Transcript

  1. augmented
    reality.js
    JS.everywhere, 2013
    Friday, October 25, 13

    View full-size slide

  2. @eduardolundgren
    Friday, October 25, 13

    View full-size slide

  3. I’m from brazil
    Friday, October 25, 13

    View full-size slide

  4. Friday, October 25, 13

    View full-size slide

  5. I — JavaScript
    Friday, October 25, 13

    View full-size slide

  6. jQuery
    jQueryUI
    YUI3
    Liferay
    tracking.js
    AlloyUI
    jQuery
    Simulate
    nodegh
    Friday, October 25, 13

    View full-size slide

  7. jQuery
    jQueryUI
    YUI3
    Liferay
    tracking.js
    AlloyUI
    jQuery
    Simulate
    nodegh
    Friday, October 25, 13

    View full-size slide

  8. jQuery
    jQueryUI
    YUI3
    Liferay
    tracking.js
    AlloyUI
    jQuery
    Simulate
    nodegh
    Friday, October 25, 13

    View full-size slide

  9. jQuery
    jQueryUI
    YUI3
    Liferay
    tracking.js
    AlloyUI
    jQuery
    Simulate
    nodegh
    Friday, October 25, 13

    View full-size slide

  10. jQuery
    jQueryUI
    YUI3
    Liferay
    tracking.js
    AlloyUI
    jQuery
    Simulate
    nodegh
    Friday, October 25, 13

    View full-size slide

  11. jQuery
    jQueryUI
    YUI3
    Liferay
    tracking.js
    AlloyUI
    jQuery
    Simulate
    nodegh
    Friday, October 25, 13

    View full-size slide

  12. jQuery
    jQueryUI
    YUI3
    Liferay
    tracking.js
    AlloyUI
    jQuery
    Simulate
    nodegh
    Friday, October 25, 13

    View full-size slide

  13. jQuery
    jQueryUI
    YUI3
    Liferay
    tracking.js
    AlloyUI
    jQuery
    Simulate
    nodegh
    Friday, October 25, 13

    View full-size slide

  14. jQuery
    jQueryUI
    YUI3
    Liferay
    tracking.js
    AlloyUI
    jQuery
    Simulate
    nodegh
    Friday, October 25, 13

    View full-size slide

  15. today we’re
    going to talk
    about
    augmented
    reality...
    Friday, October 25, 13

    View full-size slide

  16. Friday, October 25, 13

    View full-size slide

  17. ...and how to
    integrate
    different
    HTML5 APIs
    Friday, October 25, 13

    View full-size slide

  18. augmented
    reality is
    everywhere
    Friday, October 25, 13

    View full-size slide

  19. first head-mounted display
    Friday, October 25, 13

    View full-size slide

  20. google glass
    Friday, October 25, 13

    View full-size slide

  21. what is
    augmented
    reality?
    Friday, October 25, 13

    View full-size slide

  22. terminator
    Friday, October 25, 13

    View full-size slide

  23. terminator
    Friday, October 25, 13

    View full-size slide

  24. what is
    visual
    tracking?
    Friday, October 25, 13

    View full-size slide

  25. visual tracking
    Friday, October 25, 13

    View full-size slide

  26. how can you
    do it using
    JavaScript?
    Friday, October 25, 13

    View full-size slide

  27. 1. capture
    webcam
    Friday, October 25, 13

    View full-size slide

  28. Friday, October 25, 13

    View full-size slide

  29. dev.w3.org/2011/webrtc/editor/webrtc.html
    Friday, October 25, 13

    View full-size slide

  30. Friday, October 25, 13

    View full-size slide

  31. navigator.getUserMedia({
    video: true,
    audio: true
    }, onSuccess, onFail);
    STEP 1
    Access user's camera
    Friday, October 25, 13

    View full-size slide

  32. 2. play the
    captured video
    Friday, October 25, 13

    View full-size slide

  33. Friday, October 25, 13

    View full-size slide

  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

    View full-size slide

  35. 3. track a
    pattern of
    pixels
    Friday, October 25, 13

    View full-size slide

  36. Friday, October 25, 13

    View full-size slide

  37. Friday, October 25, 13

    View full-size slide

  38. Friday, October 25, 13

    View full-size slide

  39. javascript typed arrays
    Friday, October 25, 13

    View full-size slide

  40. “Study the past if
    you would define
    the future”
    - Confucius
    Friday, October 25, 13

    View full-size slide

  41. fiducial
    markers
    Friday, October 25, 13

    View full-size slide

  42. hitl.washington.edu/artoolkit
    Friday, October 25, 13

    View full-size slide

  43. github.com/kig/JSARToolKit
    Friday, October 25, 13

    View full-size slide

  44. soundstep.com/blog/experiments/jstracking/
    Friday, October 25, 13

    View full-size slide

  45. soundstep.com/blog/experiments/jstracking/
    Friday, October 25, 13

    View full-size slide

  46. bit.ly/XR0aGH
    Friday, October 25, 13

    View full-size slide

  47. bit.ly/XR0aGH
    Friday, October 25, 13

    View full-size slide

  48. what was
    the problem?
    Friday, October 25, 13

    View full-size slide

  49. trackingjs.com
    Friday, October 25, 13

    View full-size slide

  50. eduardo.io/3F0d360z2q1P
    Friday, October 25, 13

    View full-size slide

  51. tracking.js
    features
    Friday, October 25, 13

    View full-size slide

  52. Friday, October 25, 13

    View full-size slide

  53. Friday, October 25, 13

    View full-size slide

  54. eduardo.io/23033L0Q1i3z
    Friday, October 25, 13

    View full-size slide

  55. eduardo.io/23033L0Q1i3z
    Friday, October 25, 13

    View full-size slide

  56. STEP 1
    COLOR TRACKING
    Import tracking.js core

    Import tracking.js color module

    Friday, October 25, 13

    View full-size slide

  57. STEP 2
    COLOR TRACKING
    Gets user's camera and renders it
    var videoCamera = new tracking
    .VideoCamera()
    .render();
    Friday, October 25, 13

    View full-size slide

  58. STEP 3
    COLOR TRACKING
    Register tracking for yellow color
    videoCamera.track({
    type: 'color',
    color: 'yellow',
    onFound: function() {},
    onNotFound: function() {}
    });
    Friday, October 25, 13

    View full-size slide

  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

    View full-size slide

  60. Friday, October 25, 13

    View full-size slide

  61. eduardo.io/233C2J0Q3z0U
    Friday, October 25, 13

    View full-size slide

  62. eduardo.io/233C2J0Q3z0U
    Friday, October 25, 13

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  65. real world
    examples
    Friday, October 25, 13

    View full-size slide

  66. github.com/auduno/headtrackr
    Friday, October 25, 13

    View full-size slide

  67. webdesign.maratz.com/lab/responsivetypography
    Friday, October 25, 13

    View full-size slide

  68. webdesign.maratz.com/lab/responsivetypography
    Friday, October 25, 13

    View full-size slide

  69. auduno.github.io/headtrackr/examples/targets.html
    Friday, October 25, 13

    View full-size slide

  70. auduno.github.io/headtrackr/examples/targets.html
    Friday, October 25, 13

    View full-size slide

  71. alexhancock.github.io/street-facing
    Friday, October 25, 13

    View full-size slide

  72. alexhancock.github.io/street-facing
    Friday, October 25, 13

    View full-size slide

  73. markerless
    tracking
    Friday, October 25, 13

    View full-size slide

  74. unifeye viewer
    Friday, October 25, 13

    View full-size slide

  75. github.com/eduardolundgren/tracking.js
    Friday, October 25, 13

    View full-size slide

  76. let’s see
    in action?
    Friday, October 25, 13

    View full-size slide

  77. popularity
    Friday, October 25, 13

    View full-size slide

  78. 638 cities
    Friday, October 25, 13

    View full-size slide

  79. 445 tweets
    Friday, October 25, 13

    View full-size slide

  80. thank you :)
    @eduardolundgren
    Friday, October 25, 13

    View full-size slide