Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tracking.js

1,769 views

Published on

Nesta palestra serão apresentadas as novidades do tracking.js, um framework open source de visão computacional.

Published in: Technology

Tracking.js

  1. 1. tracking.js uma nova dimensão Zeno Rocha
  2. 2. @zenorocha
  3. 3. discover.liferay.com/tdc2014
  4. 4. Visão computacional
  5. 5. Detecção de faces
  6. 6. Reconhecimento de faces
  7. 7. Robôs autônomos
  8. 8. Realidade virtual
  9. 9. Realidade aumentada
  10. 10. Como fazer isso?
  11. 11. OpenCV
  12. 12. ARToolkit
  13. 13. Como fazer isso no browser?
  14. 14. Acessar a câmera #1
  15. 15. Acesso à câmera navigator.getUserMedia({ video: true }, onSuccess, onFail);
  16. 16. Reproduzir o vídeo #2
  17. 17. <video>
  18. 18. Callback de sucesso function onSuccess(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Pronto }; }
  19. 19. Obter matriz de pixels #3
  20. 20. <canvas>
  21. 21. Algoritmos de tracking #4
  22. 22. Resumo Permissão do usuário <video> Acessar a câmera Reproduzir vídeo Algoritmos de tracking Obter matriz de pixels <canvas> Resultado
  23. 23. tracking.js
  24. 24. JavaScript Eduardo Lundgren
  25. 25. Realidade aumentada Java
  26. 26. Maira Bello Pablo Carvalho Zeno Rocha Time Eduardo Lundgren Java
  27. 27. tracking.js 100% JavaScript! Open Source Sem dependências de outras bibliotecas Algoritmos implementados Facilmente extensível API simples e intuitiva Alta performance Testes de unidade e de performance Setup automático ~ 7 Kb
  28. 28. Trackers
  29. 29. Color Tracker
  30. 30. Demo
  31. 31. 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 }); });
  32. 32. Object Tracker
  33. 33. Demo
  34. 34. 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 }); });
  35. 35. Custom Tracker
  36. 36. 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 }); };
  37. 37. 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 }); });
  38. 38. Utilitários
  39. 39. Fast
  40. 40. Brief
  41. 41. Lições aprendidas
  42. 42. 41ms por frame 24 fps Tempo real
  43. 43. Complexidade do algoritmo
  44. 44. Int32Array Uint16Array Float64Array Uint8ClampedArray Arrays tipados
  45. 45. jsperf.com/tracking-js-arrays
  46. 46. jsperf.com/tracking-js-arithmetic
  47. 47. Demo
  48. 48. </> Web Components
  49. 49. Lembra? 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 }); });
  50. 50. Usando Web Components… <video is="video-color-tracking" target="magenta" camera="true" ontrack="onResult">
  51. 51. Documentação
  52. 52. trackingjs.com
  53. 53. Obrigado! hi@zenorocha.com twitter.com/zenorocha trackingjs.com

×