tracking.js with Maira Bello

tracking.js with Maira Bello

3e52153b29fd5540b549089f1f925eca?s=128

Eduardo Lundgren

July 22, 2014
Tweet

Transcript

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

  2. Maira Bello

  3. None
  4. discover.liferay.com/frontinbh

  5. Visão computacional

  6. Detecção de faces

  7. Reconhecimento de faces

  8. Robôs autônomos

  9. Realidade virtual

  10. Realidade aumentada

  11. Como fazer isso?

  12. OpenCV

  13. ARToolkit

  14. Como fazer isso no browser?

  15. Acessar a câmera #1

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

  17. Reproduzir o vídeo #2

  18. <video>

  19. Callback de sucesso function onSuccess(stream) { var video = document.querySelector('video');

    video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Pronto }; }
  20. Obter matriz de pixels #3

  21. <canvas>

  22. Algoritmos de tracking #4

  23. Resumo Permissão do usuário <video> Acessar a câmera Reproduzir vídeo

    Algoritmos de tracking Obter matriz de pixels <canvas> Resultado
  24. tracking.js

  25. JavaScript Eduardo Lundgren

  26. Realidade aumentada Java

  27. Time Zeno Rocha Eduardo Lundgren Java

  28. None
  29. Maira Bello Pablo Carvalho Zeno Rocha Time Eduardo Lundgren Java

  30. 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
  31. Trackers

  32. Color Tracker

  33. None
  34. Demo

  35. 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 }); });
  36. Object Tracker

  37. None
  38. Demo

  39. 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 }); });
  40. Custom Tracker

  41. 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 }); };
  42. 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 }); });
  43. Utilitários

  44. Fast

  45. None
  46. Brief

  47. None
  48. Lições aprendidas

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

  50. None
  51. Complexidade do algoritmo

  52. Int32Array Uint16Array Float64Array Uint8ClampedArray Arrays tipados

  53. jsperf.com/tracking-js-arrays

  54. jsperf.com/tracking-js-arithmetic

  55. Demo

  56. Web Components </>

  57. 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?
  58. <video is="video-color-tracking" target="magenta" camera="true" ontrack="onResult"> </video> Usando Web Components…

  59. Documentação

  60. trackingjs.com

  61. Obrigada! maira.araujo@liferay.com trackingjs.com