Tracking.js

The tracking.js library which brings different computer vision algorithms and techniques into the browser environment. By using modern HTML5 specifications, we enable you to do real-time color tracking, face detection and much more.

Transcript

1. @zenorocha tracking.js A modern approach for Computer Vision on the web
6. Computer Vision
7. Face detection
8. Face recognition
9. Autonomous robots
10. Virtual reality
11. Augmented reality
12. How to do that?
13. OpenCV
14. ARToolkit
15. How to do that in the browser?
16. Access the camera #1
18. Request user’s webcam navigator.getUserMedia({ video: true }, onSuccess, onFail);
19. Reproduce it in a video #2
20. <video>
21. Success callback function onSuccess(stream) { var video = document.querySelector('video'); video.src = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Pronto }; }
22. Obtain the pixel array #3
23. <canvas>
24. Tracking algorithms #4
25. Summary User request <video> Access the camera Reproduce it in a video Tracking algorithms Obtain the pixel array <canvas> Result
26. tracking.js
28. Maira Bello Pablo Carvalho Zeno Rocha Team Eduardo Lundgren Java
29. 100% JavaScript! Open Source No dependencies tracking.js Built-in tracking algorithms Easily extensible Simple and intuitive API High performance Unit & performance regression tests Automatic setup ~ 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. Utilities
41. Fast
43. Brief
45. Lessons learned
46. 41ms per frame 24 fps Real time
48. Algorithm Complexity
49. Int32Array Uint16Array Float64Array Uint8ClampedArray Typed Arrays
50. jsperf.com/tracking-js-arrays
51. jsperf.com/tracking-js-arithmetic
52. Demo
53. Web Components </>
54. 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 }); }); Remember?
55. <video is="video-color-tracking" target="magenta" camera="true" ontrack="onResult"> Using Web Components…
56. Documentation
57. trackingjs.com
59. Thanks! trackingjs.com hi@zenorocha.com twitter.com/zenorocha