Google Chrome does not allow to choose the camera to use

Question

I am developing a streaming website. It works, however, at some time, I have installed a software called OBS which installed a virtual camera. Since then, when the web site tries to use the camera, it uses the OBS virtual camera, instead of my physical camera. But this occurs only in my PC. When the camera is to be used, this permission dialog appears:

In my laptop, this works, that is, in that same dialog, it shows a combobox allowing to choose which camera to use.

In the web site, I am starting the camera this way:

navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {

});

Can I do something with the getUserMedia function or this problem is only related to the PC configuration?

Answer 1

This has to do with Google Chrome. Assuming that OBS's deviceID stays the same, then use navigator.mediaDevices.enumerateDevices() to get a list of all available devices.

(MDN's example is quite handy):

navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {
    console.log(device.kind + ": " + device.label +
                " id = " + device.deviceId);
  });
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});

However, if you would like to be able to switch cameras mid stream, then I would recommend using WebRTC's "official" example, however, you will need to use stream.replaceTracks to view it in real time.

Answer 2

It sounds to me like your web software lacks a user user interface to let your user choose a camera or virtual camera, as @divinelemom suggested. It's a good idea to do that. Example code doing that is here.

https://webrtc.github.io/samples/src/content/devices/input-output/

In the meantime, use this URL to see Chrome's interface for choosing the default camera.

chrome://settings/content/camera

It gives you a page like this. Your choice is "sticky" in the sense that it will be used by your web app after you set it.