MediaTrackSupportedConstraints.facingMode — Eigenschaft · JavaScript-Referenz

Signatur

MediaTrackSupportedConstraints.facingMode

Beschreibung

Die Eigenschaft facingMode des Wörterbuchs MediaTrackSupportedConstraints taucht im Objekt auf, das navigator.mediaDevices.getSupportedConstraints() zurückgibt. Ist sie vorhanden und true, versteht der User-Agent die Einschränkung facingMode. Mit ihr lässt sich bei getUserMedia() angeben, ob die Front- oder die Rückkamera verwendet werden soll.

Unterstützt der Browser die Einschränkung nicht, fehlt die Eigenschaft ganz. Den Wert false liefert sie also nie. Prüfen Sie daher einfach auf Wahrheitswert oder mit dem in-Operator.

Wichtig: Die Eigenschaft sagt nur, ob der Browser die Einschränkung kennt. Sie verrät nicht, ob das Gerät überhaupt eine Front- oder Rückkamera hat. Auf einem Desktop-Rechner mit einer einzigen Webcam steht facingMode trotzdem auf true. Welche Richtung eine konkrete Kamera tatsächlich hat, erfahren Sie über MediaStreamTrack.getSettings().facingMode oder getCapabilities().

Mögliche Werte der Einschränkung selbst sind "user" (zum Nutzer hin, Frontkamera), "environment" (vom Nutzer weg, Rückkamera), "left" und "right".

Rückgabewert

Typ

boolean

Beschreibung

true, wenn die Einschränkung facingMode unterstützt wird. Ohne Unterstützung fehlt die Eigenschaft (undefined).

Beispiele

Unterstützung prüfen

const supported = navigator.mediaDevices.getSupportedConstraints();

if (supported.facingMode) {
  console.log('facingMode wird unterstützt');
} else {
  console.log('facingMode wird nicht unterstützt');
}

facingMode wird unterstützt

Rückkamera anfordern, wenn möglich (z. B. für QR-Scanner)

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

  const constraints = {
    audio: false,
    video: supported.facingMode
      ? { facingMode: { ideal: 'environment' } }
      : true
  };

  const stream = await navigator.mediaDevices.getUserMedia(constraints);
  document.querySelector('video').srcObject = stream;

  const [track] = stream.getVideoTracks();
  console.log('Tatsächliche Richtung:', track.getSettings().facingMode ?? 'unbekannt');
};

startCamera().catch((err) => console.error('Kamerafehler:', err.name));

Tatsächliche Richtung: environment

Zwischen Front- und Rückkamera umschalten

let currentMode = 'user';
let stream = null;

const switchCamera = async () => {
  if (!('facingMode' in navigator.mediaDevices.getSupportedConstraints())) {
    console.warn('Kamerawechsel nicht möglich');
    return;
  }
  stream?.getTracks().forEach((t) => t.stop());
  currentMode = currentMode === 'user' ? 'environment' : 'user';
  stream = await navigator.mediaDevices.getUserMedia({
    video: { facingMode: currentMode }
  });
  document.querySelector('video').srcObject = stream;
  console.log('Aktiv:', currentMode);
};

document.querySelector('#switch').addEventListener('click', switchCamera);

Aktiv: environment

// Wichtig · Fallstricke

Kein Hardware-Nachweis: true heißt nur, dass der Browser die Einschränkung kennt, nicht, dass das Gerät mehrere Kameras hat. Fragen Sie die Kameras bei Bedarf mit enumerateDevices() ab.
Nie false: Ohne Unterstützung fehlt die Eigenschaft einfach. Ein Vergleich mit === false greift deshalb nie.
exact vs. ideal: Mit { facingMode: { exact: 'environment' } } schlägt der Aufruf mit OverconstrainedError fehl, wenn keine Rückkamera da ist. ideal oder ein einfacher String fällt dagegen auf eine andere Kamera zurück.
Sicherer Kontext: navigator.mediaDevices gibt es nur unter HTTPS oder auf localhost. Sonst ist es undefined.
Auf Desktop-Webcams liefert getSettings().facingMode häufig keinen Wert, weil das System die Richtung nicht kennt.
Vor einem Kamerawechsel sollten Sie die laufenden Tracks mit stop() beenden. Manche Mobilgeräte können nicht zwei Kameras gleichzeitig öffnen und melden sonst NotReadableError.

Siehe auch

MediaTrackConstraints.facingMode MediaTrackSupportedConstraints.deviceId MediaTrackSupportedConstraints.frameRate MediaTrackSupportedConstraints.height MediaTrackSupportedConstraints.latency