Skip to content

feat(dogfood): Extend stats report with audio statistics #2033

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jdimovska wants to merge 2 commits into
base: video-moderation
Choose a base branch
from
Open

feat(dogfood): Extend stats report with audio statistics #2033

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f5e883d
feat(react): Extend the statistics report with audio stats
jdimovska Dec 5, 2025
5557b3f
feat(react): Extend the statistics report with audio stats
jdimovska Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 98 additions & 7 deletions sample-apps/react-native/dogfood/src/components/CallStats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,31 @@ enum Status {
export type CallStatsProps = {
latencyLowBound?: number;
latencyHighBound?: number;
audioJitterLowBound?: number;
audioJitterHighBound?: number;
videoJitterLowBound?: number;
videoJitterHighBound?: number;
showCodecInfo?: boolean;
};

export const CallStats = (props: CallStatsProps) => {
const {
latencyLowBound = 75,
latencyHighBound = 400,
audioJitterLowBound = 10,
audioJitterHighBound = 30,
videoJitterLowBound = 20,
videoJitterHighBound = 50,
showCodecInfo = false,
} = props;
const styles = useStyles();
const { t } = useI18n();
const call = useCall();
const [publishBitrate, setPublishBitrate] = useState('-');
const [subscribeBitrate, setSubscribeBitrate] = useState('-');

const [publishAudioBitrate, setPublishAudioBitrate] = useState('-');
const [subscribeAudioBitrate, setSubscribeAudioBitrate] = useState('-');
const previousStats = useRef<CallStatsReport | undefined>(undefined);

const { useCallStatsReport } = useCallStateHooks();
Expand All @@ -58,7 +69,18 @@ export const CallStats = (props: CallStatsProps) => {
callStatsReport,
);
});

setPublishAudioBitrate(() => {
return calculatePublishAudioBitrate(
previousCallStatsReport,
callStatsReport,
);
});
setSubscribeAudioBitrate(() => {
return calculateSubscribeAudioBitrate(
previousCallStatsReport,
callStatsReport,
);
});
previousStats.current = callStatsReport;
}, [callStatsReport]);

Expand All @@ -68,6 +90,16 @@ export const CallStats = (props: CallStatsProps) => {
value: callStatsReport?.publisherStats.averageRoundTripTimeInMs,
};

const audioJitterComparison = {
lowBound: audioJitterLowBound,
highBound: audioJitterHighBound,
};

const videoJitterComparison = {
lowBound: videoJitterLowBound,
highBound: videoJitterHighBound,
};

return (
<View style={styles.container}>
<View style={styles.titleContainer}>
Expand All @@ -93,18 +125,36 @@ export const CallStats = (props: CallStatsProps) => {
</View>
<View style={styles.row}>
<StatCard
label={t('Receive jitter')}
label={t('Receive video jitter')}
value={`${callStatsReport.subscriberStats.averageJitterInMs} ms.`}
comparison={{
...latencyComparison,
...videoJitterComparison,
value: callStatsReport.subscriberStats.averageJitterInMs,
}}
/>
<StatCard
label={t('Publish jitter')}
label={t('Publish video jitter')}
value={`${callStatsReport.publisherStats.averageJitterInMs} ms.`}
comparison={{
...videoJitterComparison,
value: callStatsReport.publisherStats.averageJitterInMs,
}}
/>
</View>
<View style={styles.row}>
<StatCard
label={t('Receive audio jitter')}
value={`${callStatsReport.subscriberAudioStats.averageJitterInMs} ms.`}
comparison={{
...audioJitterComparison,
value: callStatsReport.subscriberAudioStats.averageJitterInMs,
}}
/>
<StatCard
label={t('Publish audio jitter')}
value={`${callStatsReport.publisherStats.averageJitterInMs} ms.`}
comparison={{
...latencyComparison,
...audioJitterComparison,
value: callStatsReport.publisherStats.averageJitterInMs,
}}
/>
Expand Down Expand Up @@ -132,8 +182,21 @@ export const CallStats = (props: CallStatsProps) => {
</>
)}
<View style={styles.row}>
<StatCard label={t('Publish bitrate')} value={publishBitrate} />
<StatCard label={t('Receiving bitrate')} value={subscribeBitrate} />
<StatCard label={t('Publish video bitrate')} value={publishBitrate} />
<StatCard
label={t('Receiving video bitrate')}
value={subscribeBitrate}
/>
</View>
<View style={styles.row}>
<StatCard
label={t('Publish audio bitrate')}
value={publishAudioBitrate}
/>
<StatCard
label={t('Receiving audio bitrate')}
value={subscribeAudioBitrate}
/>
</View>
</View>
);
Expand Down Expand Up @@ -282,6 +345,34 @@ const calculateSubscribeBitrate = (
return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;
};

const calculatePublishAudioBitrate = (
previousCallStatsReport: CallStatsReport,
callStatsReport: CallStatsReport,
) => {
const previousAudioStats = previousCallStatsReport.publisherAudioStats;
const audioStats = callStatsReport.publisherAudioStats;

const bytesSent =
audioStats.totalBytesSent - previousAudioStats.totalBytesSent;
const timeElapsed = audioStats.timestamp - previousAudioStats.timestamp;

return `${((bytesSent * 8) / timeElapsed).toFixed(2)} kbps`;
};

const calculateSubscribeAudioBitrate = (
previousCallStatsReport: CallStatsReport,
callStatsReport: CallStatsReport,
) => {
const previousAudioStats = previousCallStatsReport.subscriberAudioStats;
const audioStats = callStatsReport.subscriberAudioStats;

const bytesReceived =
audioStats.totalBytesReceived - previousAudioStats.totalBytesReceived;
const timeElapsed = audioStats.timestamp - previousAudioStats.timestamp;

return `${((bytesReceived * 8) / timeElapsed).toFixed(2)} kbps`;
};

const useStyles = () => {
const {
theme: { colors, variants },
Expand Down
Loading