Allow setting video constraints

Is your feature request related to a problem? Please describe. To improve performances I would like to change the resolution of the video stream.

Describe the solution you’d like To do it I need to be able to set the constraints for the getUserMedia call. A good place to do it might be inside the configuration parameter of the start call.

Then it could be used like:

let videoConstraints = {
    deviceId: { exact: cameraId }
};
if (configuration.videoConstraints) {
    videoConstraints = {
        ...videoConstraints,
        ...configuration.videoConstraints
    }; 
}

By setting the video constraints directly, the cameraId parameter becomes redundant, but for both back-compatibility and simpler use-case when the user doesn’t care about anything but the camera, it could left it there.

[mebjas]

Thanks for the detailed explanation.

The general problem with exposing “more” for the 10% use-case is as you mentioned it can confuse the 90% users and lead to issues manifesting in different forms probably due to incorrect usage. This is in general issues with adding more knobs to tune and for some reason the library is already heading in that direction.

And the whole purpose I started writing this was to hide the details of how to handle html5’s MediaDevices, local streams, video constraints etc from users.

That said - this is still a valid ask and for starters one thing I could do is to support this requirement in a hidden way (no documentation, but the library would honour it if provided).

Once we have either:

• more users requesting the same support.
• enough confidence on how the constraints are honoured by different browsers / environment.

Expose it in louder way or just pick the important ones (some of those you pointed out as well as other that start to look important later).

As a quick design decision I think it’d be fair to prioritise videoConstraints over the other configurations passed in case there is conflict

let config = {
    // .. generally supported configs below
    fps: 10,
    qrbox: 250,
    aspectRatio: 1.333,
    // .. let's say in beta configs below
    videoConstraints: {
        aspectRatio: 1.77778      // <-- this would be honoured 
    }
};
let html5QrcodeScanner = new Html5QrcodeScanner(
	"reader",  config, /* verbose= */ true);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);

[e-magon]

Hi I’m having issues setting the aspect ratio of the camera on Firefox, macOS. Brave Browser (Chromium) on macOS is fine, the aspect ratio is correct when it’s set in the config object or the videoConstraints one.

In Firefox, instead, it uses the default webcam aspect ratio. I also noticed that even the frameRate option in the videoConstraints isn’t applied in Firefox.

I don’t know if this is the right place to talk about this issue or if I should open a new issue, and I don’t know if this problem is caused by Firefox (or macOS) or this library. Let me know if you want me to open a new issue.

Thank you