MediaDevices.enumerateDevices() is not showing all the media devices when accessing via file protocol?

Question

My index.html to list all media devices is

<!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>

When I access this index.html via file protocol like file:///some-path/index.html I see only few devies that too without label.

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

But when I access this index.html via http protocol like http://localhost/index.html I see all the devices

[
    {
        "deviceId": "default",
        "kind": "audioinput",
        "label": "Default - Microphone Array (Realtek(R) Audio)",
        "groupId": "95ad50034942d5fc0302807034812fe5fcc218f9b09ca646add4a14a8b2622bf"
    },
    {
        "deviceId": "communications",
        "kind": "audioinput",
        "label": "Communications - Microphone Array (Realtek(R) Audio)",
        "groupId": "95ad50034942d5fc0302807034812fe5fcc218f9b09ca646add4a14a8b2622bf"
    },
    {
        "deviceId": "3a7aefd60c0ca518309257aa2cb4d1e551dbbc515b1b44db6e9dca1fe3707043",
        "kind": "audioinput",
        "label": "Microphone Array (Realtek(R) Audio)",
        "groupId": "95ad50034942d5fc0302807034812fe5fcc218f9b09ca646add4a14a8b2622bf"
    },
    {
        "deviceId": "d8fe6e8b9ea6af07937e5cca27156df470b9ebe074bcde2c9c5a08c4a587f6e3",
        "kind": "videoinput",
        "label": "HP TrueVision HD Camera (05c8:03d2)",
        "groupId": "a7e998e3f31252e8fa432646d953e9ce05b365a184f62e23fc44baa4efef902f"
    },
    {
        "deviceId": "a05bca7ff5990c524b424bea2612606cd5227089ce608e18b4e11e81218a559c",
        "kind": "videoinput",
        "label": "mmhmm Camera",
        "groupId": "d688503a66132497bc8d6069bad536af1bc831c95489d37e44f23c8ec35e50bb"
    },
    {
        "deviceId": "e744025c7a3cdacf663161d755304f6472af21bb6148c0b4adc40ad2ea5a012d",
        "kind": "videoinput",
        "label": "OBS Virtual Camera",
        "groupId": "b91d30a4ab3fa102a7907c58f6fe34e92886feef841112809fc2179a9b16fb93"
    },
    {
        "deviceId": "default",
        "kind": "audiooutput",
        "label": "Default - Speaker (Realtek(R) Audio)",
        "groupId": "95ad50034942d5fc0302807034812fe5fcc218f9b09ca646add4a14a8b2622bf"
    },
    {
        "deviceId": "communications",
        "kind": "audiooutput",
        "label": "Communications - Speaker (Realtek(R) Audio)",
        "groupId": "95ad50034942d5fc0302807034812fe5fcc218f9b09ca646add4a14a8b2622bf"
    },
    {
        "deviceId": "2f1d086698e7f7f056501e2b229a1d704e68e9c623694148f0cb173af68b5b03",
        "kind": "audiooutput",
        "label": "Speaker (Realtek(R) Audio)",
        "groupId": "95ad50034942d5fc0302807034812fe5fcc218f9b09ca646add4a14a8b2622bf"
    }
]

How can I see all the devices via file protocol (file:///) only?

Have you figured it out yet? I am encountering the same issue right now... — Andrei, Jan 14 '22 at 22:35
I think this answers it. https://stackoverflow.com/a/66001775/5449823 — Nimrod Borochov, May 16 '22 at 05:52

score 0 · Answer 1 · answered Aug 24 '22 at 08:12

The Media Capture and Streams APIs only work in secure contexts. See MDN and related specifications.

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

https://w3c.github.io/mediacapture-main/#interface-definition

linked: https://bugs.chromium.org/p/webrtc/issues/detail?id=14393

MediaDevices.enumerateDevices() is not showing all the media devices when accessing via file protocol?

1 Answers1

Linked