Get maximum video resolution with getUserMedia

Use:

var constraints = {     video: {        width: { ideal: 4096 },        height: { ideal: 2160 }     } };

This will make the browser use the maximum resolution available, up to 4K. Works in Chrome 63, Edge 41 and Firefox 58.

Citing MDN regarding the use of ideal:

An ideal value, when used, has gravity, which means that the browser will try to find the setting (and camera, if you have more than one), with the smallest fitness distance from the ideal values given.

I still don't know correct answer, but I do the following:

video: {  optional: [    {minWidth: 320},    {minWidth: 640},    {minWidth: 1024},    {minWidth: 1280},    {minWidth: 1920},    {minWidth: 2560},  ]}

While single minWidth: 2560 expression resets resolution to default, series of minWidth expression make browser always takes maximum resolution on tested hardware.

I had varied success with defining ideal dimensions and trying to force the 'back' camera.

$video = document.getElementById('video')//declare ideal valuesvar constraints = {    audio: false,    video: {        width: { ideal: 1280 },        height: { ideal: 1024 },        facingMode: "environment"    }};// enumerate devices and select the first camera (mostly the back one)navigator.mediaDevices.enumerateDevices().then(function(devices) {    for (var i = 0; i !== devices.length; ++i) {        if (devices[i].kind === 'videoinput') {            console.log('Camera found: ', devices[i].label || 'label not found', devices[i].deviceId || 'id no found');            videoConstraints.deviceId = { exact: devices[i].deviceId }        }    }});//first up the streamnavigator.mediaDevices.getUserMedia(constraints).then(function(stream) {    $video.srcObject = stream;    // log the real size    console.log($video.videoWidth, $video.videoHeight);}).catch(function(err) {    console.log(err.name + ': ' + err.message);});