JavaScript - Navigator: mediaDevices

From PiRho Knowledgebase
Revision as of 09:28, 1 April 2025 by Dex (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

enumerateDevices

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: Chrome considers localhost to be a secure context.
The enumerateDevices() method of the MediaDevices interface requests a list of the currently available media input and output devices, such as microphones, cameras, headsets, and so forth. The returned Promise is resolved with an array of MediaDeviceInfo objects describing the devices.
The returned list will omit any devices that are blocked by the document Permission Policy: microphone, camera, speaker-selection (for output devices), and so on. Access to particular non-default devices is also gated by the Permissions API, and the list will omit devices for which the user has not granted explicit permission.

navigator.mediaDevices.enumerateDevices().then((devices) => {
	devices.forEach((device) => {
		console.log(device);
	});
});
[
	{
		"deviceId":"050adebb389e1053c33820502b49af8f751b480116bc1daa59a91a13f8bed3f1",
		"kind":"audioinput",
		"label":"Microphone Array (Realtek High Definition Audio(SST))",
		"groupId":"63079e2610a30fff53182bf1f68099eca0539fa78735c21434f10bcda330f7f3"
	},
	{
		"deviceId":"default",
		"kind":"audioinput",
		"label":"Default - Microphone Array (Realtek High Definition Audio(SST))",
		"groupId":"63079e2610a30fff53182bf1f68099eca0539fa78735c21434f10bcda330f7f3"
	},
	{
		"deviceId":"communications",
		"kind":"audioinput",
		"label":"Communications - Microphone Array (Realtek High Definition Audio(SST))",
		"groupId":"63079e2610a30fff53182bf1f68099eca0539fa78735c21434f10bcda330f7f3"
	},
	{
		"deviceId":"56c159a1ff68350571b356f4bf39ba94ad5a689bc3c40421c0d1b00d209f3ae0",
		"kind":"videoinput",
		"label":"Microsoft Camera Rear",
		"groupId":"c2054425e9394ff5922b3753ed315bada3eb932ec36be0c0b126dc24b5632f85"
	},
	{
		"deviceId":"e58044beaa915434ae7541b0325a53ae1e6f110d6dcbe170c6e0ca62e4de1cab",
		"kind":"videoinput",
		"label":"Microsoft Camera Front",
		"groupId":"da21826fa1d1c0f905b44bb40c81ab895b0b88fae173c3a1b23cee918a2a346c"
	},
	{
		"deviceId":"default",
		"kind":"audiooutput",
		"label":"Default - Speakers (Realtek High Definition Audio(SST))",
		"groupId":"63079e2610a30fff53182bf1f68099eca0539fa78735c21434f10bcda330f7f3"
	},
	{
		"deviceId":"communications",
		"kind":"audiooutput",
		"label":"Communications - Speakers (Realtek High Definition Audio(SST))",
		"groupId":"63079e2610a30fff53182bf1f68099eca0539fa78735c21434f10bcda330f7f3"
	},
	{
		"deviceId":"9212b4311848990bd2e23c1a7c99a252a7021f2da31cbdb72bd82f1928f5c68d",
		"kind":"audiooutput",
		"label":"Speakers (Realtek High Definition Audio(SST))",
		"groupId":"63079e2610a30fff53182bf1f68099eca0539fa78735c21434f10bcda330f7f3"
	}
]

getUserMedia

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: Chrome considers localhost to be a secure context.
The getUserMedia() method of the MediaDevices interface prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.

var constraints = {audio: true, video: true};
navigator.mediaDevices.getUserMedia(constraints);

References

[MDN: Navigator: mediaDevices property] [MDN: MediaDevices: enumerateDevices() method] [MDN: MediaDevices: getUserMedia() method]