I need to show a button depending on the existance of a camera where the web app is being run. I have the following code to detect such existence of a camera

const availableMediaOnDevice = await window.navigator.mediaDevices?.enumerateDevices();
console.log("devices ->", availableMediaOnDevice);
const deviceHasOwnCamera = availableMediaOnDevice.some(
  (device) => device.kind === "videoinput"
);

This happens to work fine running on a local IIS on my desktop computer. If I plug a usb camera I get a videoinput and if I unplug it then the device is removed when doing enumerateDevices() again.

However, when I deploy this to our testing environment and visit the website using the same desktop computer when enumerateDevices() runs I always get a videoinput device. The groupId happens to change when I unplug the camera but then it is set back to the original value when I plug it again.

Something that is also different is that locally I get a label value "FaceCam 2020" while on the test env I get an empty label regardless of if the camera is connected or not. This makes me think that perhaps this is related to permissions but then I'd expect that the videoinput would never show on test instead of the opposite.