Tracking js
7 gostaram3,480 visualizações
O documento apresenta o tracking.js, uma biblioteca JavaScript para detecção e reconhecimento de faces, além de suporte à realidade aumentada e virtual. Ele inclui instruções para acesso à câmera, reprodução de vídeo e uso de algoritmos de tracking, com exemplos práticos de implementação. A biblioteca é open-source, leve (cerca de 7 kb) e fornece uma API simples e intuitiva, permitindo a criação de trackers personalizados.
Tracking js
- 1. Maira Bello tracking.js uma nova dimensão
- 2. Maira Bello
- 11. Como fazer isso?
- 12. OpenCV
- 13. ARToolkit
- 14. Como fazer isso no browser?
- 16. Acesso à câmera navigator.getUserMedia({ video: true }, onSuccess, onFail);
- 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>
- 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
- 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
- 55. Demo
- 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