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

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);