Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Y O U R B R O W S E R I S R E A D Y F O R
R E A L - T I M E C O M P U T E R V I S I O N
W E B D I R E C T I O N S : W H A ...
C O M P U T E R V I S I O N I S A B O U T E N A B L I N G
M A C H I N E S T O E X T R A C T U S E F U L
I N F O R M AT I O...
1 . S C E N E R E C O N S T R U C T I O N : C O M P U T I N G A 3 D M O D E L
Example of a Matterport 3D Showcase
https://...
M I T M E D I A L A B , D E P T H S E N S I N G I N T H E B R O W S E R ( D E P T H J S )
DepthJS (Kinect + Computer Visio...
2 . M O T I O N A N A LY S I S : O P T I C A L F L O W
AR.Drone Helicopter Optical Flow Test #1
https://www.youtube.com/wa...
G E S T. J S G E S T U R E R E C O G N I T I O N I N T H E B R O W S E R
https://hadi.io/gest.js
3 . R E C O G N I T I O N : P O S E E S T I M A T I O N
Real-time object pose estimation under imprecise calibration
https...
H E A D P O S E E S T I M A T I O N U S I N G H E A D T R A C K R . J S
Javascript library for headtracking via webcam and...
A Google Maps Streetview application in which head tracking is used to change point of view.
https://github.com/alexhancoc...
4 . I M A G E P R O C E S S I N G : O P T I C A L I M A G E S TA B I L I S A T I O N
Optical Image Stabilization (OIS) Dem...
R E A L - T I M E V I D E O E D G E D E T E C T I O N U S I N G J S F E A T
http://inspirit.github.io/jsfeat/
T O U S E T H E W E B C A M F O R C V, W E
S TA R T B Y G E T T I N G A V I D E O S T R E A M :
navigator.getUserMedia(con...
E X A M P L E
navigator.getUserMedia	
  =	
  navigator.getUserMedia	
  ||	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  ...
E X T E N D T H E S U C C E S S C A L L B A C K T O
C A P T U R E F R A M E S F O R C O M P U TAT I O N
…	
  
	
  	
  	
  ...
– AT W O O D ’ S L A W
“Any application that can be written in JavaScript,
will eventually be written in JavaScript.”
T H A N K S
@hadi_michael
http://hadi.io
Your browser is ready for real-time computer vision
Upcoming SlideShare
Loading in …5
×

Your browser is ready for real-time computer vision

1,164 views

Published on

With rapid improvements in browser performance and the Media Capture and Streams specification, we should push more real-time computer vision to the browser. This session covered examples of common computer vision tasks being executed on the client, as well as the APIs and techniques they are using to do this.

Published in: Internet
  • Be the first to comment

Your browser is ready for real-time computer vision

  1. 1. Y O U R B R O W S E R I S R E A D Y F O R R E A L - T I M E C O M P U T E R V I S I O N W E B D I R E C T I O N S : W H A T D O Y O U K N O W ( M A Y 2 0 1 5 ) @hadi_michael
  2. 2. C O M P U T E R V I S I O N I S A B O U T E N A B L I N G M A C H I N E S T O E X T R A C T U S E F U L I N F O R M AT I O N F R O M I M A G E S A N D V I D E O
  3. 3. 1 . S C E N E R E C O N S T R U C T I O N : C O M P U T I N G A 3 D M O D E L Example of a Matterport 3D Showcase https://vimeo.com/99878242
  4. 4. M I T M E D I A L A B , D E P T H S E N S I N G I N T H E B R O W S E R ( D E P T H J S ) DepthJS (Kinect + Computer Vision + Javascript) https://www.youtube.com/watch?v=kxna-8wGzak
  5. 5. 2 . M O T I O N A N A LY S I S : O P T I C A L F L O W AR.Drone Helicopter Optical Flow Test #1 https://www.youtube.com/watch?v=V4r2HXGA8jw
  6. 6. G E S T. J S G E S T U R E R E C O G N I T I O N I N T H E B R O W S E R https://hadi.io/gest.js
  7. 7. 3 . R E C O G N I T I O N : P O S E E S T I M A T I O N Real-time object pose estimation under imprecise calibration https://www.youtube.com/watch?v=ijhX8xfXKPE
  8. 8. H E A D P O S E E S T I M A T I O N U S I N G H E A D T R A C K R . J S Javascript library for headtracking via webcam and WebRTC/getUserMedia https://github.com/auduno/headtrackr
  9. 9. A Google Maps Streetview application in which head tracking is used to change point of view. https://github.com/alexhancock/street-facing
  10. 10. 4 . I M A G E P R O C E S S I N G : O P T I C A L I M A G E S TA B I L I S A T I O N Optical Image Stabilization (OIS) Demo Recorded with Nokia Lumia 920 PureView https://www.youtube.com/watch?v=Ylm6ojambtc
  11. 11. R E A L - T I M E V I D E O E D G E D E T E C T I O N U S I N G J S F E A T http://inspirit.github.io/jsfeat/
  12. 12. T O U S E T H E W E B C A M F O R C V, W E S TA R T B Y G E T T I N G A V I D E O S T R E A M : navigator.getUserMedia(constraints,  successCallback,  errorCallback);
  13. 13. E X A M P L E navigator.getUserMedia  =  navigator.getUserMedia  ||                                                    navigator.webkitGetUserMedia  ||                                                    navigator.mozGetUserMedia;   if  (navigator.getUserMedia)  {        navigator.getUserMedia({  audio:  true,  video:  {  width:  1280,  height:  720  }  },              function(stream)  {                    var  video  =  document.querySelector('video');                    video.src  =  window.URL.createObjectURL(stream);                    video.onloadedmetadata  =  function(e)  {                        video.play();                    };              },              function(err)  {                    console.log("The  following  error  occurred:  "  +  err.name);              }        );   }  else  {        console.log("getUserMedia  not  supported");   }
  14. 14. E X T E N D T H E S U C C E S S C A L L B A C K T O C A P T U R E F R A M E S F O R C O M P U TAT I O N …                  function(stream)  {                          var  video  =  document.createElement('video');                          video.src  =  window.URL.createObjectURL(stream);                          video.width  =  400;                          video.height  =  300;                          video.onloadedmetadata  =  function(e)  {                                  video.play();                          };                          document.body.appendChild(video);                          var  canvas  =  document.createElement('canvas');                          canvas.width  =  video.width;                          canvas.height  =  video.height;                          document.body.appendChild(canvas);                          var  context  =  canvas.getContext('2d');                          setInterval(function()  {                                    context.drawImage(video,  0,  0,  video.width,  video.height);                                  var  currentFrame  =  context.getImageData(0,  0,  video.width,  video.height);                                  //do  something  interesting  with  currentFrame...                        },  1000/25);                  }   … https://gist.github.com/hadimichael/5a1360b20a320b2b53ca
  15. 15. – AT W O O D ’ S L A W “Any application that can be written in JavaScript, will eventually be written in JavaScript.”
  16. 16. T H A N K S @hadi_michael http://hadi.io

×