tracking.js with Maira Bello

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