getusermedia - Adjusting webcam (usermedia) camera settings via javascript - Stack Overflow

admin管理员组

文章数量:1419656

I have software running on a Flask (so, Python based back end with Chrome running our front end) webserver that 'scans' real life products by taking an image with an overhead webcam. We then work with these images later on in our business process.

Our problem is that there is some manner of auto-adjust built into the cameras that affects color balance / saturation / etc seemingly at random as the scanning process goes on. We need the images to be at least internally consistent with their settings so that we can pare them accurately.

Here is how the webcam is currently accessed:

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

In a previous version of the software, there was no front end to speak of and I accessed the webcam with the cv2 python library. So I could create a camera object and then override the built-in auto adjust features with something like this:

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)

Does the MediaDevice / MediaStream (??) object in Javascript have something like this? I am still very easily confused by the DOM in Javascript so I am struggling digging through the APIs to find out.

I would also be very appreciative for other avenues to explore if needed or desirable.

Thank you!

I have software running on a Flask (so, Python based back end with Chrome running our front end) webserver that 'scans' real life products by taking an image with an overhead webcam. We then work with these images later on in our business process.

Our problem is that there is some manner of auto-adjust built into the cameras that affects color balance / saturation / etc seemingly at random as the scanning process goes on. We need the images to be at least internally consistent with their settings so that we can pare them accurately.

Here is how the webcam is currently accessed:

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

In a previous version of the software, there was no front end to speak of and I accessed the webcam with the cv2 python library. So I could create a camera object and then override the built-in auto adjust features with something like this:

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)

Does the MediaDevice / MediaStream (??) object in Javascript have something like this? I am still very easily confused by the DOM in Javascript so I am struggling digging through the APIs to find out.

I would also be very appreciative for other avenues to explore if needed or desirable.

Thank you!

• javascript
• getusermedia

Share Improve this question Follow asked Dec 5, 2019 at 20:02 Justin EJustin E 2311 silver badge33 bronze badges 2

• Do you need video? There's a way to do a photo capture (starting with your preview video stream) where you can specify all of these parameters. I don't have a link handy at the moment, but it's documented on MDN. – Brad Commented Dec 5, 2019 at 20:13
• There is a video but it is only a "viewfinder" for the operator to line up the shot, and does not need to be accurate. Only the captured image does, so this sounds perfect. – Justin E Commented Dec 5, 2019 at 21:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

There is a brand new API for image capture called the MediaStream Image Capture API.

As far as I know, it's supported in Chrome only right now, but that sounds okay for your use case.

When capturing an image, there are additional constraints you can apply to your video track. From the spec:

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

Support for any particular constraint is dependent on browser and hardware support. MDN shows how to apply those constraints:

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

本文标签： getusermediaAdjusting webcam (usermedia) camera settings via javascriptStack Overflow