diff --git a/ui/src/components/sidebar/connectionStats.tsx b/ui/src/components/sidebar/connectionStats.tsx
index a69cd94e..697d317c 100644
--- a/ui/src/components/sidebar/connectionStats.tsx
+++ b/ui/src/components/sidebar/connectionStats.tsx
@@ -19,6 +19,8 @@ export default function ConnectionStatsSidebar() {
appendLocalCandidateStats,
appendRemoteCandidateStats,
appendDiskDataChannelStats,
+ setCodecInfo,
+ codecInfo,
} = useRTCStore();
useInterval(function collectWebRTCStats() {
@@ -52,6 +54,8 @@ export default function ConnectionStatsSidebar() {
}
} else if (report.type === "data-channel" && report.label === "disk") {
appendDiskDataChannelStats(report);
+ } else if (report.type === "codec") {
+ setCodecInfo(report);
}
});
})();
@@ -124,7 +128,18 @@ export default function ConnectionStatsSidebar() {
+ The video stream from the JetKVM to the client.
+ {codecInfo &&
+
+ Current codec: {codecInfo.mimeType}
+
+
+ Clock Rate: {codecInfo.clockRate}
+
+
}
+ >
+ }
/>
{/* RTP Jitter */}
diff --git a/ui/src/hooks/stores.ts b/ui/src/hooks/stores.ts
index f99fd07d..17c77bc0 100644
--- a/ui/src/hooks/stores.ts
+++ b/ui/src/hooks/stores.ts
@@ -131,6 +131,9 @@ export interface RTCState {
appendInboundRtpStats: (stats: RTCInboundRtpStreamStats) => void;
clearInboundRtpStats: () => void;
+ codecInfo: RTCRtpCodec | null;
+ setCodecInfo: (info: RTCRtpCodec) => void;
+
candidatePairStats: Map;
appendCandidatePairStats: (stats: RTCIceCandidatePairStats) => void;
clearCandidatePairStats: () => void;
@@ -179,6 +182,9 @@ export const useRTCStore = create(set => ({
isTurnServerInUse: false,
setTurnServerInUse: (inUse: boolean) => set({ isTurnServerInUse: inUse }),
+ codecInfo: null,
+ setCodecInfo: (info: RTCRtpCodec) => set({ codecInfo: info }),
+
inboundRtpStats: new Map(),
appendInboundRtpStats: (stats: RTCInboundRtpStreamStats) => {
set(prevState => ({