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/
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?
An empty label and only the default devices being shown in
enumerateDevicesafter successfulgetUserMediais an edge case that can only happen when testing onfile:///urls. It should work normally onhttps://urls (and on localhost) where a successful getUserMedia call grants permission to the extended list of devices (see this PSA for details)