Tracking.js

E190023b66e2b8aa73a842b106920c93?s=47 Zeno Rocha
October 10, 2014

 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.

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

October 10, 2014
Tweet

Transcript

  1. @zenorocha tracking.js A modern approach for Computer Vision on the

    web
  2. None
  3. None
  4. None
  5. None
  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

  17. None
  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

  27. None
  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

  42. None
  43. Brief

  44. None
  45. Lessons learned

  46. 41ms per frame 24 fps Real time

  47. None
  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

  58. None
  59. Thanks! trackingjs.com hi@zenorocha.com twitter.com/zenorocha