49

I'm trying to get highest video resolution as possible through JS navigator.getUserMedia. I know about constraints, but don't know how to choose right in my case.

The problem is looks like there is no way to say "I want a video at maximum resolution". So instead I'm trying to say "I want video not less than very big resolution".

When I'm trying minWidth: 1600, Chrome returns me 1280×720 video (highest possible for my camera, I think). But what if user has camera with higher resolution? So I'm asking for minWidth: 2048 video, and Chrome returns only 640×480.

var constraints = {
  video: {
    optional: [
    {minWidth: 2048}
    ]
  }
};

This is online example: http://jsbin.com/kibeza/1/watch?js,output

And there is actual problem: Chrome doesn't know math. It think what 1600 is greater than 2048. I can't ask for video "not less than 100500", because in this case I'll get standard low resolution. I cant ask video "not less than some reasonable small resolution", because there can be users with higher resolution and I want to get higher resolution.

homm
  • 2,102
  • 1
  • 16
  • 33
  • Have you seen [this bug?](https://code.google.com/p/chromium/issues/detail?id=312928) – Martin Dec 11 '14 at 10:36
  • that's funny, when I request a resolution that is too big I get a "ConstraintNotSatisfiedError" and no video is returned – Michael Mar 29 '16 at 03:40

9 Answers9

51

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.

Jan Kalfus
  • 5,422
  • 2
  • 30
  • 38
  • 3
    This approach is probably the easiest, and you don't even have to use the "ideal" keywords, as this is implied when just specifying width and height. – Ola Berntsson Aug 29 '18 at 00:57
  • 3
    Works like a charm. Couldnt we even set this to 999999 for both? – Mick Jan 14 '19 at 14:40
  • For me setting this to 99999 also worked. This is probably more future save, because resolutions can still get larger than what we have atm. Also note that depending on having your device in landscape or portrait mode the width and height of your camera will be swapped. So a height of e.g. 2160 could already be asking for less then the maximum resolution in some cases. – Falk Tandetzky Dec 26 '21 at 22:54
  • I'm seeing ios safari breaking when i use these constraints – BentOnCoding Aug 25 '22 at 18:47
  • This breaks the page on safari ios. Not sure why yet – BentOnCoding Aug 25 '22 at 19:27
  • Doesn't work, this breaks on chrome (galaxy samsung), webcam error: notreadableerror: could not start video source. Also if mess with these values it actually changes the resolution of the video stream by stretching it which is very undesirable – Shardj Aug 02 '23 at 14:57
17

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.

homm
  • 2,102
  • 1
  • 16
  • 33
  • Still no news about that? – Jiloc Mar 05 '15 at 10:49
  • 1
    This is the right answer for Chrome, for now. Min/max constraints form ranges of legal values, which the browser is still free to choose any value within, so the only way to influence a direction is with successively narrower or wider ranges. This works because the browser tries to cumulatively satisfy as many ranges as it can, starting with the first, and skipping ones that over-constrain. Chrome will hopefully switch to [the standard](http://stackoverflow.com/questions/28282385/webrtc-firefox-constraints/28911694#28911694) soon which handles this more intuitively. – jib Mar 31 '15 at 00:04
  • this isn't that great if the native width is greater than 2560 or is a not in the above list. – Michael Mar 29 '16 at 03:42
  • Is there any update on this or is this still the best way to get Chrome to use the maximum resolution? – navigator Mar 30 '16 at 11:38
  • @Michael I understand your concern, but take note that it's a videostream, not a photostream. There are no phones or webcams that go any higher than 4K just yet. – Tom Apr 01 '16 at 12:51
  • Yeah, didn't the optional syntax get deprecated anyway so this is not guaranteed to work in the future? – Skylion Jun 16 '16 at 16:41
  • I found this works but kills any device preference when it comes to front or back cameras. I'll add a comment below even though it's not a solution per se – sidonaldson Aug 03 '16 at 14:21
  • This answer is outdated. See [this answer](https://stackoverflow.com/a/48546227/918910) instead. – jib Sep 15 '19 at 00:55
11

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

$video = document.getElementById('video')

//declare ideal values
var 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 stream
navigator.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);
});
sidonaldson
  • 24,431
  • 10
  • 56
  • 61
  • is videoConstraints supposed to be constraints or is `constraints` supposed to contain a `videoConstraints` object? in other words do we set the deviceID in the video section of the getusermedia constraints, or in the main object? – B''H Bi'ezras -- Boruch Hashem Dec 31 '20 at 08:42
7

Still I haven't found any good API to get maximum video resolution with getUserMedia.

But here I am sharing my idea to get maximum supported video resolution of the connected device using Binary Search algorithm and it's working great.

Here are the steps to do this job,

  • Store some standard resolutions in an Array, maintaining ascending order .
  • Set leftIndex = 0 and rightIndex = size of resolution array.
  • Check midIndex = (left+right)/2 resolution supported or not, and modify left and right based on the result.

Here I am sharing my implementation:

var ResolutionsToCheck = [
                {width: 160, height:120},
                {width: 320, height:180},
                {width: 320, height:240},
                {width: 640, height:360},
                {width: 640, height:480},
                {width: 768, height:576},
                {width: 1024, height:576},
                {width: 1280, height:720},
                {width: 1280, height:768},
                {width: 1280, height:800},
                {width: 1280, height:900},
                {width: 1280, height:1000},
                {width: 1920, height:1080},
                {width: 1920, height:1200},
                {width: 2560, height:1440},
                {width: 3840, height:2160},
                {width: 4096, height:2160}
            ];

var left = 0;
var right = ResolutionsToCheck.length;
var selectedWidth;
var selectedHeight;
var mid;

function FindMaximum_WidthHeight_ForCamera()
{
    console.log("left:right = ", left, ":", right);
    if(left > right)
    {
        console.log("Selected Height:Width = ", selectedWidth, ":", selectedHeight);
        return;
    }

    mid = Math.floor((left + right) / 2);

    var temporaryConstraints = {
        "audio": true,
        "video": {
            "mandatory": {
            "minWidth": ResolutionsToCheck[mid].width,
            "minHeight": ResolutionsToCheck[mid].height,
            "maxWidth": ResolutionsToCheck[mid].width,
            "maxHeight": ResolutionsToCheck[mid].height
            },
        "optional": []
        }
    }

    navigator.mediaDevices.getUserMedia(temporaryConstraints).then(checkSuccess).catch(checkError);
}

function checkSuccess(stream)
{
    console.log("Success for --> " , mid , " ", ResolutionsToCheck[mid]);
    selectedWidth = ResolutionsToCheck[mid].width;
    selectedHeight = ResolutionsToCheck[mid].height;

    left = mid+1;

    for (let track of stream.getTracks()) 
    { 
        track.stop()
    }

    FindMaximum_WidthHeight_ForCamera();
}
function checkError(error)
{
    console.log("Failed for --> " + mid , " ", ResolutionsToCheck[mid],  " ", error);
    right = mid-1;

    FindMaximum_WidthHeight_ForCamera();
}

Just call function FindMaximum_WidthHeight_ForCamera(). When operation will be completed then maximum video resolution will be stored in selectedWidth and selectedHeight variables. Here I am also attaching console output for my device:

//Console Output
left:right =  0 : 17
Success for -->  8   Objectheight: 768width: 1280__proto__: Object
left:right =  9 : 17
Failed for --> 13   Objectheight: 1200width: 1920__proto__: Object   NavigatorUserMediaError
left:right =  9 : 12
Success for -->  10   Objectheight: 900width: 1280__proto__: Object
left:right =  11 : 12
Failed for --> 11   Objectheight: 1000width: 1280__proto__: Object   NavigatorUserMediaError
left:right =  11 : 10
Selected Height:Width =  1280 : 900

I have tested this implementation using Chrome Version 57.0.2987.110 (64-bit) and Logitech, Inc. Webcam C270. But I think this solution should work in each scenario. Thank You.

RajibTheKing
  • 1,234
  • 1
  • 15
  • 35
  • This seems like a pretty good solution, but I'm getting 1280x900 for Motorola G2 and Motorola G3, and their max video resolution is 1280x720 – deweydb Nov 03 '17 at 02:19
  • Do you really get the video after selecting the resolution by this algorithm. There are two scenario for your problem.... i) you are getting video ii) You are not getting video, after selecting the resolution – RajibTheKing Nov 03 '17 at 08:38
4

I agree with homm, his approach works fine: https://jsfiddle.net/evpozdniakov/c84ksucw/

var getUserMediaPrefixed,
    videoStream,
    videoTag;

setGumPrefix();

if (!getUserMediaPrefixed) {
    logMessage('Sorry, your browser doesn\'t support getUserMedia interface');
}
else {
    runCamera();
}

function dealWithStream(stream) {
    videoStream = stream;

    if (!videoTag) {
        videoTag = document.createElement('video');
        videoTag.addEventListener('resize', videoEventListener);
    }

    videoTag.src = window.URL.createObjectURL(stream);
    videoTag.play();
}

function handleError(e) {
    if (e.name == 'PermissionDeniedError') {
        logMessage('It looks like you\'ve denied access to the camera.');
    }
    else if (e.name == 'SourceUnavailableError') {
        logMessage('It looks like your camera is <b>used</b> by another application.');
    }
    else {
        logMessage('The camera is unavailable. The error message is: ' +e.message);
    }
}

function logMessage(msg) {
    var p = document.createElement('p');

    p.innerHTML = msg;

    document.getElementById('output').appendChild(p);
}

function runCamera() {
    var constraints = {
        audio: false,
        video: {
            optional: [
                {minWidth: 320},
                {minWidth: 640},
                {minWidth: 800},
                {minWidth: 900},
                {minWidth: 1024},
                {minWidth: 1280},
                {minWidth: 1920},
                {minWidth: 2560}
            ]
        }
    };

    navigator[getUserMediaPrefixed](constraints, dealWithStream, handleError);
}

function setGumPrefix() {
    if (navigator.getUserMedia) {
        getUserMediaPrefixed = 'getUserMedia';
    }
    else if (navigator.webkitGetUserMedia) {
        getUserMediaPrefixed = 'webkitGetUserMedia';
    }
    else if (navigator.mozGetUserMedia) {
        getUserMediaPrefixed = 'mozGetUserMedia';
    }
    else if (navigator.msGetUserMedia) {
        getUserMediaPrefixed = 'msGetUserMedia';
    }
}

function videoEventListener() {
    if (videoTag.videoWidth) {
        logMessage('Best captured video quality in your browser is ' +videoTag.videoWidth+ '×' +videoTag.videoHeight);

        // stop stream
        videoStream.stop();
        videoTag.src = '';
    }
}

In my case, Opera and Chrome offer max resolution 1280×720.

Firefox gives 640×480 by default, but you can improve his resolution as well up to 1280×720. Here you go:

enter image description here

evpozdniakov
  • 533
  • 6
  • 6
  • 1
    Actually, Firefox is ahead of Chrome here, and supports the spec, so this is a piece of cake: `{ video: { width: 9999, height: 9999 } }` will give you the highest possible resolution. See [this related answer](http://stackoverflow.com/questions/28282385/webrtc-firefox-constraints/28911694#28911694) – jib Jul 07 '15 at 01:17
4

You can check this utility to check the available resolutions of your devices:

https://webrtchacks.github.io/WebRTC-Camera-Resolution/

It is useful for troubleshooting purposes.

Hope you find it interesting!

Andrés
  • 719
  • 1
  • 4
  • 21
3

APIs and standards have changed since these answers were posted so I will post my current solution to the max-res GUM problem. I've tried the "scanning" solutions, even binary search etc., all have resulted in a crashing webpage on mobile devices (e.g. iPhone iPad) while desktop browsers showed more resilience.

This is what I currently do to get max resolution (use advanced: [ and multiple width: { exact: s):

const video = $("#video")[0]

const constraints = {
  audio: false,
  video: {
    advanced: [
      { width: { exact: 2560 } },
      { width: { exact: 1920 } },
      { width: { exact: 1280 } },
      { width: { exact: 1024 } },
      { width: { exact: 900 } },
      { width: { exact: 800 } },
      { width: { exact: 640 } },
      { width: { exact: 320 } }
    ]
  }
};


$(document).ready(() => {
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((mediaStream) => {
      window.stream = mediaStream;
      video.srcObject = mediaStream;
    })
    .then(() => {
      return new Promise((resolve) => {
        video.onloadedmetadata = resolve;
      });
    })
    .then(async () => {
      console.log('Ready to work');
    })
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="video" autoplay muted playsinline />
Roy Shilkrot
  • 3,079
  • 29
  • 25
2

You can always use applyConstraints() combined with getCapabilities() on the track. Honza Kalfus' answer claims chrome now handles the ideal prop right for resolution. I didn't test that, but Chrome 83 still screws up ideal value for frameRate and simply wont start the video if outside of the capable range... so I hope this helps someone.

stream = await navigator.mediaDevices.getUserMedia({ video: { width: 100, height: 100, frameRate: { min: 8, max:60 }, facingMode: 'environment' } });
track = stream.getTracks()[0];
var frIdeal = 35;
constrs = track.getConstraints();
frCap = track.getCapabilities().frameRate;
if (frCap && "min" in frCap && "max" in frCap) {
  constrs.frameRate = Math.max(frCap.min, Math.min(frCap.max, frIdeal));
  track.applyConstraints(constrs);
}

this will give me 30hz if that is the maximum (Chrome83).

see also the MDN docs

N4ppeL
  • 1,771
  • 18
  • 18
0

I was also getting same problem. tried all give solution but not able to resolve, somehow i write a code and its working fine for my project.

<!DOCTYPE html>
<html>
<head>
    <title>Colgate Smile Test</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 
    crossorigin="anonymous">
    
    <style>
#canvas  {
  
  -webkit-transform: scaleX(-1); 
  transform: scaleX(-1);         
}
#video  {
  
  -webkit-transform: scaleX(-1); /* mirror effect while using front cam */
  transform: scaleX(-1);         /* mirror effect while using front cam */
}

    </style>
  
</head>
<body>
  
    <div>
     
    <canvas id="canvas" style= "width:100vw;height:100vh"></canvas>
    <video id="video" style="display:none" ></video>
 

</div>

</body>
<script>
        const video = document.getElementById('video');
       
       const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');



canvas.style.width = window.screen.width;
canvas.style.height = window.screen.width;


// Fix for iOS Safari from https://leemartin.dev/hello-webrtc-on-safari-11-e8bcb5335295
video.setAttribute('autoplay', '');
video.setAttribute('muted', '');
video.setAttribute('playsinline', '')

const constraints = {
 audio: false,
 video: {
   facingMode: 'user'
 }
}

function getVideo() {
 navigator.mediaDevices.getUserMedia(constraints)
   .then(localMediaStream => {
     console.log(localMediaStream);
   
//  DEPRECIATION : 
//       The following has been depreceated by major browsers as of Chrome and Firefox.
//       video.src = window.URL.createObjectURL(localMediaStream);
//       Please refer to these:
//       Deprecated  - https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
//       Newer Syntax - https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
     console.dir(video);
     if ('srcObject' in video) {
       video.srcObject = localMediaStream;
     } else {
       video.src = URL.createObjectURL(localMediaStream);
     }
     // video.src = window.URL.createObjectURL(localMediaStream);
     video.play();
   })
   .catch(err => {
     console.error(`OH NO!!!!`, err);
   });
  
}

function paintToCanvas() {
 const width = video.videoWidth;
 const height = video.videoHeight;
 canvas.width = width;
 canvas.height = height;

 return setInterval(() => {
   ctx.drawImage(video, 0, 0, width, height);
   
 }, 16);
}
var count = 0;



getVideo();

video.addEventListener('canplay', paintToCanvas);


</script>


</html>