我该如何实现图像跟踪设置

时间:2017-12-31 18:56:08

标签: javascript html5 webcam

https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints,有一个名为“图片曲目属性”的部分。如何调整这些设置?

当我运行navigator.mediaDevices.getSupportedConstraints()时,我得到以下内容:

{
  "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
}

我可以在video

下调整“视频曲目的属性”
navigator.mediaDevices.getUserMedia({
  video: {
    aspectRatio: 1.5,
    width: 1280,
  },
})

但我不确定如何调整focalLengthXexposureCompensation等属性。我会在哪里调整这些?

1 个答案:

答案 0 :(得分:3)

从MSN我发现了一些描述这个过程的文档。实质上,您可以使用每个约束的最小值和最大值来指定最小和最大可接受值。仅更改添加到约束选项对象的值。

  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