Use the focusMode constraint to get required media device

Question

Hello everybody!

Currently, I'm working on the implementation of a qr-code scanner for my web application. After some tests on multiple devices, I've noticed that I have to set the focusMode constraint to get a camera that has the ability to auto-focus the environment.

I'm able to directly select the camera on my debug device by directly setting the deviceId in the constraints like this:

let stream = await navigator.mediaDevices.getUserMedia({
    video: {
        deviceId: "332d34c91861f97ba8f0e11f446da4566a1803539764dd67c1dfe036ef32fd97"
    }
});

Which I can call stream.getVideoTracks()[0].getCapabilities() on to get the capabilities.

{
    aspectRatio: {max: 4000, min: 0.0003333333333333333},
    colorTemperature: {max: 7000, min: 2850, step: 50},
    deviceId: "332d34c91861f97ba8f0e11f446da4566a1803539764dd67c1dfe036ef32fd97",
    exposureCompensation: {max: 2, min: -2, step: 0.10000000149011612},
    exposureMode: (2) ["continuous", "manual"],
    exposureTime: {max: 1250, min: 0, step: 0},
    facingMode: ["environment"],
    focusMode: (3) ["manual", "single-shot", "continuous"],
    frameRate: {max: 30, min: 0},
    groupId: "40f2953f5fae495c7471348c844e919762a3213019b271664d220d0aa617313c",
    height: {max: 3000, min: 1},
    iso: {max: 4000, min: 20, step: 1},
    resizeMode: (2) ["none", "crop-and-scale"],
    torch: true,
    whiteBalanceMode: (2) ["continuous", "manual"],
    width: {max: 4000, min: 1}
}

Copied from the Chromium console log.

So I tried the following constraints via Brave (based on Chromium) remote debugging on my Samsung Galaxy A51, of which none worked:

let stream = await navigator.mediaDevices.getUserMedia({
    video: {
        focusMode: {exact: ["continuous"]}
    }
});


let stream = await navigator.mediaDevices.getUserMedia({
    video: {
        focusMode: "continuous"
    }
});


let stream = await navigator.mediaDevices.getUserMedia({
    video: {
        focusMode: ["continuous"]
    }
});


let stream = await navigator.mediaDevices.getUserMedia({
    video: {
        advanced: [{focusMode: "continuous"}]
    }
});


let stream = await navigator.mediaDevices.getUserMedia({
    video: {
        advanced: [{focusMode: ["continuous"]}]
    }
});


let stream = await navigator.mediaDevices.getUserMedia({
    video: {
        advanced: [{focusMode: {exact: "continuous"}}]
    }
});

I don't know if the structure is correct and I'm not quite sure how to find that out.

Does anybody know how to use the focusMode constraint to get a device that has a continuous focus mode?

Update: Also tested the implementation in Google Chrome which ended up in the same situation. — Philipp Sonntag, Aug 24 '21 at 18:23
I am facing the same issue here on One Plus. It seems there is support in both the browser and the MediaTrack. What do you see if you use `track.getConstraints()` ? — Florian, Aug 31 '21 at 13:32
Always an empty object. It seems like Chromium doesn't recognize the constraint even though it is declared as supported. I've created [this issue](https://bugs.chromium.org/p/chromium/issues/detail?id=1243275&q=focusMode&can=2) for the Chromium project, but I haven't got a useful response yet. — Philipp Sonntag, Aug 31 '21 at 15:06

score 3 · Accepted Answer · answered Sep 01 '21 at 07:13

From the: documentation

The process works like this (using MediaStreamTrack as an example):

If needed, call MediaDevices.getSupportedConstraints() to get the list of supported constraints, which tells you what constrainable properties the browser knows about. This isn't always necessary, since any that aren't known will be ignored when you specify them—but if you have any that you can't get by without, you can start by checking to be sure they're on the list.

Once the script knows whether the property or properties it wishes to use are supported, it can then check the capabilities of the API and its implementation by examining the object returned the track's getCapabilities() method; this object lists each supported constraint and the values or range of values which are supported.

Finally, the track's applyConstraints() method is called to configure the API as desired by specifying the values or ranges of values it wishes to use for any of the constrainable properties about which it has a preference.

The track's getConstraints() method returns the set of constraints passed into the most recent call to applyConstraints().This may not represent the actual current state of the track, due to properties whose requested values had to be adjusted and because platform default values aren't represented. For a complete representation of the track's current configuration, use getSettings().

In the Media Stream API, both MediaStream and MediaStreamTrack have constrainable properties.

Probably your focusMode is a default setting, that your phone figures out for himself. So you have to use getSettings() to return the actual value.

What is .getSettings() returning ?

.getSettings() does indeed return the correct constraints. Thank you for the answer! I don't think this is good behaviour, but at least this documentation explains why the things are the way they are. — Philipp Sonntag, Sep 02 '21 at 14:40

Use the focusMode constraint to get required media device

1 Answers1