How to access the device selection menu?

Question

I want to know if I can access the menu of devices from HTML5 / JavaScript (the menu that I show on the pictures).

Menu in Chrome

I do't want something like this: https://webrtc.github.io/samples/src/content/devices/input-output/

Answer 1

You're looking for navigator.mediaDevices.enumerateDevices.

First you need to request permission for access using navigator.GetUserMedia, which may still have browser-specific implementations.

You could then use enumerateDevices in the success callback, and populate some listboxes (etc) from there.

Here's something that works in webkit browsers (e.g. Chrome). You should use modernizr, or check for each browser-specific implementation of GetUserMedia.

navigator.webkitGetUserMedia(
{ audio: true, video: true }, 
function(MediaStream){
    // success
    navigator.mediaDevices.enumerateDevices()
        .then(function(devices){
            devices.forEach(function(device){
                console.log(device);
            });
        });
}, 
function(){
    // error
}
);