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?

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