How do I determine the width and height of the camera in order to utilize it on a canvas while preserving proportions?
I am attempting to ascertain the dimensions of the camera so that I can use them on a canvas. On this canvas, I plan to display live video with various filters applied. It is essential that the size of the camera aligns with that of the video.
The following code snippet demonstrates how I access the camera:
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || naviagor.msGetUserMedia);
var options = {video: true};
var videoWidth, videoHeight;
var onFail = function(e) {
alert('Failed to retrieve camera');
alert(e);
};
var onSuccess = function(stream) {
if(navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var url = window.URL || window.webkitURL;
video.src = url.createObjectURL(stream);
}
// Delaying for 1000 ms before commencing the loop
setTimeout(function(){
// Additional functions ...
// The variables videoWidth and videoHeight need to be utilized here
// These values are derived from the image data captured by the camera
},1000);
};
navigator.getUserMedia(options, onSuccess, onFail);