How can I get the size of the webcam image with getUserMedia?

Question

I'm trying to find out what will be the size of the image I get from the webcam using getUserMedia.

Right now, in my Macbook, I have supposedly a 720p camera, but the image I'm getting is 640x480. I'm assuming this won't always be the case, though, and I'd like to be able to handle as many cameras as possible. (I care way more about aspect ratio than size itself, I just want to make sure pictures don't show up stretched)

Is it possible to do this?

Thank you!
Daniel

Mccarley

Answer 1

You should be able to use videoWidth and videoHeight attributes, like this:

// Check camera stream is playing by getting its width
video.addEventListener('playing', function() {
    if (this.videoWidth === 0) {
        console.error('videoWidth is 0. Camera not connected?');
    }
}, false);

UPDATE: Actually, this works in Opera but doesn't seem to be supported in Chrome any more and hasn't been implemented in Firefox (at least not for video streams). It's in the HTML5 spec, though, so hopefully is on the roadmap for these browsers.

UPDATE 2: This does work, but the event to listen for is "playing" and not "play" (fixed in the code above). The "play" event is fired when the play() method is returned, whereas the "playing" event is fired when playback has actually started. Tested in Opera, Chrome and Firefox.

UPDATE 3: Firefox 18 seems to fire the "playing" event repeatedly, meaning the browser could grind to a halt if you're executing a lot of code within the listener. Better to remove the listener after it's fired, like so:

var videoWidth, videoHeight;
var getVideoSize = function() {
    videoWidth = video.videoWidth;
    videoHeight = video.videoHeight;
    video.removeEventListener('playing', getVideoSize, false);
};

video.addEventListener('playing', getVideoSize, false);

Jorge

Yeah, I saw this, but it isn't in Chrome or Firefox... Any other ideas? Thanks! – Mccarley

Afraid not. Now it's stopped working in Chrome I'm looking for a workaround myself. Sorry I couldn't help. – Jorge

Got it! After a bit of experimenting, it turns out the videoWidth property exists only after the "playing" event (not "play") is fired. Updated the answer above to show this. – Jorge

Answer 2

Hooking into the playing event does not work in Firefox (at least in Firefox 26.0 on Ubuntu 12.04 LTS I use). The playing event fires once or twice after the video starts playing. videoWidth and videoHeight are either 0 or undefined when the playing event fires. A more reliable way to detect videoWidth and videoHeight is pausing and playing the video, that seems to work always. The code snippet below worked for me:

//Detect camera resolution using pause/play loop.
var retryCount = 0;
var retryLimit = 25;
var video = $('.video')[0]; //Using jquery to get the video element.
video.onplaying = function(e) {
    var videoWidth = this.videoWidth;
    var videoHeight = this.videoHeight;
    if (!videoWidth || !videoHeight) {
        if (retryCount < retryLimit) {
            retryCount++;
            window.setTimeout(function() {
                video.pause();
                video.play();
            }, 100);
        }
        else {
            video.onplaying = undefined; //Remove event handler.
            console.log('Failed to detect camera resolution after ' + retryCount + ' retries. Giving up!');
        }
    }
    else {
        video.onplaying = undefined; //Remove event handler.
        console.log('Detected camera resolution in ' + retryCount + ' retries.');
        console.log('width:' + videoWidth + ', height:' + videoHeight);
    }
};

Singband