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

2,879 views

Published on

Meet tracking.js, an open source computer vision library for JavaScript that allows you to easily build new interactions for the web.

Conheça o tracking.js, uma biblioteca de visão computacional open source para JavaScript que facilita a criação de novas interações na web.

Segue o link de um vídeo dessa apresentação sendo dada no Web.br 2014, que aconteceu em São Paulo: https://www.youtube.com/watch?v=IH9HVMm5SUU.

Published in: Technology

Tracking js

  1. 1. Maira Bello tracking.js uma nova dimensão
  2. 2. Maira Bello
  3. 3. discover.liferay.com/frontinbh
  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. Time Zeno RochaEduardo Lundgren Java
  27. 27. Maira Bello Pablo Carvalho Zeno Rocha Time Eduardo Lundgren Java
  28. 28. 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
  29. 29. Trackers
  30. 30. Color Tracker
  31. 31. Demo
  32. 32. 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 }); });
  33. 33. Object Tracker
  34. 34. Demo
  35. 35. 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 }); });
  36. 36. Custom Tracker
  37. 37. 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 }); };
  38. 38. 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 }); });
  39. 39. Utilitários
  40. 40. Fast
  41. 41. Brief
  42. 42. Lições aprendidas
  43. 43. 41ms por frame 24 frames por segundo Tempo real
  44. 44. Complexidade do algoritmo
  45. 45. Int32Array Uint16Array Float64Array Uint8ClampedArray Arrays tipados
  46. 46. jsperf.com/tracking-js-arrays
  47. 47. jsperf.com/tracking-js-arithmetic
  48. 48. Demo
  49. 49. Web Components </>
  50. 50. 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?
  51. 51. <video is="video-color-tracking" target="magenta" camera="true" ontrack="onResult"> </video> Usando Web Components…
  52. 52. Documentação
  53. 53. trackingjs.com
  54. 54. Obrigada! maira.araujo@liferay.com trackingjs.com

×