I’m currently running into an issue where Chromium refuses to get a high-quality video stream from the user’s webcam. It works fine in Firefox and WebKit browsers. For further context, I’m looking to implement the media streaming in a React hook.

Take this code:

const devices = await navigator.mediaDevices.enumerateDevices();
const videoDevice = devices.find((device) => device.kind === 'videoinput');
console.log(videoDevice.label, videoDevice.getCapabilities()); // 1920x1920px supported
const stream = await navigator.mediaDevices.getUserMedia({
  video: { width: { min: 1280 }, height: { min: 720 } }, // OverconstrainedError
});
console.log(stream.getVideoTracks()[0].getSettings());

In the first console log, I get a video device that supports a webcam stream of up to 1920px on each side (which matches the video stream I’m getting in Firefox and WebKit). However, when I then try to fetch a stream with appropriately high minimum constraints, I get an OverconstrainedError. When I replace the min constraints with ideal constraints, Chromium gives me a 640x480p stream, much lower than what the webcam supports.

The only related issue I found was from four years ago which had to do with another webcam stream being open in another tab simultaneously. This is not the case here – the stream I’m trying to open is the only active one.

Any ideas?