google-chromewebrtcmediadevicesgoogle-meetvirtual-webcam

MediaDevices.enumerateDevices() is not showing virtual webcam in browser but google meet and other website are showing

I use Google meet in Chrome browser for online video meeting. In Google meet I can select my webcam in video devices. I can select any real hardware or virtual webcam and thats works well.

I am sure Chrome detect all real or virtual webcam see content of chrome://media-internals/

enter image description here

But MediaDevices.enumerateDevices() is only showing real hardware webcam and not showing virtual webcams.

<!DOCTYPE html>
<html>

<body>
    <script>
        (async () => {
            await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
            let devices = await navigator.mediaDevices.enumerateDevices();
            console.log(devices);
        })();
    </script>
</body>

</html>

Hereis output of console in devtools:

[
    {
        "deviceId": "",
        "kind": "audioinput",
        "label": "",
        "groupId": "a71e32bec65bc4788683c156cfbc3c005bce4535b980209e4a455973bd93f36a"
    },
    {
        "deviceId": "",
        "kind": "videoinput",
        "label": "",
        "groupId": "03e0a9c9e71757f81bef3f3a74c4a56785b2d3d103a7de883101e509c233977f"
    },
    {
        "deviceId": "",
        "kind": "audiooutput",
        "label": "",
        "groupId": "a71e32bec65bc4788683c156cfbc3c005bce4535b980209e4a455973bd93f36a"
    }
]

How come Google meet and other websites are showing all camera including virtual camera and why MediaDevices.enumerateDevices() is not showing virtual camera?

Solution

  • An empty label and only the default devices being shown in enumerateDevices after successful getUserMedia is an edge case that can only happen when testing on file:/// urls. It should work normally on https:// urls (and on localhost) where a successful getUserMedia call grants permission to the extended list of devices (see this PSA for details)