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énéments

devicechange

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.

Méthodes

Hérite des méthodes de son interface parente, EventTarget.

enumerateDevices()

Obtient un tableau d'informations sur les périphériques d'entrée et de sortie multimédia disponibles sur le système.

getSupportedConstraints()

Renvoie un objet conforme à MediaTrackSupportedConstraints indiquant quelles propriétés de contrainte sont prises en charge sur l'interface MediaStreamTrack. Consultez Capabilities and constraints in Media Capture and Streams API (Media Stream) pour en savoir plus sur les contraintes et comment les utiliser.

getDisplayMedia()

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 un MediaStream.

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

Compatibilité des navigateurs

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().
• WebRTC API
• Navigator.mediaDevices: Renvoie une référence à un objet MediaDevices 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)