WebRTC firefox constraints

Question

I currently use WebRTC in my personal development, everything works fine. I get the stream from my webcam, but now I want to use constraints for getUserMedia().

var constraints = {
           audio: false,
           video: {
               mandatory : {
                     minWidth: 1280,
                     minHeight: 720 
               }
           }
};

When I test this in Firefox it seems to ignore the constraints. When I test on Chrome or Opera my constraints work fine and my quality is good, anyone know why? The problem is Firefox?

Thanks for you suggestions

Answer 1

Firefox does support a subset of constraints with getUserMedia(), but not the outdated syntax that Chrome and Opera are using. The mandatory / optional syntax was deprecated years ago, and minWidth and minHeight the year before that.

The MediaCapture specification

According to the specification, which is now stable, your example should be written like this:

var constraints = {
    audio: false,
    video: {
        width: { min: 1280 },
        height: { min: 720 },
    }
};

This works in Firefox (and Chrome with adapter.js): https://jsfiddle.net/34qxx5w1

In the specification, the keywords min, max, and exact (a.k.a. min == max) are inherently mandatory, whereas plain values and ideal are not. Here's a fuller example:

var constraints = {
    audio: false,
    video: {
        width: { min: 1024, ideal: 1280, max: 1920 },
        height: { min: 576, ideal: 720, max: 1080 },
    }
};

This works in Firefox (and Chrome with the adapter.js polyfill in straightforward cases).

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.

Plain values are inherently ideal, which means that:

var constraints = { video: { width: 640, height: 480 } };

is the same as:

var constraints = { video: { width: { ideal: 640 }, height: { ideal: 480 } } };

In other words, a preference that getUserMedia() will try to honor, but never fail over.

If you must have a specific resolution, use this shorthand:

var constraints = { video: { width: { exact: 640 }, height: { exact: 480 } } };

Firefox

As of right now, width, height, frameRate and (on mobile) facingMode are supported in Firefox. Also, some caveats by version:

• FF32-37: Plain values and ideal are not supported. However, values are not mandatory unless you add a non-spec require keyword.

• FF38+: Implements the spec for the above constraints. Improved handling of Mac cameras (though frameRate has limitations on Mac).

• FF43+: Implements MediaStreamTrack.applyConstraints() and mediaDevices.getSupportedConstraints().

• FF46+: Implements echoCancellation.

Answer 2

Edit the wiki link seems to be outdated, please refer to jib's answer down below.

It seems like Firefox has not yet implemented constraints.

Constraints have been implemented since Chrome 24 and Opera 18. These can be used to set values for video resolution for getUserMedia() and RTCPeerConnection addStream() calls.

and from: https://wiki.mozilla.org/Media/getUserMedia

Capture resolution [in Firefox] currently fixed to 640x480 for video;

It only supports

Minimal constraints supported: (Note: all of these booleans default to 'false') video: true/false audio: true/false fake: true/false picture: true/false