'How would I implement image track settings

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?

javascripthtmlwebcam


Solution 1:[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

Solution 2:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Richrd
Solution 2 Can Rau

Related Questions