EN
JavaScript - list available audio and video input devices (e.g. web cameras and microphones)
6
points
In this short article, we would like to show how using JavaScript in simple way list available input audio and input video devices (web cameras and microphones).
Quick solution (ES2020+):
const listDevices = async () => {
const devices = await navigator.mediaDevices?.enumerateDevices?.();
if (devices) {
const video = [];
const audio = [];
for (const device of devices) {
switch (device.kind) {
case 'videoinput': video.push(device); break;
case 'audioinput': audio.push(device); break;
}
}
return {video, audio};
} else {
throw new Error('Media Devices API is not supported.');
}
};
// Usage example (in async scope):
try {
const devices = await listDevices();
const video = devices.video; // input video devices as array (e.g. web cameras)
const audio = devices.audio; // input audio devices as array (e.g. microphones)
// ...
} catch (error) {
console.error(error);
}
Note: presented Media Devices API was introduced in the major web browsers around 2015-2017.
ES2020+ syntax solution
In this section, you can find simple reusable logic that lists available input devices. Devices are ordered by importance. It means the most recommended or default devices should be listed as first.
// ONLINE-RUNNER:browser;
const listDevices = async () => {
const devices = await navigator.mediaDevices?.enumerateDevices?.();
if (devices) {
const video = [];
const audio = [];
for (const device of devices) {
switch (device.kind) {
case 'videoinput': video.push(device); break;
case 'audioinput': audio.push(device); break;
}
}
return {video, audio};
} else {
throw new Error('Media Devices API is not supported.');
}
};
// Usage example:
;(async () => {
try {
const devices = await listDevices();
const video = devices.video; // input video devices as array (e.g. web cameras)
const audio = devices.audio; // input audio devices as array (e.g. microphones)
console.log('video: ' + JSON.stringify(video, null, 4));
console.log('audio: ' + JSON.stringify(audio, null, 4));
} catch (error) {
console.error(error);
}
})();
Example output:
[
{
"deviceId": "1d39fec436738d96efcd83b35fa8a147fb105d7e7ff7a6252e2df1c8e27dd000",
"kind": "videoinput",
"label": "VF0700 Live! Cam Chat HD (041e:4088)",
"groupId": "9e90e4ed253438f960e4476c58bf8cef4b90ab84ea136fe1a2e2320289456b71"
}
]
[
{
"deviceId": "",
"kind": "audioinput",
"label": "",
"groupId": "9e90e4ed253438f960e4476c58bf8cef4b90ab84ea136fe1a2e2320289456b71"
}
]
Where: audioinput doesn't have label and device id parameters, but has the same group id as videoinput that means, it is microphone that is embedded in the web camera.
ES5 syntax solution
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<script>
function listDevices(callback) {
var devices = navigator.mediaDevices;
if (devices && 'enumerateDevices' in devices) {
var promise = devices.enumerateDevices();
promise
.then(function(devices) {
var video = [];
var audio = [];
for (var i = 0; i < devices.length; ++i) {
var device = devices[i];
switch (device.kind) {
case 'videoinput': video.push(device); break;
case 'audioinput': audio.push(device); break;
}
};
var devices = {
video: video,
audio: audio
};
callback(null, devices);
})
.catch(function(error) {
callback(`${error.name}: ${error.message}`, null);
});
} else {
callback(`Media Devices API is not supported.`, null);
}
}
// Usage example:
listDevices(function(error, devices) {
if (error) {
console.error(error);
} else {
var video = devices.video; // input video devices as array (e.g. web cameras)
var audio = devices.audio; // input audio devices as array (e.g. microphones)
console.log('video: ' + JSON.stringify(video, null, 4));
console.log('audio: ' + JSON.stringify(audio, null, 4));
}
});
</script>
</body>
</html>