Signatur
Beschreibung
Die Eigenschaft frameHeight des Wörterbuchs RTCInboundRtpStreamStats liefert die vertikale Auflösung (in Pixeln) des letzten Frames, den der Decoder für diesen eingehenden Video-Stream verarbeitet hat. Die Werte bekommen Sie, indem Sie mit RTCPeerConnection.getStats() oder RTCRtpReceiver.getStats() einen RTCStatsReport abrufen und darin nach Einträgen mit type === "inbound-rtp" filtern.
Nützlich ist der Wert vor allem zur Qualitätsüberwachung: Senkt der Sender wegen knapper Bandbreite oder hoher CPU-Last die Auflösung (Simulcast-Layerwechsel, adaptive Skalierung), sehen Sie das direkt an einem kleineren frameHeight. Zusammen mit frameWidth und framesPerSecond ergibt sich ein brauchbares Bild der tatsächlichen Empfangsqualität.
Die Eigenschaft gibt es nur bei Video-Streams (kind === "video"). Bei Audio-Streams fehlt sie, und auch bei Video fehlt sie, bis der erste Frame dekodiert wurde.
Rückgabewert
undefined, wenn es sich um einen Audio-Stream handelt oder noch kein Frame dekodiert wurde.Beispiele
Empfangsauflösung aus dem Stats-Report lesen
// pc ist eine verbundene RTCPeerConnection
const logInboundResolution = async (pc) => {
const report = await pc.getStats();
report.forEach((stats) => {
if (stats.type === "inbound-rtp" && stats.kind === "video") {
console.log(`Empfange ${stats.frameWidth ?? "?"}x${stats.frameHeight ?? "?"} px`);
}
});
};
await logInboundResolution(pc);Auflösungswechsel überwachen
// Meldet, wenn der Sender die Auflösung ändert (z. B. bei schlechter Verbindung)
const watchResolution = (receiver, intervalMs = 2000) => {
let lastHeight;
const id = setInterval(async () => {
const report = await receiver.getStats();
for (const stats of report.values()) {
if (stats.type !== "inbound-rtp" || stats.frameHeight === undefined) continue;
if (lastHeight !== undefined && stats.frameHeight !== lastHeight) {
console.warn(`Auflösung geändert: ${lastHeight}p -> ${stats.frameHeight}p`);
}
lastHeight = stats.frameHeight;
}
}, intervalMs);
return () => clearInterval(id); // Stopp-Funktion
};
const videoReceiver = pc.getReceivers().find((r) => r.track.kind === "video");
const stop = watchResolution(videoReceiver);Qualitätsstufe für die UI ableiten
const qualityLabel = (height) => {
if (height === undefined) return "kein Video";
if (height >= 1080) return "Full HD";
if (height >= 720) return "HD";
if (height >= 360) return "SD";
return "niedrig";
};
const report = await pc.getStats();
const inbound = [...report.values()].find(
(s) => s.type === "inbound-rtp" && s.kind === "video"
);
document.querySelector("#quality").textContent = qualityLabel(inbound?.frameHeight);// Wichtig · Fallstricke
- Nur für Video: Bei
kind === "audio"gibt es die Eigenschaft nicht. Prüfen Sie immer aufundefined, zum Beispiel mit?.oder??. - Momentaufnahme: Der Wert gilt nur für den zuletzt dekodierten Frame und ist kein Durchschnitt. Für Trends müssen Sie die Stats regelmäßig abfragen, etwa alle 1–2 Sekunden. Zu häufiges Abfragen von
getStats()kostet CPU. - Nicht gleich der Anzeigegröße:
frameHeightist die dekodierte Auflösung und nicht die Größe des<video>-Elements. Die intrinsische Größe liefertHTMLVideoElement.videoHeight. Bei Rotation (CVO) können Breite und Höhe vertauscht erscheinen. - Kompatibilität: Aktuelle Chromium-Browser, Firefox und Safari unterstützen die Eigenschaft. Ältere Browser lieferten die Werte teilweise nur in den veralteten
"track"-Stats (RTCMediaStreamTrackStats). Wenn Sie ältere Versionen unterstützen müssen, sehen Sie dort als Rückfalllösung nach.