MediaDevices: enumerateDevices() method
Baseline 2023Newly available
Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.
TheenumerateDevices()
method of theMediaDevices
interface requests a list of the currently available media input and output devices, such as microphones, cameras, headsets, and so forth.The returnedPromise
is resolved with an array ofMediaDeviceInfo
objects describing the devices.
The returned list will omit any devices that are blocked by the documentPermission Policy:microphone
,camera
,speaker-selection
(for output devices), and so on.Access to particular non-default devices is also gated by thePermissions API, and the list will omit devices for which the user has not granted explicit permission.
In this article
Syntax
enumerateDevices()
Parameters
None.
Return value
APromise
that is fulfilled with an array ofMediaDeviceInfo
objects.Each object in the array describes one of the available media input and output devices.The order is significant — the default capture devices will be listed first.
Other than default devices, only devices for which permission has been granted are "available".
If the media device is an input device, anInputDeviceInfo
object will be returned instead.
If enumeration fails, the promise is rejected.
Security requirements
Access to the API is subject to the following constraints:
- The method must be called in asecure context.
- The document must be fully active and its visibility must be "visible".
Examples
Here's an example of usingenumerateDevices()
. It outputs a list of thedevice IDs, with their labels if available.
if (!navigator.mediaDevices?.enumerateDevices) { console.log("enumerateDevices() not supported.");} else { // List cameras and microphones. navigator.mediaDevices .enumerateDevices() .then((devices) => { devices.forEach((device) => { console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`); }); }) .catch((err) => { console.error(`${err.name}: ${err.message}`); });}
This might produce:
videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
or if one or moreMediaStream
s are active or persistent permissions aregranted:
videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
Specifications
Specification |
---|
Media Capture and Streams> # dom-mediadevices-enumeratedevices> |
Browser compatibility
Loading…
See also
MediaDevices.getUserMedia
- WebRTC - the introductory page to the API
- Media Capture and Streams API - the API for the media stream objects
- Taking webcam photos - atutorial on using
getUserMedia()
for taking photos rather than video.