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.

Hérite des propriétés de son interface parente, EventTarget.

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).

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'interface MediaStreamTrack (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 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.

'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);
  }
}

• 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 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)