通过 javascript 调整网络摄像头（用户媒体）摄像头设置

Question

我在 Flask 上安装了软件运行（因此，Python 基于后端 Chrome 运行我们的前端）网络服务器 'scans' 真实通过使用头顶网络摄像头拍摄图像来展示生活产品。然后，我们稍后会在业务流程中处理这些图像。

我们的问题是相机内置了某种自动调整方式，在扫描过程中似乎随机影响色彩平衡/饱和度等。我们需要图像至少在内部与其设置一致，以便我们可以准确地比较它们。

这是当前访问网络摄像头的方式：

// Attach the video stream to the video element and autoplay.
navigator.mediaDevices.getUserMedia(constraints)
    .then(
        (stream) => {
            player.srcObject = stream;
        });

在以前的软件版本中，没有前端可言，我使用 cv2 python 库访问网络摄像头。所以我可以创建一个相机对象，然后用这样的东西覆盖内置的自动调整功能：

cam = cv2.VideoCapture(0)
cam.set(cv2.CAP_PROP_EXPOSURE, .2)
cam.set(cv2.CAP_PROP_BRIGHTNESS,50)
cam.set(cv2.CAP_PROP_CONTRAST,50)

Javascript 中的 MediaDevice / MediaStream (??) 对象是否有这样的东西？我仍然很容易被 Javascript 中的 DOM 弄糊涂，所以我正在努力挖掘 API 以找出答案。

如果需要或需要，我也非常感谢探索其他途径。

谢谢！

Answer 1

有一个全新的 API 用于图像捕获，称为 MediaStream Image Capture API。

据我所知，它目前仅在 Chrome 中受支持，但这对您的用例来说听起来还不错。

捕捉图像时，additional constraints 可以应用到您的视频轨道。来自规范：

partial dictionary MediaTrackSupportedConstraints {
  boolean whiteBalanceMode = true;
  boolean exposureMode = true;
  boolean focusMode = true;
  boolean pointsOfInterest = true;

  boolean exposureCompensation = true;
  boolean exposureTime = true;
  boolean colorTemperature = true;
  boolean iso = true;

  boolean brightness = true;
  boolean contrast = true;
  boolean pan = true;
  boolean saturation = true;
  boolean sharpness = true;
  boolean focusDistance = true;
  boolean tilt = true;
  boolean zoom = true;
  boolean torch = true;
};

对任何特定约束的支持取决于浏览器和硬件支持。 MDN 展示了如何应用这些约束：

let zoom = document.querySelector('#zoom');
const capabilities = track.getCapabilities()
// Check whether zoom is supported or not.
if (!capabilities.zoom) {
  return;
}track.applyConstraints({advanced : [{zoom: zoom.value}] });

通过 javascript 调整网络摄像头（用户媒体）摄像头设置

Adjusting webcam (usermedia) camera settings via javascript

javascript

getusermedia