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