JavaScript - Navigator: mediaDevices: Difference between revisions

From PiRho Knowledgebase
Jump to navigationJump to search
Dex (talk | contribs)
 
Dex (talk | contribs)
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
[[Category:JavaScript]]
[[Category:JavaScript]]
[[Category:Multimedia]]
[[Category:Multimedia]]
Reference: [[https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices MDN: Navigator: mediaDevices property]]
== enumerateDevices ==
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.<br/>
Note: Chrome considers localhost to be a secure context.<br/>
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.<br/>
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.
<pre>
navigator.mediaDevices.enumerateDevices().then((devices) => {
devices.forEach((device) => {
console.log(device);
});
});
</pre>
<pre>
[
{
"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"
}
]
</pre>
== getUserMedia ==
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.<br/>
Note: Chrome considers localhost to be a secure context.<br/>
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.
<pre>
var constraints = {audio: true, video: true};
navigator.mediaDevices.getUserMedia(constraints);
</pre>
== References ==
[[https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices MDN: Navigator: mediaDevices property]]
[[https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices MDN: MediaDevices: enumerateDevices() method]]
[[https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia MDN: MediaDevices: getUserMedia() method]]

Latest revision as of 09:28, 1 April 2025

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]