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

tracking.js with Maira Bello

tracking.js with Maira Bello

Eduardo Lundgren

July 22, 2014
Tweet

More Decks by Eduardo Lundgren

Other Decks in Technology

Transcript

  1. Maira Bello
    tracking.js
    uma nova dimensão

    View full-size slide

  2. discover.liferay.com/frontinbh

    View full-size slide

  3. Visão computacional

    View full-size slide

  4. Detecção de faces

    View full-size slide

  5. Reconhecimento de faces

    View full-size slide

  6. Robôs autônomos

    View full-size slide

  7. Realidade virtual

    View full-size slide

  8. Realidade aumentada

    View full-size slide

  9. Como fazer isso?

    View full-size slide

  10. Como fazer isso
    no browser?

    View full-size slide

  11. Acessar a câmera
    #1

    View full-size slide

  12. Acesso à câmera
    navigator.getUserMedia({
    video: true
    }, onSuccess, onFail);

    View full-size slide

  13. Reproduzir o vídeo
    #2

    View full-size slide

  14. Callback de sucesso
    function onSuccess(stream) {
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(stream);
    video.onloadedmetadata = function(e) {
    // Pronto
    };
    }

    View full-size slide

  15. Obter matriz de pixels
    #3

    View full-size slide

  16. Algoritmos de tracking
    #4

    View full-size slide

  17. Resumo
    Permissão do usuário

    Acessar a câmera
    Reproduzir vídeo
    Algoritmos de
    tracking
    Obter matriz
    de pixels
    Resultado

    View full-size slide

  18. JavaScript
    Eduardo
    Lundgren

    View full-size slide

  19. Realidade
    aumentada
    Java

    View full-size slide

  20. Time
    Zeno Rocha
    Eduardo
    Lundgren
    Java

    View full-size slide

  21. Maira Bello
    Pablo Carvalho
    Zeno Rocha
    Time
    Eduardo
    Lundgren
    Java

    View full-size slide

  22. 100% JavaScript!
    Open Source
    Sem dependências de
    outras bibliotecas
    tracking.js
    Algoritmos implementados
    Facilmente extensível
    API simples e intuitiva
    Alta performance
    Testes de unidade e de
    performance
    Setup automático ~ 7 Kb

    View full-size slide

  23. Color Tracker

    View full-size slide

  24. var tracker = new tracking.ColorTracker(‘magenta’);
    !
    tracking.track('#video', tracker, {
    camera: true
    });
    !
    tracker.on('track', function(event) {
    event.data.forEach(function(rect) {
    // Seu código aqui
    });
    });

    View full-size slide

  25. Object Tracker

    View full-size slide

  26. var tracker = new tracking.ObjectTracker(‘face’);
    !
    tracking.track('#video', tracker, {
    camera: true
    });
    !
    tracker.on('track', function(event) {
    event.data.forEach(function(rect) {
    // Seu código aqui
    });
    });

    View full-size slide

  27. Custom Tracker

    View full-size slide

  28. var MyTracker = function() {
    MyTracker.base(this, 'constructor');
    };
    !
    tracking.inherits(MyTracker, tracking.Tracker);
    !
    MyTracker.prototype.track = function(pixels, width, height) {
    // Seu código aqui
    !
    this.emit('track', {
    // Seu código aqui
    });
    };

    View full-size slide

  29. var tracker = new tracking.MyTracker();
    !
    tracking.track('#video', tracker, {
    camera: true
    });
    !
    tracker.on('track', function(event) {
    event.data.forEach(function(rect) {
    // Seu código aqui
    });
    });

    View full-size slide

  30. Utilitários

    View full-size slide

  31. Lições aprendidas

    View full-size slide

  32. 41ms por
    frame
    24 frames
    por
    segundo
    Tempo real

    View full-size slide

  33. Complexidade do algoritmo

    View full-size slide

  34. Int32Array
    Uint16Array
    Float64Array
    Uint8ClampedArray
    Arrays
    tipados

    View full-size slide

  35. jsperf.com/tracking-js-arrays

    View full-size slide

  36. jsperf.com/tracking-js-arithmetic

    View full-size slide

  37. Web Components
    >

    View full-size slide

  38. var tracker = new tracking.ColorTracker(‘magenta’);
    !
    tracking.track('#video', tracker, {
    camera: true
    });
    !
    tracker.on('track', function(event) {
    event.data.forEach(function(rect) {
    // Seu código aqui
    });
    });
    Lembra?

    View full-size slide

  39. target="magenta"
    camera="true"
    ontrack="onResult">

    Usando Web Components…

    View full-size slide

  40. Documentação

    View full-size slide

  41. trackingjs.com

    View full-size slide