Signatur
Beschreibung
Die Eigenschaft width des Wörterbuchs MediaTrackSettings enthält die tatsächlich wirksame Breite eines Video-Tracks in Pixeln. Du erhältst das Objekt über MediaStreamTrack.getSettings(). Anders als bei den Einschränkungen (Constraints), die du bei getUserMedia() oder applyConstraints() angibst, steht hier der Wert, den Browser und Gerät wirklich eingestellt haben.
Das ist wichtig, weil Einschränkungen wie { width: { ideal: 1920 } } nur Wünsche sind. Kamera oder Treiber liefern oft eine andere Auflösung, zum Beispiel 1280 statt 1920. Mit settings.width (meist zusammen mit settings.height) findest du heraus, welche Auflösung tatsächlich ankommt. Das brauchst du etwa, um die Größe eines Canvas festzulegen, Layouts anzupassen oder die Aufnahmequalität zu protokollieren.
Die Eigenschaft gibt es nur bei Video-Tracks. Bei Audio-Tracks fehlt sie im Rückgabeobjekt. Ob der Browser die Einschränkung grundsätzlich kennt, prüfst du vorher mit navigator.mediaDevices.getSupportedConstraints().width.
Rückgabewert
undefined, weil die Eigenschaft dann im Objekt fehlt.Beispiele
Tatsächliche Kamera-Auflösung auslesen
const zeigeAufloesung = async () => {
const stream = await navigator.mediaDevices.getUserMedia({
video: { width: { ideal: 1920 }, height: { ideal: 1080 } }
});
const [track] = stream.getVideoTracks();
const { width, height } = track.getSettings();
console.log(`Gewünscht: 1920x1080, erhalten: ${width}x${height}`);
};
zeigeAufloesung().catch(console.error);Canvas passend zur Videobreite dimensionieren
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const [track] = stream.getVideoTracks();
const { width = 640, height = 480 } = track.getSettings();
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.append(canvas);
const video = document.createElement('video');
video.srcObject = stream;
await video.play();
canvas.getContext('2d').drawImage(video, 0, 0, width, height);
console.log(`Schnappschuss mit ${canvas.width}px Breite erstellt`);Breite nach applyConstraints() überprüfen
const aendereBreite = async (track, zielBreite) => {
if (!navigator.mediaDevices.getSupportedConstraints().width) {
console.warn('width-Constraint wird nicht unterstützt');
return;
}
try {
await track.applyConstraints({ width: { exact: zielBreite } });
} catch (err) {
console.warn(`Nicht möglich: ${err.name}`);
}
console.log('Aktuelle Breite:', track.getSettings().width);
};
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
await aendereBreite(stream.getVideoTracks()[0], 320);// Wichtig · Fallstricke
- Einstellung ist nicht gleich Einschränkung:
getSettings().widthliefert den wirksamen Wert,getConstraints().widthdagegen den angeforderten, zum Beispiel{ ideal: 1920 }. Verwechsle die beiden nicht. - Ausrichtung auf Mobilgeräten: Dreht sich das Gerät, können
widthundheightvertauscht sein. Für die angezeigte Größe sindvideo.videoWidthundvideo.videoHeightoft verlässlicher. - Werte können sich ändern: Nach
applyConstraints()oder bei Bildschirmfreigaben (getDisplayMedia(), z. B. wenn ein Fenster seine Größe ändert) veraltet ein früher gelesener Wert. RufegetSettings()deshalb bei Bedarf erneut auf. - Audio-Tracks: Hier fehlt die Eigenschaft. Plane beim Destrukturieren einen Standardwert ein.
- Kompatibilität: Wird von Chrome, Edge, Firefox und Safari unterstützt.
getUserMedia()funktioniert nur in einem sicheren Kontext (HTTPS oder localhost) und nach Freigabe durch die Nutzerin oder den Nutzer.