MediaDevices: devicechange event
A devicechange
event is sent to a MediaDevices
instance whenever a media device such as a camera, microphone, or speaker is connected to or removed from the system.
This event is not cancelable and does not bubble.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("devicechange", (event) => {});
ondevicechange = (event) => {};
Event type
A generic Event
.
Example
In this example, we create a function called updateDeviceList()
, which is
called once when MediaDevices.getUserMedia()
successfully obtains a
stream, and then is called any time the device list changes. It displays in the browser
window two lists: one of audio devices and one of video devices, with both the device's
label (name) and whether it's an input or an output device. Because the example provides
a handler for the devicechange
event, the list is refreshed any time a
media device is attached to or removed from the device running the sample.
We set up global variables that contain references to the <ul>
elements that are used to list the audio and video devices:
js
const audioList = document.getElementById("audioList");
const videoList = document.getElementById("videoList");
Getting and drawing the device list
Now let's take a look at updateDeviceList()
itself. This method is called
any time we want to fetch the current list of media devices and then update the
displayed lists of audio and video devices using that information.
js
function updateDeviceList() {
navigator.mediaDevices.enumerateDevices().then((devices) => {
audioList.innerHTML = "";
videoList.innerHTML = "";
devices.forEach((device) => {
const elem = document.createElement("li");
const [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
elem.innerHTML = `<strong>${device.label}</strong> (${direction})`;
if (type === "audio") {
audioList.appendChild(elem);
} else if (type === "video") {
videoList.appendChild(elem);
}
});
});
}
updateDeviceList()
consists entirely of a call to the function
enumerateDevices()
on the
MediaDevices
object referenced in the
navigator.mediaDevices
property, as well as the code that's run when the
promise
returned by enumerateDevices()
is fulfilled. The
fulfillment handler is called when the device list is ready. The list is passed into the
fulfillment handler as an array of MediaDeviceInfo
objects, each
describing one media input or output device.
A forEach()
loop is used to scan through all the
devices. For each device, we create a new <li>
object to be used to
display it to the user.
The line
let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
deserves special notice. This uses destructuring assignment to assign the values of the first three items in the array returned by
String.match()
to the variables kind
, type
, and
direction
. We do this because the value of
MediaDeviceInfo.kind
is a single string that includes both the media type
and the direction the media flows, such as "audioinput" or "videooutput". This line,
then, pulls out the type ("audio" or "video") and direction ("input" or "output") so
they can be used to construct the string displayed in the list.
Once the string is assembled, containing the device's name in bold and the direction in
parentheses, it's appended to the appropriate list by calling
appendChild()
on either audioList
or
videoList
, as appropriate based on the device type.
Handling device list changes
We call updateDeviceList()
in two places. The first is in the
getUserMedia()
promise's fulfillment
handler, to initially fill out the list when the stream is opened. The second is in the
event handler for this devicechange
event:
js
navigator.mediaDevices.ondevicechange = (event) => {
updateDeviceList();
};
With this code in place, each time the user plugs in a camera, microphone, or other
media device, or turns one on or off, we call updateDeviceList()
to redraw
the list of connected devices.
Result
Specifications
Specification |
---|
Media Capture and Streams # event-mediadevices-devicechange |
Media Capture and Streams # dom-mediadevices-ondevicechange |
Browser compatibility
BCD tables only load in the browser