Search code examples
javascriptandroidcamerachromiumbrave

Use the focusMode constraint to get required media device

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?

Solution

  • From the: documentation

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

    1. 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.

    2. 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.

    3. 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.

    4. 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 ?