mediaDevices.enumerateDevices() returns empty deviceId even after getting permissions

Question

The problem I have has been discussed in several questions on this site: When I call mediaDevices.enumerateDevices(), the field deviceId is empty. The best question about this I could find is this one. The answer explains that you need to ask the user for permission before enumerating the devices. Should it still not work after getting permission, "you did something wrong".

And this is exactly the situation I'm in. I even cloned the WebRTC example mentioned in the answer. If I run the actual website, everything works fine. But if I run it locally, I not only see no device names, the lists are also limited to one entry, as if I've never give permission.

The only other lead I have is a comment from the accepted answer of this question, which reads:

Note that the enumerate calls don't work on a local dev machine. They have to be deployed to your website in order to function properly.

This sounds like a potential solution to the problem, however I have some doubts.

1. Neither the documentation, nor any other discussion about this topic mention anything like that being the case.
2. The enumeration basically works. I see the correct number of audio and video inputs, just the IDs are empty, as if I've not given permission.

Answer 1

After giving permissions to video and audio to the page, you should see the list of inputs with their respective id's, here is and example:

await navigator.mediaDevices.getUserMedia({video: true, audio: true})

You can request permissions to access devices by accessing the MediaStream

After that you can fully access the input list.

await navigator.mediaDevices.enumerateDevices()