tracking.js with Maira Bello

Transcript

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 Rocha Eduardo 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