Tracking js

  • View
    1.403

  • Download
    6

Embed Size (px)

DESCRIPTION

Meet tracking.js, an open source computer vision library for JavaScript that allows you to easily build new interactions for the web. Conhea o tracking.js, uma biblioteca de viso computacional open source para JavaScript que facilita a criao de novas interaes na web.

Transcript

  • 1. Maira Bello tracking.js uma nova dimenso
  • 2. Maira Bello
  • 3. discover.liferay.com/frontinbh
  • 4. Viso computacional
  • 5. Deteco de faces
  • 6. Reconhecimento de faces
  • 7. Robs autnomos
  • 8. Realidade virtual
  • 9. Realidade aumentada
  • 10. Como fazer isso?
  • 11. OpenCV
  • 12. ARToolkit
  • 13. Como fazer isso no browser?
  • 14. Acessar a cmera #1
  • 15. Acesso cmera navigator.getUserMedia({ video: true }, onSuccess, onFail);
  • 16. Reproduzir o vdeo #2
  • 17.
  • 18. Callback de sucesso function onSuccess(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Pronto }; }
  • 19. Obter matriz de pixels #3
  • 20.
  • 21. Algoritmos de tracking #4
  • 22. Resumo Permisso do usurio Acessar a cmera Reproduzir vdeo Algoritmos de tracking Obter matriz de pixels Resultado
  • 23. tracking.js
  • 24. JavaScript Eduardo Lundgren
  • 25. Realidade aumentada Java
  • 26. Time Zeno RochaEduardo Lundgren Java
  • 27. Maira Bello Pablo Carvalho Zeno Rocha Time Eduardo Lundgren Java
  • 28. 100% JavaScript! Open Source Sem dependncias de outras bibliotecas tracking.js Algoritmos implementados Facilmente extensvel API simples e intuitiva Alta performance Testes de unidade e de performance Setup automtico ~ 7 Kb
  • 29. Trackers
  • 30. Color Tracker
  • 31. Demo
  • 32. var tracker = new tracking.ColorTracker(magenta); ! tracking.track('#video', tracker, { camera: true }); ! tracker.on('track', function(event) { event.data.forEach(function(rect) { // Seu cdigo aqui }); });
  • 33. Object Tracker
  • 34. Demo
  • 35. var tracker = new tracking.ObjectTracker(face); ! tracking.track('#video', tracker, { camera: true }); ! tracker.on('track', function(event) { event.data.forEach(function(rect) { // Seu cdigo aqui }); });
  • 36. Custom Tracker
  • 37. var MyTracker = function() { MyTracker.base(this, 'constructor'); }; ! tracking.inherits(MyTracker, tracking.Tracker); ! MyTracker.prototype.track = function(pixels, width, height) { // Seu cdigo aqui ! this.emit('track', { // Seu cdigo aqui }); };
  • 38. var tracker = new tracking.MyTracker(); ! tracking.track('#video', tracker, { camera: true }); ! tracker.on('track', function(event) { event.data.forEach(function(rect) { // Seu cdigo aqui }); });
  • 39. Utilitrios
  • 40. Fast
  • 41. Brief
  • 42. Lies aprendidas
  • 43. 41ms por frame 24 frames por segundo Tempo real
  • 44. Complexidade do algoritmo
  • 45. Int32Array Uint16Array Float64Array Uint8ClampedArray Arrays tipados
  • 46. jsperf.com/tracking-js-arrays
  • 47. jsperf.com/tracking-js-arithmetic
  • 48. Demo
  • 49. Web Components >
  • 50. var tracker = new tracking.ColorTracker(magenta); ! tracking.track('#video', tracker, { camera: true }); ! tracker.on('track', func