MediaDevices

Instanzeigenschaften

Erbt Eigenschaften von der übergeordneten Schnittstelle EventTarget.

Instanzmethoden

Erbt Methoden von der übergeordneten Schnittstelle EventTarget.

enumerateDevices()

Liefert ein Array mit Informationen über die auf dem System verfügbaren Medieneingabe- und -ausgabegeräte.

getSupportedConstraints()

Gibt ein Objekt zurück, das angibt, welche einschränkbaren Eigenschaften von der Schnittstelle MediaStreamTrack unterstützt werden. Weitere Informationen zu Constraints und ihrer Verwendung finden Sie unter Media Streams API.

getDisplayMedia()

Fordert die nutzende Person auf, einen Bildschirm oder einen Teil davon (etwa ein Fenster) auszuwählen, um ihn als MediaStream für die Freigabe oder Aufzeichnung zu erfassen. Gibt ein Promise zurück, das mit einem MediaStream erfüllt wird.

getUserMedia()

Aktiviert nach einer Berechtigungsabfrage eine Kamera und/oder ein Mikrofon des Systems und stellt einen MediaStream bereit, der einen Videotrack und/oder einen Audiotrack mit den Eingabedaten enthält.

selectAudioOutput()

Fordert die nutzende Person auf, ein bestimmtes Audioausgabegerät auszuwählen.

Ereignisse

devicechange

Wird ausgelöst, wenn ein Medieneingabe- oder -ausgabegerät an den Computer der nutzenden Person angeschlossen oder davon entfernt wird.

Beispiel

// Put variables in global scope to make them available to the browser console.
const video = document.querySelector("video");
const constraints = {
  audio: false,
  video: true,
};

navigator.mediaDevices
  .getUserMedia(constraints)
  .then((stream) => {
    const videoTracks = stream.getVideoTracks();
    console.log("Got stream with constraints:", constraints);
    console.log(`Using video device: ${videoTracks[0].label}`);
    stream.onremovetrack = () => {
      console.log("Stream ended");
    };
    video.srcObject = stream;
  })
  .catch((error) => {
    if (error.name === "OverconstrainedError") {
      console.error(
        `The resolution ${constraints.video.width.exact}x${constraints.video.height.exact} px is not supported by your device.`,
      );
    } else if (error.name === "NotAllowedError") {
      console.error(
        "You need to grant this page permission to access your camera and microphone.",
      );
    } else {
      console.error(`getUserMedia error: ${error.name}`, error);
    }
  });

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Media Capture and Streams API: Die API, zu der diese Schnittstelle gehört.
• Screen Capture API: Die API, die die Methode getDisplayMedia() definiert.
• WebRTC API
• Navigator.mediaDevices: Gibt eine Referenz auf ein MediaDevices-Objekt zurück, über das auf Geräte zugegriffen werden kann.
• CameraCaptureJS: Erfassung und Wiedergabe von HTML-Videos mit MediaDevices und der MediaStream Recording API
• OpenLang: Webanwendung für ein Sprachlabor mit HTML-Videos, die MediaDevices und die MediaStream Recording API zur Videoaufzeichnung verwendet