MediaTrackSupportedConstraints.height — Eigenschaft · JavaScript-Referenz

Signatur

MediaTrackSupportedConstraints.height

Beschreibung

Die Eigenschaft height gehört zum Dictionary MediaTrackSupportedConstraints. Dieses Objekt liefert navigator.mediaDevices.getSupportedConstraints(). Kennt der Browser die Constraint height, ist die Eigenschaft vorhanden und hat den Wert true. Kennt er sie nicht, fehlt sie ganz. Den Wert false hat sie nie.

Mit der Constraint height legt man bei getUserMedia() oder MediaStreamTrack.applyConstraints() die gewünschte Bildhöhe einer Videospur in Pixeln fest, z. B. als exakten Wert, als Bereich (min/max) oder als Idealwert (ideal). Die Prüfung über getSupportedConstraints() sollte man vorher machen, damit Constraints nicht still ignoriert werden und die Anwendung einen sinnvollen Ausweichweg nehmen kann.

Wichtig: Die Eigenschaft sagt nur, ob der Browser die Constraint versteht. Sie sagt nichts darüber, ob die Kamera eine bestimmte Auflösung liefern kann. Welche Höhen das Gerät wirklich unterstützt, verraten MediaStreamTrack.getCapabilities() und danach getSettings().

Rückgabewert

Typ

boolean | undefined

Beschreibung

true, wenn der Browser die Constraint height unterstützt. Andernfalls fehlt die Eigenschaft, der Zugriff liefert dann undefined.

Beispiele

Unterstützung der height-Constraint prüfen

const supported = navigator.mediaDevices.getSupportedConstraints();

if (supported.height) {
  console.log('height-Constraint wird unterstützt');
} else {
  console.log('height-Constraint wird NICHT unterstützt');
}

height-Constraint wird unterstützt

Kamera mit gewünschter Höhe öffnen (mit Ausweichweg)

const startCamera = async () => {
  const supported = navigator.mediaDevices.getSupportedConstraints();
  const video = supported.height
    ? { height: { ideal: 720, min: 360 } }
    : true; // ohne Unterstützung: Standardauflösung

  const stream = await navigator.mediaDevices.getUserMedia({ video });
  const [track] = stream.getVideoTracks();
  console.log('Tatsächliche Höhe:', track.getSettings().height);
  document.querySelector('video').srcObject = stream;
};

startCamera().catch(err => console.error(err.name, err.message));

Tatsächliche Höhe: 720

Auflösung einer laufenden Spur nachträglich ändern

const lowerResolution = async (track) => {
  if (!navigator.mediaDevices.getSupportedConstraints().height) return;

  const { height } = track.getCapabilities();
  const target = Math.max(height?.min ?? 240, 240);

  await track.applyConstraints({ height: { ideal: target } });
  console.log('Neue Höhe:', track.getSettings().height);
};

Neue Höhe: 240

// Wichtig · Fallstricke

Vorhandensein statt Wert prüfen: Die Eigenschaft ist entweder true oder fehlt ganz. Eine Abfrage wie supported.height === false trifft darum nie zu. Prüfe besser mit if (supported.height) oder 'height' in supported.
Browser ≠ Gerät: true heißt nicht, dass die Kamera die gewünschte Höhe liefert. Nutze getCapabilities() und prüfe nach dem Aufruf mit getSettings(), was tatsächlich eingestellt wurde.
Harte Constraints: Mit exact oder min kann getUserMedia() einen OverconstrainedError werfen. ideal ist robuster.
Ausrichtung: Auf Mobilgeräten können Breite und Höhe je nach Hoch- oder Querformat vertauscht sein.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt (Chrome, Edge, Firefox, Safari). mediaDevices gibt es nur in sicheren Kontexten (HTTPS oder localhost).

Siehe auch

MediaTrackSupportedConstraints MediaDevices.getSupportedConstraints() MediaTrackSupportedConstraints.width MediaTrackSupportedConstraints.aspectRatio MediaDevices.getUserMedia() MediaStreamTrack.applyConstraints() MediaStreamTrack.getCapabilities()