Tracking js

  • Published on
    05-Dec-2014

  • View
    1.402

  • Download
    6

Embed Size (px)

DESCRIPTION

Meet tracking.js, an open source computer vision library for JavaScript that allows you to easily build new interactions for the web. Conhea o tracking.js, uma biblioteca de viso computacional open source para JavaScript que facilita a criao de novas interaes na web.

Transcript

<ul><li> 1. Maira Bello tracking.js uma nova dimenso </li> <li> 2. Maira Bello </li> <li> 3. discover.liferay.com/frontinbh </li> <li> 4. Viso computacional </li> <li> 5. Deteco de faces </li> <li> 6. Reconhecimento de faces </li> <li> 7. Robs autnomos </li> <li> 8. Realidade virtual </li> <li> 9. Realidade aumentada </li> <li> 10. Como fazer isso? </li> <li> 11. OpenCV </li> <li> 12. ARToolkit </li> <li> 13. Como fazer isso no browser? </li> <li> 14. Acessar a cmera #1 </li> <li> 15. Acesso cmera navigator.getUserMedia({ video: true }, onSuccess, onFail); </li> <li> 16. Reproduzir o vdeo #2 </li> <li> 17. </li> <li> 18. Callback de sucesso function onSuccess(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Pronto }; } </li> <li> 19. Obter matriz de pixels #3 </li> <li> 20. </li> <li> 21. Algoritmos de tracking #4 </li> <li> 22. Resumo Permisso do usurio Acessar a cmera Reproduzir vdeo Algoritmos de tracking Obter matriz de pixels Resultado </li> <li> 23. tracking.js </li> <li> 24. JavaScript Eduardo Lundgren </li> <li> 25. Realidade aumentada Java </li> <li> 26. Time Zeno RochaEduardo Lundgren Java </li> <li> 27. Maira Bello Pablo Carvalho Zeno Rocha Time Eduardo Lundgren Java </li> <li> 28. 100% JavaScript! Open Source Sem dependncias de outras bibliotecas tracking.js Algoritmos implementados Facilmente extensvel API simples e intuitiva Alta performance Testes de unidade e de performance Setup automtico ~ 7 Kb </li> <li> 29. Trackers </li> <li> 30. Color Tracker </li> <li> 31. Demo </li> <li> 32. var tracker = new tracking.ColorTracker(magenta); ! tracking.track('#video', tracker, { camera: true }); ! tracker.on('track', function(event) { event.data.forEach(function(rect) { // Seu cdigo aqui }); }); </li> <li> 33. Object Tracker </li> <li> 34. Demo </li> <li> 35. var tracker = new tracking.ObjectTracker(face); ! tracking.track('#video', tracker, { camera: true }); ! tracker.on('track', function(event) { event.data.forEach(function(rect) { // Seu cdigo aqui }); }); </li> <li> 36. Custom Tracker </li> <li> 37. var MyTracker = function() { MyTracker.base(this, 'constructor'); }; ! tracking.inherits(MyTracker, tracking.Tracker); ! MyTracker.prototype.track = function(pixels, width, height) { // Seu cdigo aqui ! this.emit('track', { // Seu cdigo aqui }); }; </li> <li> 38. var tracker = new tracking.MyTracker(); ! tracking.track('#video', tracker, { camera: true }); ! tracker.on('track', function(event) { event.data.forEach(function(rect) { // Seu cdigo aqui }); }); </li> <li> 39. Utilitrios </li> <li> 40. Fast </li> <li> 41. Brief </li> <li> 42. Lies aprendidas </li> <li> 43. 41ms por frame 24 frames por segundo Tempo real </li> <li> 44. Complexidade do algoritmo </li> <li> 45. Int32Array Uint16Array Float64Array Uint8ClampedArray Arrays tipados </li> <li> 46. jsperf.com/tracking-js-arrays </li> <li> 47. jsperf.com/tracking-js-arithmetic </li> <li> 48. Demo </li> <li> 49. Web Components &gt; </li> <li> 50. var tracker = new tracking.ColorTracker(magenta); ! tracking.track('#video', tracker, { camera: true }); ! tracker.on('track', function(event) { event.data.forEach(function(rect) { // Seu cdigo aqui }); }); Lembra? </li> <li> 51. Usando Web Components </li> <li> 52. Documentao </li> <li> 53. trackingjs.com </li> <li> 54. Obrigada! maira.araujo@liferay.com trackingjs.com </li> </ul>