Signatur
Beschreibung
Die Eigenschaft frameRate des Wörterbuchs MediaTrackSettings enthält die Bildrate, mit der ein Video-Track gerade tatsächlich arbeitet. Sie steht in dem Objekt, das MediaStreamTrack.getSettings() zurückgibt. Anders als bei den Einschränkungen (Constraints), die Sie z. B. mit getUserMedia() oder applyConstraints() anfordern, zeigt frameRate den Wert, den Browser und Gerät am Ende eingestellt haben.
Nützlich ist das nach dem Anfordern von Kamera- oder Bildschirmaufnahmen: So prüfen Sie, ob die gewünschte Bildrate (z. B. 60 fps für Spiele-Streams oder 15 fps für Videokonferenzen mit wenig Bandbreite) tatsächlich eingestellt wurde. Anhand des Werts können Sie dann z. B. die Bitrate eines MediaRecorder anpassen oder dem Nutzer einen Hinweis anzeigen.
Die Eigenschaft gibt es nur bei Video-Tracks. Bei Audio-Tracks und bei Browsern, die die Einstellung nicht melden, fehlt sie im Settings-Objekt (undefined). Ob der Browser die Eigenschaft grundsätzlich unterstützt, prüfen Sie vorab mit navigator.mediaDevices.getSupportedConstraints().frameRate.
Rückgabewert
30 oder 29.97. Fehlt die Eigenschaft (Audio-Track oder keine Unterstützung), ergibt der Zugriff undefined.Beispiele
Tatsächliche Bildrate der Kamera auslesen
const zeigeBildrate = async () => {
const stream = await navigator.mediaDevices.getUserMedia({
video: { frameRate: { ideal: 60 } }
});
const [videoTrack] = stream.getVideoTracks();
const { frameRate } = videoTrack.getSettings();
console.log(`Angefordert: 60 fps, erhalten: ${frameRate} fps`);
};
zeigeBildrate().catch(console.error);Unterstützung prüfen und Bildrate nachträglich ändern
const setzeBildrate = async (track, fps) => {
const unterstuetzt = navigator.mediaDevices.getSupportedConstraints();
if (!unterstuetzt.frameRate) {
console.warn('frameRate wird von diesem Browser nicht unterstützt.');
return;
}
await track.applyConstraints({ frameRate: { max: fps } });
console.log('Neue Bildrate:', track.getSettings().frameRate);
};
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
await setzeBildrate(stream.getVideoTracks()[0], 15);Aufnahme-Bitrate an die Bildrate der Bildschirmfreigabe anpassen
const starteAufnahme = async () => {
const stream = await navigator.mediaDevices.getDisplayMedia({
video: { frameRate: 30 }
});
const fps = stream.getVideoTracks()[0].getSettings().frameRate ?? 30;
// Grobe Faustregel: 100 kbit/s pro Bild pro Sekunde
const recorder = new MediaRecorder(stream, {
videoBitsPerSecond: Math.round(fps * 100_000)
});
recorder.start();
console.log(`Aufnahme mit ${fps} fps und ${recorder.videoBitsPerSecond} bit/s`);
return recorder;
};
starteAufnahme().catch(console.error);// Wichtig · Fallstricke
- Angefordert ist nicht gleich eingestellt: Ein
ideal-Wert ist nur eine Bitte. Lesen Sie danach immergetSettings().frameRateaus, statt vom gewünschten Wert auszugehen. MitexactoderminkanngetUserMedia()dagegen mit einemOverconstrainedErrorabgelehnt werden. - Nominalwert, keine Messung:
frameRategibt die eingestellte Bildrate an, nicht die tatsächlich gelieferte. Bei schlechtem Licht, hoher Last oder Bildschirmfreigabe mit wenig Bewegung können deutlich weniger Bilder ankommen. Die echte Rate messen Sie z. B. mitHTMLVideoElement.requestVideoFrameCallback()oder bei WebRTC mitRTCPeerConnection.getStats()(framesPerSecond). - Gleitkommazahl: Es können krumme Werte wie
29.97oder30.000030517578125vorkommen. Runden Sie vor Vergleichen oder der Anzeige. - Kompatibilität: Wird von allen modernen Browsern unterstützt. Bei älteren Safari- und Firefox-Versionen fehlt der Wert bei manchen Quellen (z. B.
getDisplayMedia()) im Settings-Objekt. Planen Sie deshalb einen Ersatzwert ein (?? 30). - Kamerazugriff geht nur in einem sicheren Kontext (HTTPS oder
localhost) und erst, nachdem der Nutzer zugestimmt hat.