JavaScript - Navigator: mediaDevices: Difference between revisions
No edit summary |
No edit summary |
||
| Line 64: | Line 64: | ||
} | } | ||
] | ] | ||
</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> | </pre> | ||
== References == | == 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/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/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]