How would I implement image track settings

Question

At https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints there is a section called “Properties of image tracks.” How would I adjust these settings?

When I run navigator.mediaDevices.getSupportedConstraints() I get the following:

{
  "aspectRatio": true,
  "brightness": true,
  "channelCount": true,
  "colorTemperature": true,
  "contrast": true,
  "depthFar": true,
  "depthNear": true,
  "deviceId": true,
  "echoCancellation": true,
  "exposureCompensation": true,
  "exposureMode": true,
  "facingMode": true,
  "focalLengthX": true,
  "focalLengthY": true,
  "focusMode": true,
  "frameRate": true,
  "groupId": true,
  "height": true,
  "iso": true,
  "latency": true,
  "pointsOfInterest": true,
  "sampleRate": true,
  "sampleSize": true,
  "saturation": true,
  "sharpness": true,
  "torch": true,
  "videoKind": true,
  "volume": true,
  "whiteBalanceMode": true,
  "width": true,
  "zoom": true
}

I can adjust “Properties of video tracks” under video

navigator.mediaDevices.getUserMedia({
  video: {
    aspectRatio: 1.5,
    width: 1280,
  },
})

But I’m not sure how to adjust properties like focalLengthX or exposureCompensation. Where would I adjust those?

Douce

Have you tried setting the property and value at the object passed to .getUserMedia()? – Fictile

Answer 1

From MDN I found some docs describing the process. Essentially, you can specify min and max acceptable values with min and max values per constraint. Only values added to the constraints options object will be changed.

  const constraints = {
  width: {min: 640, ideal: 1280, max: 1920},
  height: {min: 480, ideal: 720}
};

navigator.mediaDevices.getUserMedia({ video: true })
.then(mediaStream => {
  const track = mediaStream.getVideoTracks()[0];
  track.applyConstraints(constraints)
  .then(() => {
    // Do something with the track such as using the Image Capture API.
  }
  .catch(e => {
    // The constraints could not be satisfied by the available devices.
  }
}

https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/applyConstraints

Angloirish

Answer 2

In theory something like this, though it feels still a little rough, couldn't get exposure working

navigator.mediaDevices
.getUserMedia({
  video: {
    facingMode: "environment",
  },
})
.then((mediastream) => {
  const track = mediastream.getVideoTracks()[0];
  track.applyConstraints({
    advanced: [
      {
        focusMode: "manual",
        focusDistance: event.target.value,
      },
      {
        exposureMode: "continuous", // or single-shot
        exposureCompensation: event.target.value,
      },
    ],
  });
});

More at https://www.w3.org/TR/image-capture/#exposure-compensation

Made a little codepen with my findings so far: https://codepen.io/CanRau/pen/abqbWjd

setting focus & exposure like this from the same event (more in the codepen) is probably not the right thing to do as both have probably different settings you'd get from the track.getCapabilities() object

Edit: not sure about focalLengthX though

Tel