Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Crazy computer vision stuff in the browser

Crazy computer vision stuff in the browser

Zeno Rocha

April 28, 2015
Tweet

More Decks by Zeno Rocha

Other Decks in Programming

Transcript

  1. Get User Media callback function onSuccess(stream) { var video =

    document.querySelector('video'); video.src = URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Done }; }
  2. Get User Media callback function onSuccess(stream) { var video =

    document.querySelector('video'); video.src = URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Done }; }
  3. Get User Media callback function onSuccess(stream) { var video =

    document.querySelector('video'); video.src = URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Done }; }
  4. Get User Media callback function onSuccess(stream) { var video =

    document.querySelector('video'); video.src = URL.createObjectURL(stream); video.onloadedmetadata = function(e) { // Done }; }
  5. Request accepted Request access to the camera Reproduce
 camera <video>

    Obtain pixel matrix <canvas> Tracking algorithms Result Summary
  6. 100% JavaScript! Open source No dependencies Simple and intuitive API

    Automatic setup Built-in tracking
 algorithms Easily extensible High performance Unit & performance
 regression tests ~ 7 Kb
  7. var tracker = new tracking.ColorTracker('magenta'); tracking.track('#video', tracker, { camera: true

    }); tracker.on('track', function(event) { event.data.forEach(function(rect) { // Your code goes here }); });
  8. var tracker = new tracking.ColorTracker('magenta'); tracking.track('#video', tracker, { camera: true

    }); tracker.on('track', function(event) { event.data.forEach(function(rect) { // Your code goes here }); });
  9. var tracker = new tracking.ColorTracker('magenta'); tracking.track('#video', tracker, { camera: true

    }); tracker.on('track', function(event) { event.data.forEach(function(rect) { // Your code goes here }); });
  10. var tracker = new tracking.ObjectTracker('face'); tracking.track('#video', tracker, { camera: true

    }); tracker.on('track', function(event) { event.data.forEach(function(rect) { // Your code goes here }); });
  11. var tracker = new tracking.ObjectTracker('face'); tracking.track('#video', tracker, { camera: true

    }); tracker.on('track', function(event) { event.data.forEach(function(rect) { // Your code goes here }); });
  12. var tracker = new tracking.ObjectTracker('face'); tracking.track('#video', tracker, { camera: true

    }); tracker.on('track', function(event) { event.data.forEach(function(rect) { // Your code goes here }); });
  13. var MyTracker = function() { MyTracker.base(this, 'constructor'); }; tracking.inherits(MyTracker, tracking.Tracker);

    MyTracker.prototype.track = function(pxs, width, height) { // Your code here this.emit('track', { // Your code here }); };
  14. var MyTracker = function() { MyTracker.base(this, 'constructor'); }; tracking.inherits(MyTracker, tracking.Tracker);

    MyTracker.prototype.track = function(pxs, width, height) { // Your code here this.emit('track', { // Your code here }); };
  15. var MyTracker = function() { MyTracker.base(this, 'constructor'); }; tracking.inherits(MyTracker, tracking.Tracker);

    MyTracker.prototype.track = function(pxs, width, height) { // Your code here this.emit('track', { // Your code here }); };
  16. var MyTracker = function() { MyTracker.base(this, 'constructor'); }; tracking.inherits(MyTracker, tracking.Tracker);

    MyTracker.prototype.track = function(pxs, width, height) { // Your code here this.emit('track', { // Your code here }); };
  17. var tracker = new tracking.MyTracker(); tracking.track('#video', tracker, { camera: true

    }); tracker.on('track', function(event) { event.data.forEach(function(rect) { // Your code goes here }); });
  18. var tracker = new tracking.MyTracker(); tracking.track('#video', tracker, { camera: true

    }); tracker.on('track', function(event) { event.data.forEach(function(rect) { // Your code goes here }); });
  19. var tracker = new tracking.MyTracker(); tracking.track('#video', tracker, { camera: true

    }); tracker.on('track', function(event) { event.data.forEach(function(rect) { // Your code goes here }); });
  20. var tracker = new tracking.ColorTracker('magenta'); tracking.track('#video', tracker, { camera: true

    }); tracker.on('track', function(event) { event.data.forEach(function(rect) { // Your code goes here }); }); Remember?