Instruct getUserMedia to use best available camera resolution

Question

I am using the getUserMedia function to record video from a webcam. Everyting works fine, except that it was only recording in 640x480 resolution, when I just specified video: true for the constraint.

If I set the constraint as below, I now get better quality recording on my laptop:

var mediaConstraints = {
    audio: true,
    video: {
        width: { min: 1280 },
        height: { min: 720 }
    }
};

But what if another device is capable of better than 1280x720, or has even lower capabilities?

I tried playing around with setting min to be very low, and max to be very high; but it just defaulted to 640x480, or gave nothing at all. I also tried setting the desired size, but as expected - I just ended up with whatever that value was. If I set desired to be very high (so it would choose the closest available), I ended up with nothing.

So the question is, how to set the constraints to get whatever the maximum resolution a camera can provide?

Answer 1

Note that min means "minimum allowed value", and since most browsers default to 640x480, values lower than that wont have much effect.

According to the spec, just ask for a high resolution, and you should get the closest resolution the camera can produce. E.g.:

var mediaConstraints = {
    audio: true,
    video: { width: 2880, height: 1800 }
};

This works in Firefox, and may work in Edge too (which I haven't tried).

See this other answer for more on why this works.

Chrome (though they are working on it) still relies on the adapter.js polyfill for the standard constraints syntax unfortunately, and that polyfill has some limitations, like the one you are running into here.

If you are using adapter.js, you can look in the web console in Chrome to see the old non-standard syntax that it uses natively. Using that syntax it is possible to construct a series of successively broader min-ranges, and getting the algorithm to prefer higher values that way.