Successfully reported this slideshow.

Tracking.js

11

Share

Upcoming SlideShare
Liferay + Wearables
Liferay + Wearables
Loading in …3
×
1 of 59
1 of 59

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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

×