$30 off During Our Annual Pro Sale. View Details »

Augmented Reality in JavaScript

Augmented Reality in JavaScript

Presented at HTML5 Dev Conf - San Francisco, 2013.

Zeno Rocha

April 02, 2013
Tweet

More Decks by Zeno Rocha

Other Decks in Programming

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