Signatur
Beschreibung
Die Eigenschaft frameRate gehört zum Dictionary MediaTrackSupportedConstraints. Dieses Objekt erhalten Sie über navigator.mediaDevices.getSupportedConstraints(). Kennt der Browser die Einschränkung frameRate, ist die Eigenschaft vorhanden und hat den Wert true. Andernfalls fehlt sie ganz und der Zugriff liefert undefined.
Mit der Einschränkung frameRate legen Sie die gewünschte Bildrate eines Videotracks in Bildern pro Sekunde fest, etwa als { ideal: 30, max: 60 }. So können Sie bei Videokonferenzen Bandbreite sparen oder bei Bildschirmaufnahmen eine flüssige Wiedergabe anfordern. Bevor Sie frameRate an getUserMedia(), getDisplayMedia() oder MediaStreamTrack.applyConstraints() übergeben, prüfen Sie mit dieser Eigenschaft, ob der Browser die Einschränkung überhaupt auswertet.
Wichtig: Die Eigenschaft sagt nur etwas darüber aus, was der Browser versteht. Ob eine bestimmte Kamera eine bestimmte Bildrate liefern kann, verrät sie nicht. Diese Fähigkeiten des Geräts fragen Sie mit MediaStreamTrack.getCapabilities() ab. Die tatsächlich verwendete Bildrate lesen Sie mit MediaStreamTrack.getSettings() aus.
Rückgabewert
true, wenn der Browser die Einschränkung frameRate kennt. Kennt er sie nicht, fehlt die Eigenschaft und der Wert ist undefined. Der Wert false kommt nicht vor.Beispiele
Unterstützung von frameRate prüfen
const supported = navigator.mediaDevices.getSupportedConstraints();
if (supported.frameRate) {
console.log('frameRate wird unterstützt');
} else {
console.log('frameRate wird nicht unterstützt');
}Kamera mit gewünschter Bildrate öffnen
const startCamera = async () => {
const supported = navigator.mediaDevices.getSupportedConstraints();
const video = { width: { ideal: 1280 }, height: { ideal: 720 } };
// frameRate nur setzen, wenn der Browser die Einschränkung kennt
if (supported.frameRate) {
video.frameRate = { ideal: 30, max: 60 };
}
const stream = await navigator.mediaDevices.getUserMedia({ video });
const [track] = stream.getVideoTracks();
console.log('Tatsächliche Bildrate:', track.getSettings().frameRate);
return stream;
};
startCamera().catch((err) => console.error(err.name, err.message));Bildrate zur Laufzeit senken, um Bandbreite zu sparen
const reduceFrameRate = async (track, fps = 15) => {
const { frameRate } = navigator.mediaDevices.getSupportedConstraints();
if (!frameRate) {
console.warn('frameRate nicht unterstützt – keine Änderung');
return;
}
const caps = track.getCapabilities?.() ?? {};
const target = caps.frameRate ? Math.max(caps.frameRate.min ?? 1, fps) : fps;
await track.applyConstraints({ frameRate: { max: target } });
console.log('Neue Bildrate:', track.getSettings().frameRate);
};
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
await reduceFrameRate(stream.getVideoTracks()[0]);// Wichtig · Fallstricke
- Vorhanden heißt nicht garantiert: Der Wert
truebedeutet nur, dass der Browser die Einschränkung kennt. Die Kamera kann die gewünschte Bildrate trotzdem verfehlen. Kontrollieren Sie das Ergebnis immer mittrack.getSettings().frameRate. - Nicht auf
falseprüfen: Kennt der Browser die Einschränkung nicht, fehlt die Eigenschaft ganz, stattfalsezu sein. Schreiben Sie deshalbif (supported.frameRate)und nichtsupported.frameRate === false. exactundminmit Vorsicht: Kann das Gerät die Werte nicht erfüllen, brichtgetUserMedia()bzw.applyConstraints()mit einemOverconstrainedErrorab. Nutzen Sie lieberidealundmax.- Sicherer Kontext:
navigator.mediaDevicesgibt es nur über HTTPS oder auflocalhost. In unsicheren Kontexten ist esundefined. - Bildrate schwankt: Bei wenig Licht senken manche Kameras die Bildrate automatisch, unabhängig von der angeforderten Einschränkung.