MediaTrackSettings.height — Eigenschaft · JavaScript-Referenz

Signatur

MediaTrackSettings.height

Beschreibung

Die Eigenschaft height des Wörterbuchs MediaTrackSettings gibt an, wie viele Pixel hoch ein Video-Track tatsächlich gerade konfiguriert ist. Das Objekt bekommt man über MediaStreamTrack.getSettings().

Wichtig ist der Unterschied zu den Constraints: Bei getUserMedia() oder applyConstraints() gibt man nur Wünsche an, etwa { height: { ideal: 1080 } }. Welche Auflösung Browser und Kamera am Ende liefern, sieht man erst an getSettings().height. Deshalb braucht man die Eigenschaft, um Canvas-Größen, Layouts oder Upload-Parameter an die echte Auflösung anzupassen.

Bei Audio-Tracks gibt es die Eigenschaft nicht. Ob der Browser das Constraint height überhaupt kennt, verrät navigator.mediaDevices.getSupportedConstraints().height.

Rückgabewert

Typ

number

Beschreibung

Ganzzahl mit der aktuellen Höhe des Video-Tracks in Pixeln. Bei Audio-Tracks oder fehlender Unterstützung ist sie undefined.

Beispiele

Tatsächliche Kameraauflösung auslesen

const stream = await navigator.mediaDevices.getUserMedia({
  video: { width: { ideal: 1920 }, height: { ideal: 1080 } }
});
const [track] = stream.getVideoTracks();
const { width, height } = track.getSettings();
console.log(`Kamera liefert ${width}×${height}`);

Kamera liefert 1280×720

Canvas an die echte Videohöhe anpassen

const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const [track] = stream.getVideoTracks();
const canvas = document.querySelector('canvas');
const settings = track.getSettings();
canvas.width = settings.width ?? 640;
canvas.height = settings.height ?? 480;
console.log('Canvas-Höhe:', canvas.height);

Canvas-Höhe: 480

Höhe nach applyConstraints() prüfen

const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const [track] = stream.getVideoTracks();

if (navigator.mediaDevices.getSupportedConstraints().height) {
  try {
    await track.applyConstraints({ height: { exact: 720 } });
  } catch (err) {
    console.warn('720p nicht möglich:', err.name);
  }
  console.log('Aktuelle Höhe:', track.getSettings().height);
}

Aktuelle Höhe: 720

// Wichtig · Fallstricke

Der Wert kann von der gewünschten Höhe abweichen, etwa wenn die Kamera die Auflösung nicht beherrscht. Verlassen Sie sich nie auf ideal-Werte, sondern lesen Sie immer getSettings() aus.
Auf Mobilgeräten können Breite und Höhe je nach Ausrichtung (Hoch- oder Querformat) vertauscht sein.
getSettings() liefert nur einen Schnappschuss. Ändert sich die Auflösung später, zum Beispiel beim Teilen des Bildschirms mit getDisplayMedia() und anschließendem Ändern der Fenstergröße, müssen Sie die Methode erneut aufrufen. Alternativ können Sie videoWidth und videoHeight des <video>-Elements nutzen, zusammen mit dem Ereignis resize.
Der Zugriff auf Kamera oder Bildschirm ist nur in einem sicheren Kontext (HTTPS) und mit Erlaubnis der Nutzerin oder des Nutzers möglich.
Alle modernen Browser unterstützen die Eigenschaft. Ältere Safari-Versionen melden bei manchen Quellen undefined.

Siehe auch

MediaTrackConstraints.deviceId MediaTrackSettings.width MediaTrackSettings.cursor MediaTrackSettings.deviceId MediaTrackSettings.volume