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.

1. Maira Bello
tracking.js
uma nova dimensão

2. Maira Bello

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 RochaEduardo
Lundgren
Java

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

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

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

46. Brief

48. Lições aprendidas

49. 41ms por
frame
24 frames
por
segundo
Tempo real

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