your browser is ready for real-time computer vision
TRANSCRIPT
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
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
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
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
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
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://www.youtube.com/watch?v=ijhX8xfXKPE
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
A Google Maps Streetview application in which head tracking is used to change point of view. https://github.com/alexhancock/street-facing
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
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(constraints, successCallback, errorCallback);
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"); }
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
– AT W O O D ’ S L A W
“Any application that can be written in JavaScript, will eventually be written in JavaScript.”
