Fix stream stats display (#19874)

* Fix stats calculations and labels

* fix linter from complaining

* fix mse calc

* label
This commit is contained in:
Josh Hawkins 2025-09-01 19:23:44 -05:00 committed by GitHub
parent f7ed8b4cab
commit 198e53bd42
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 7 additions and 7 deletions

View File

@ -164,7 +164,7 @@ export default function JSMpegPlayer({
statsIntervalRef.current = setInterval(() => {
const currentTimestamp = Date.now();
const timeDiff = (currentTimestamp - lastTimestampRef.current) / 1000; // in seconds
const bitrate = (bytesReceivedRef.current * 8) / timeDiff / 1000; // in kbps
const bitrate = bytesReceivedRef.current / timeDiff / 1000; // in kBps
setStats?.({
streamType: "jsmpeg",

View File

@ -80,7 +80,7 @@ export default function LivePlayer({
const [stats, setStats] = useState<PlayerStatsType>({
streamType: "-",
bandwidth: 0, // in kbps
bandwidth: 0, // in kBps
latency: undefined, // in seconds
totalFrames: 0,
droppedFrames: undefined,

View File

@ -338,7 +338,7 @@ function MSEPlayer({
// console.debug("VideoRTC.buffer", b.byteLength, bufLen);
} else {
try {
sb?.appendBuffer(data);
sb?.appendBuffer(data as ArrayBuffer);
} catch (e) {
// no-op
}
@ -592,7 +592,7 @@ function MSEPlayer({
const now = Date.now();
const bytesLoaded = totalBytesLoaded.current;
const timeElapsed = (now - lastTimestamp) / 1000; // seconds
const bandwidth = (bytesLoaded - lastLoadedBytes) / timeElapsed / 1024; // kbps
const bandwidth = (bytesLoaded - lastLoadedBytes) / timeElapsed / 1000; // kBps
lastLoadedBytes = bytesLoaded;
lastTimestamp = now;

View File

@ -17,7 +17,7 @@ export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
</p>
<p>
<span className="text-white/70">{t("stats.bandwidth.title")}</span>{" "}
<span className="text-white">{stats.bandwidth.toFixed(2)} kbps</span>
<span className="text-white">{stats.bandwidth.toFixed(2)} kBps</span>
</p>
{stats.latency != undefined && (
<p>
@ -66,7 +66,7 @@ export function PlayerStats({ stats, minimal }: PlayerStatsProps) {
</div>
<div className="flex flex-col items-center gap-1">
<span className="text-white/70">{t("stats.bandwidth.short")}</span>{" "}
<span className="text-white">{stats.bandwidth.toFixed(2)} kbps</span>
<span className="text-white">{stats.bandwidth.toFixed(2)} kBps</span>
</div>
{stats.latency != undefined && (
<div className="hidden flex-col items-center gap-1 md:flex">

View File

@ -266,7 +266,7 @@ export default function WebRtcPlayer({
const bitrate =
timeDiff > 0
? (bytesReceived - lastBytesReceived) / timeDiff / 1000
: 0; // in kbps
: 0; // in kBps
setStats?.({
streamType: "WebRTC",