Nesta palestra serão apresentadas as novidades do tracking.js, um framework open source de visão computacional.

1. tracking.js
uma nova dimensão
Zeno Rocha

2. @zenorocha

3. discover.liferay.com/tdc2014

6. Visão computacional

7. Detecção de faces

8. Reconhecimento de faces

9. Robôs autônomos

10. Realidade virtual

11. Realidade aumentada

12. Como fazer isso?

13. OpenCV

14. ARToolkit

15. Como fazer isso
no browser?

16. Acessar a câmera
#1

17. Acesso à câmera
navigator.getUserMedia({
video: true
}, onSuccess, onFail);

18. Reproduzir o vídeo
#2

19. <video>

20. Callback de sucesso
function onSuccess(stream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(stream);
video.onloadedmetadata = function(e) {
// Pronto
};
}

21. Obter matriz de pixels
#3

22. <canvas>

23. Algoritmos de tracking
#4

24. Resumo
Permissão do
usuário
<video>
Acessar a
câmera
Reproduzir
vídeo
Algoritmos
de tracking
Obter matriz
de pixels
<canvas> Resultado

25. tracking.js

26. JavaScript
Eduardo
Lundgren

27. Realidade
aumentada
Java

28. Maira
Bello
Pablo
Carvalho
Zeno
Rocha
Time
Eduardo
Lundgren
Java

29. 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

30. Trackers

31. Color Tracker

32. Demo

33. 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
});
});

34. Object Tracker

35. Demo

36. 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
});
});

37. Custom Tracker

38. 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
});
};

39. 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
});
});

40. Utilitários

41. Fast

43. Brief

45. Lições aprendidas

46. 41ms por
frame
24 fps
Tempo real

48. Complexidade do
algoritmo

49. Int32Array
Uint16Array
Float64Array
Uint8ClampedArray
Arrays
tipados

50. jsperf.com/tracking-js-arrays

51. jsperf.com/tracking-js-arithmetic

52. Demo

53. </>
Web Components

54. 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
});
});

55. Usando Web Components…
<video is="video-color-tracking"
target="magenta"
camera="true"
ontrack="onResult">

56. Documentação

57. trackingjs.com

59. Obrigado!
hi@zenorocha.com
twitter.com/zenorocha
trackingjs.com