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. 2.
  2. 3.
  3. 4.
  4. 5.
  5. 13.
  6. 14.
  7. 17.
  8. 20.
  9. 21.

    Success callback function onSuccess(stream) { var video = document.querySelector('video'); video.src

    = window.URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Pronto }; }
  10. 23.
  11. 25.

    Summary User request <video> Access the camera Reproduce it in

    a video Tracking algorithms Obtain the pixel array <canvas> Result
  12. 27.
  13. 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
  14. 30.
  15. 32.
  16. 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 }); });
  17. 35.
  18. 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 }); });
  19. 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 }); };
  20. 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 }); });
  21. 40.
  22. 41.
  23. 42.
  24. 43.
  25. 44.
  26. 47.
  27. 52.
  28. 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?
  29. 58.