MediaDevices.getSupportedConstraints() — Methode · JavaScript-Referenz

Signatur

MediaDevices.prototype.getSupportedConstraints()

Beschreibung

Die Methode getSupportedConstraints() von navigator.mediaDevices liefert synchron ein Objekt, dessen Schlüssel die Namen der vom Browser unterstützten einschränkbaren Eigenschaften (Constraints) sind. Jeder vorhandene Schlüssel hat den Wert true. Nicht unterstützte Constraints fehlen im Objekt einfach und sind nicht mit false belegt.

Damit prüfst du vor einem Aufruf von getUserMedia(), getDisplayMedia() oder MediaStreamTrack.applyConstraints(), ob der Browser eine bestimmte Einstellung überhaupt versteht, z. B. facingMode für die Front- oder Rückkamera, echoCancellation, frameRate oder aspectRatio. So kannst du Bedienelemente gezielt ein- oder ausblenden und passende Fallbacks einbauen.

Wichtig: Die Methode beschreibt nur, welche Constraints die Browser-Implementierung kennt, nicht was ein konkretes Gerät kann. Für die Fähigkeiten einer bestimmten Kamera oder eines Mikrofons nutzt du MediaStreamTrack.getCapabilities(), für die aktuell aktiven Werte MediaStreamTrack.getSettings(). Die Methode verlangt keine Nutzerberechtigung und löst keine Berechtigungsabfrage aus.

Rückgabewert

Typ

MediaTrackSupportedConstraints

Beschreibung

Ein einfaches Objekt, dessen Eigenschaften die unterstützten Constraint-Namen sind (z. B. width, height, deviceId, facingMode, echoCancellation) und jeweils den Wert true haben. Nicht unterstützte Constraints fehlen.

Beispiele

Alle unterstützten Constraints auflisten

const supported = navigator.mediaDevices.getSupportedConstraints();

for (const name of Object.keys(supported)) {
  console.log(name);
}

aspectRatio autoGainControl channelCount deviceId echoCancellation facingMode frameRate height noiseSuppression width … (je nach Browser)

Rückkamera nur anfordern, wenn facingMode bekannt ist

const startCamera = async (videoEl) => {
  const supported = navigator.mediaDevices.getSupportedConstraints();

  const video = { width: { ideal: 1280 }, height: { ideal: 720 } };
  if (supported.facingMode) {
    video.facingMode = { ideal: 'environment' };
  } else {
    console.warn('facingMode wird nicht unterstützt – Standardkamera wird verwendet.');
  }

  const stream = await navigator.mediaDevices.getUserMedia({ video });
  videoEl.srcObject = stream;
  await videoEl.play();
  return stream;
};

startCamera(document.querySelector('video')).catch(console.error);

Audio-Optionen dynamisch zusammenstellen

const buildAudioConstraints = () => {
  const supported = navigator.mediaDevices.getSupportedConstraints();
  const wanted = {
    echoCancellation: true,
    noiseSuppression: true,
    autoGainControl: false,
    channelCount: 1
  };

  // Nur Constraints übernehmen, die der Browser kennt
  return Object.fromEntries(
    Object.entries(wanted).filter(([key]) => supported[key])
  );
};

const audio = buildAudioConstraints();
console.log(audio);
const stream = await navigator.mediaDevices.getUserMedia({ audio });

{ echoCancellation: true, noiseSuppression: true, autoGainControl: false, channelCount: 1 }

// Wichtig · Fallstricke

Browser-Unterstützung statt Geräte-Fähigkeit: supported.torch === true heißt nicht, dass die Kamera eine Taschenlampe hat. Prüfe konkrete Geräte mit track.getCapabilities().
Fehlende Schlüssel: Nicht unterstützte Constraints sind nicht false, sondern fehlen ganz. Prüfe daher per Wahrheitswert (if (supported.frameRate)) oder mit 'frameRate' in supported.
Unbekannte Constraints werden ignoriert: getUserMedia() übergeht unbekannte Constraints stillschweigend. Nur bei exact/min/max auf unterstützte Eigenschaften kann ein OverconstrainedError auftreten.
Sicherer Kontext: navigator.mediaDevices gibt es nur in sicheren Kontexten (HTTPS oder localhost). Auf HTTP ist es undefined. Prüfe das vorher, z. B. mit navigator.mediaDevices?.getSupportedConstraints.
Browser-Unterschiede: Die Liste ist je nach Engine unterschiedlich. Chrome, Firefox und Safari kennen z. B. resizeMode, latency oder displaySurface nicht alle gleichermaßen. Verlasse dich nicht auf eine feste Liste.

Siehe auch

MediaDevices MediaDevices.getUserMedia() MediaDevices.getDisplayMedia() MediaDevices.enumerateDevices() MediaStreamTrack.getCapabilities() MediaStreamTrack.getSettings() MediaStreamTrack.applyConstraints()