MediaTrackSupportedConstraints — Schnittstelle · JavaScript-Referenz

Signatur

interface MediaTrackSupportedConstraints

Beschreibung

MediaTrackSupportedConstraints ist ein Wörterbuch (Dictionary), also keine Klasse mit Konstruktor. Man erhält es als einfaches Objekt über navigator.mediaDevices.getSupportedConstraints(). Jede Eigenschaft steht für ein Constraint, das der Browser kennt, und hat den Wert true. Constraints, die der Browser nicht kennt, fehlen im Objekt einfach.

Wichtige Eigenschaften sind unter anderem:

Video: width, height, aspectRatio, frameRate, facingMode, resizeMode
Audio: autoGainControl, echoCancellation, noiseSuppression, sampleRate, sampleSize, channelCount, latency
Allgemein: deviceId, groupId
Bildschirmfreigabe: displaySurface, logicalSurface, suppressLocalAudioPlayback

Das Objekt nutzt man zur Funktionserkennung, bevor man Constraints an getUserMedia(), getDisplayMedia() oder MediaStreamTrack.applyConstraints() übergibt. Unbekannte Constraints werden vom Browser nämlich stillschweigend ignoriert. Mit dieser Prüfung kann die Anwendung also gezielt Alternativen anbieten oder Bedienelemente ausblenden.

Wichtig: Das Wörterbuch sagt nur, dass der Browser ein Constraint versteht. Ob ein bestimmtes Gerät den Wert tatsächlich umsetzen kann, verrät es nicht. Dafür gibt es MediaStreamTrack.getCapabilities() und getSettings().

Rückgabewert

Typ

MediaTrackSupportedConstraints

Beschreibung

Einfaches Objekt, in dem jedes unterstützte Constraint als Schlüssel mit dem Wert true steht. Man erhält es über navigator.mediaDevices.getSupportedConstraints().

Beispiele

Alle unterstützten Constraints auflisten

const supported = navigator.mediaDevices.getSupportedConstraints();

// Alle bekannten Constraints ausgeben
for (const name of Object.keys(supported)) {
  console.log(name);
}

aspectRatio deviceId echoCancellation facingMode frameRate height width ...

Constraints nur verwenden, wenn der Browser sie kennt

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

  const video = { width: { ideal: 1280 }, height: { ideal: 720 } };
  if (supported.facingMode) {
    video.facingMode = 'user'; // Frontkamera bevorzugen
  }
  if (supported.frameRate) {
    video.frameRate = { ideal: 30, max: 60 };
  }

  const audio = supported.echoCancellation
    ? { echoCancellation: true, noiseSuppression: !!supported.noiseSuppression }
    : true;

  const stream = await navigator.mediaDevices.getUserMedia({ video, audio });
  document.querySelector('video').srcObject = stream;
  return stream;
};

startCamera().catch((err) => console.error('Kamera-Fehler:', err.name));

Bedienelement für die Rauschunterdrückung nur bei Unterstützung anzeigen

const { noiseSuppression } = navigator.mediaDevices.getSupportedConstraints();
const toggle = document.querySelector('#noise-toggle');

toggle.hidden = !noiseSuppression;

toggle.addEventListener('change', async () => {
  const [track] = currentStream.getAudioTracks();
  await track.applyConstraints({ noiseSuppression: toggle.checked });
  console.log('Aktiv:', track.getSettings().noiseSuppression);
});

Aktiv: true

// Wichtig · Fallstricke

Browser gegenüber Gerät: true heißt nur, dass der Browser das Constraint versteht. Ob die Kamera zum Beispiel 60 fps liefert, zeigt erst track.getCapabilities().
Nicht unterstützte Constraints fehlen im Objekt, sie haben also nicht den Wert false. Deshalb auf Wahrheitswert prüfen (if (supported.x)) und nicht auf === false.
Browser ignorieren unbekannte Constraints stillschweigend. Das gilt auch bei exact: Ein unbekanntes Constraint löst dann keinen OverconstrainedError aus.
Sicherer Kontext: navigator.mediaDevices gibt es nur über HTTPS oder localhost. Andernfalls ist es undefined.
Browser-Kompatibilität: Die Unterstützung einzelner Eigenschaften unterscheidet sich stark. Safari und Firefox kennen zum Beispiel nicht alle Constraints für die Bildschirmfreigabe (displaySurface, suppressLocalAudioPlayback) oder resizeMode.
Für einen Aufruf von getSupportedConstraints() ist keine Berechtigung nötig. Er gibt aber in gewissem Umfang Merkmale preis, die sich zum Fingerprinting eignen.

Siehe auch

MediaTrackConstraints MediaTrackSettings RTCTransportStats GPUSupportedLimits MediaEncryptedEvent