时间戳

首页 > 解决方案 > 通过 javascript 调整网络摄像头（用户媒体）摄像头设置

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

问题描述

我有软件在 Flask（因此，基于 Python 的后端和 Chrome 运行我们的前端）网络服务器上运行，它通过使用头顶网络摄像头拍摄图像来“扫描”现实生活中的产品。然后，我们稍后在业务流程中使用这些图像。

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

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

// 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 以找出答案。

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

谢谢！

标签： javascriptgetusermedia

解决方案

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

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

捕获图像时，您可以将其他限制应用于视频轨道。从规范：

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}] });

推荐阅读