In the, the first step is to list all the cameras and mics before streaming starts. To do this, you can call this at window.onload:

navigator.getUserMedia({audio:true,video:true}, function(stream) {
}, err=>console.log(err));

This kicks off a video stream (which prompts the browser for access), and then immediately stops it. The camera light turns on briefly, but turns off as soon as permission is granted.

The getCamAndMics() function now can iterate through all of the cameras and microphones to populate the form:


The code can be found on github:

Did this answer your question?