Signatur
Beschreibung
Die Eigenschaft width gehört zum Wörterbuch MediaTrackSupportedConstraints. Dieses Objekt liefert navigator.mediaDevices.getSupportedConstraints(). Ist width darin enthalten und hat den Wert true, dann versteht der User-Agent die gleichnamige Constraint. Mit ihr lässt sich die gewünschte Breite einer Videospur in Pixeln festlegen, etwa bei getUserMedia() oder MediaStreamTrack.applyConstraints().
Wird die Constraint nicht unterstützt, fehlt die Eigenschaft ganz. Sie steht dann nicht auf false. Prüfe deshalb mit if (supported.width) oder dem in-Operator.
Die Prüfung hilft, wenn du Constraints nur dann setzen willst, wenn der Browser sie auch auswertet. So kannst du etwa auf eine Auflösung wie 1280×720 hinarbeiten oder auf einen Standard zurückfallen. Wichtig: true heißt nur, dass der Browser die Constraint kennt. Ob ein bestimmtes Gerät eine bestimmte Breite liefern kann, sagt der Wert nicht. Das beantworten MediaStreamTrack.getCapabilities() bzw. getSettings().
Rückgabewert
true, wenn die Constraint width unterstützt wird. Ohne Unterstützung fehlt die Eigenschaft (Zugriff ergibt undefined).Beispiele
Unterstützung der width-Constraint prüfen
const supported = navigator.mediaDevices.getSupportedConstraints();
if (supported.width) {
console.log('width-Constraint wird unterstützt');
} else {
console.log('width-Constraint wird NICHT unterstützt');
}Kamera mit gewünschter Breite öffnen (mit Fallback)
const startCamera = async () => {
const supported = navigator.mediaDevices.getSupportedConstraints();
const video = supported.width
? { width: { ideal: 1280 }, height: supported.height ? { ideal: 720 } : undefined }
: true;
const stream = await navigator.mediaDevices.getUserMedia({ video });
const [track] = stream.getVideoTracks();
console.log('Tatsächliche Breite:', track.getSettings().width);
document.querySelector('video').srcObject = stream;
};
startCamera().catch((err) => console.error('Kamera-Fehler:', err.name));Breite einer laufenden Spur nachträglich ändern
const setTrackWidth = async (track, width) => {
if (!('width' in navigator.mediaDevices.getSupportedConstraints())) {
console.warn('width wird nicht unterstützt');
return;
}
const { width: range } = track.getCapabilities?.() ?? {};
if (range && (width < range.min || width > range.max)) {
console.warn(`Breite muss zwischen ${range.min} und ${range.max} liegen`);
return;
}
await track.applyConstraints({ width: { exact: width } });
console.log('Neue Breite:', track.getSettings().width);
};
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
await setTrackWidth(stream.getVideoTracks()[0], 640);// Wichtig · Fallstricke
- Kein
false: Wird die Constraint nicht unterstützt, fehlt die Eigenschaft, statt auffalsezu stehen. Ein Vergleich mit=== falsegreift also nie. - Unterstützung ≠ Gerätefähigkeit:
trueheißt nicht, dass die Kamera jede Breite liefern kann. Den tatsächlichen Wertebereich zeigtgetCapabilities(). exactkann fehlschlagen: Mit{ exact: … }lehntgetUserMedia()bzw.applyConstraints()mit einemOverconstrainedErrorab, wenn der Wert nicht erreichbar ist.idealist robuster.- Zusammen mit
heightkann der Browser das Seitenverhältnis anpassen oder das Bild zuschneiden. Das hängt vonresizeModeab, soweit der Browser es unterstützt. navigator.mediaDevicesgibt es nur in sicheren Kontexten (HTTPS oderlocalhost). Die Eigenschaft wird von allen modernen Browsern unterstützt.