MediaDevices
L'interface MediaDevices
permet d'accéder aux périphériques d'entrée multimédia connectés tels que les caméras et les microphones, ainsi que le partage d'écran. Essentiellement, il vous permet d'accéder à n'importe quelle source matérielle de données multimédias.
Propriétés
Hérite des propriétés de son interface parente, EventTarget
.
Évènements
devicechange
(en-US)-
Déclenché lorsqu'un périphérique d'entrée ou de sortie multimédia est connecté ou retiré de l'ordinateur de l'utilisateur. Egalement disponible via la propriété
ondevicechange
(en-US).
Méthodes
Hérite des méthodes de son interface parente, EventTarget
.
enumerateDevices()
(en-US)-
Obtient un tableau d'informations sur les périphériques d'entrée et de sortie multimédia disponibles sur le système.
getSupportedConstraints()
(en-US)-
Renvoie un objet conforme à
MediaTrackSupportedConstraints
(en-US) indiquant quelles propriétés de contrainte sont prises en charge sur l'interfaceMediaStreamTrack
(en-US). Consultez Capabilities and constraints in Media Capture and Streams API (Media Stream) pour en savoir plus sur les contraintes et comment les utiliser. getDisplayMedia()
(en-US)-
Invite l'utilisateur à sélectionner un affichage ou une partie d'un affichage (comme une fenêtre) à capturer en tant que
MediaStream
à des fins de partage ou d'enregistrement. Renvoie une promesse qui se résout en unMediaStream
. getUserMedia()
-
Avec l'autorisation de l'utilisateur via une invite, allume une caméra et / ou un microphone sur le système et fournit un
MediaStream
contenant une piste vidéo et / ou une piste audio avec l'entrée.
Exemple
'use strict';
// Placez les variables dans la portée globale pour les rendre disponibles à la console du navigateur.
var video = document.querySelector('video');
var constraints = window.constraints = {
audio: false,
video: true
};
var errorElement = document.querySelector('#errorMsg');
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var videoTracks = stream.getVideoTracks();
console.log('Got stream with constraints:', constraints);
console.log('Using video device: ' + videoTracks[0].label);
stream.onremovetrack = function() {
console.log('Stream ended');
};
window.stream = stream; // rendre la variable disponible dans la console du navigateur
video.srcObject = stream;
})
.catch(function(error) {
if (error.name === 'ConstraintNotSatisfiedError') {
errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
constraints.video.height.exact + ' px is not supported by your device.');
} else if (error.name === 'PermissionDeniedError') {
errorMsg('Permissions have not been granted to use your camera and ' +
'microphone, you need to allow the page access to your devices in ' +
'order for the demo to work.');
}
errorMsg('getUserMedia error: ' + error.name, error);
});
function errorMsg(msg, error) {
errorElement.innerHTML += '<p>' + msg + '</p>';
if (typeof error !== 'undefined') {
console.error(error);
}
}
Spécifications
Specification |
---|
Media Capture and Streams # mediadevices |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Media Capture et Streams API: l'API dont cette interface fait partie.
- API de capture d'écran: L'API définissant la méthode
getDisplayMedia()
(en-US). - WebRTC API
Navigator.mediaDevices
(en-US): Renvoie une référence à un objetMediaDevices
qui peut être utilisé pour accéder aux périphériques.- CameraCaptureJS: Capture et lecture vidéo HTML5 à l'aide de
MediaDevices
et de l'API d'enregistrement MediaStream (source sur GitHub) - OpenLang: Application Web de laboratoire de langage vidéo HTML5 video utilisant
MediaDevices
et l'API d'enregistrement MediaStream pour l'enregistrement vidéo (source sur GitHub)