@camstack/ui-library 1.1.36 → 1.1.37

package/dist/composites/camera-stream-player.d.ts

@@ -84,6 +84,15 @@ export interface ClientStreamHints {
     downlinkMbps?: number;
     prefersTier?: string;
 }
+/** Client-observed network conditions, sampled from the live PeerConnection.
+ *  Matches the `networkQuality.reportClientStats` mutation input (minus
+ *  `deviceId`, which the caller adds). */
+export interface ClientNetworkSample {
+    readonly rttMs: number;
+    readonly jitterMs: number;
+    readonly estimatedBandwidthKbps: number;
+    readonly packetLossPercent: number;
+}
 export interface CameraStreamPlayerProps {
     /** Server base URL (e.g. window.location.origin) */
     serverUrl: string;
@@ -111,6 +120,16 @@ export interface CameraStreamPlayerProps {
      *  existing host log bridge (`{type:'log'}`), so they respect the app's
      *  debug-mode flag. Used to diagnose recorded VOD-over-WebRTC stutter. */
     onPlaybackStats?: (data: Record<string, unknown>) => void;
+    /**
+     * When provided, samples the inbound-video getStats() ~every 2s and reports
+     * the CLIENT's live network conditions (packet-loss %, jitter, downlink
+     * bitrate, RTT) so the caller can push them to the server's
+     * `networkQuality.reportClientStats`. This is what lets the broker's ADAPTIVE
+     * ladder actually downgrade "auto" under a poor link: without a client
+     * signal the server sees only coarse RTCP RR and tends to stay on the top
+     * tier. Inert (zero behaviour change) unless a callback is passed; wire it
+     * only for adaptive sessions. */
+    onClientNetworkSample?: (sample: ClientNetworkSample) => void;
     /** Additional CSS classes for the root container */
     className?: string;
     /** Called on connection state change */
@@ -215,5 +234,5 @@ export interface CameraStreamPlayerProps {
      */
     onControlChannel?: (channel: RTCDataChannel) => void;
 }
-export declare function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay, muted: initialMuted, showControls, showStats, onPlaybackStats, className, onStateChange, onError, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, reconnectSignal, onControlChannel, }: CameraStreamPlayerProps): import("react").JSX.Element;
+export declare function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay, muted: initialMuted, showControls, showStats, onPlaybackStats, onClientNetworkSample, className, onStateChange, onError, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, reconnectSignal, onControlChannel, }: CameraStreamPlayerProps): import("react").JSX.Element;
 export {};

package/dist/index.cjs

@@ -38937,7 +38937,7 @@ function computeClientHints(container) {
 var RECONNECT_BASE_DELAY_MS = 1500;
 var RECONNECT_MAX_DELAY_MS = 15e3;
 var MAX_RECONNECT_ATTEMPTS = 40;
-function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, muted: initialMuted = true, showControls = true, showStats = false, onPlaybackStats, className = "", onStateChange, onError, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, reconnectSignal, onControlChannel }) {
+function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, muted: initialMuted = true, showControls = true, showStats = false, onPlaybackStats, onClientNetworkSample, className = "", onStateChange, onError, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, reconnectSignal, onControlChannel }) {
 	const videoRef = (0, react$1.useRef)(null);
 	const containerRef = (0, react$1.useRef)(null);
 	const pcRef = (0, react$1.useRef)(null);
@@ -39705,6 +39705,58 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 		}, 1e3);
 		return () => clearInterval(id);
 	}, [showStats]);
+	const netPrev = (0, react$1.useRef)(null);
+	(0, react$1.useEffect)(() => {
+		if (!onClientNetworkSample) {
+			netPrev.current = null;
+			return;
+		}
+		const tick = async () => {
+			const pc = pcRef.current;
+			if (!pc) return;
+			try {
+				const report = await pc.getStats();
+				let lost = 0;
+				let recv = 0;
+				let bytes = 0;
+				let ts = 0;
+				let jitterS = 0;
+				let rttS = 0;
+				report.forEach((raw) => {
+					const s = raw;
+					if (s.type === "inbound-rtp" && (s.kind ?? s.mediaType) === "video") {
+						lost = s.packetsLost ?? 0;
+						recv = s.packetsReceived ?? 0;
+						bytes = s.bytesReceived ?? 0;
+						ts = s.timestamp;
+						jitterS = s.jitter ?? 0;
+					} else if (s.type === "candidate-pair" && s.nominated && typeof s.currentRoundTripTime === "number") rttS = s.currentRoundTripTime;
+				});
+				const prev = netPrev.current;
+				netPrev.current = {
+					lost,
+					recv,
+					bytes,
+					ts
+				};
+				if (!prev || ts <= prev.ts) return;
+				const dLost = Math.max(0, lost - prev.lost);
+				const denom = dLost + Math.max(0, recv - prev.recv);
+				const packetLossPercent = denom > 0 ? Math.min(100, dLost / denom * 100) : 0;
+				const estimatedBandwidthKbps = Math.max(0, Math.round((bytes - prev.bytes) * 8 / (ts - prev.ts)));
+				onClientNetworkSample({
+					rttMs: Math.round(rttS * 1e3),
+					jitterMs: Math.round(jitterS * 1e3),
+					estimatedBandwidthKbps,
+					packetLossPercent
+				});
+			} catch {}
+		};
+		const id = setInterval(() => {
+			tick();
+		}, 2e3);
+		return () => clearInterval(id);
+	}, [onClientNetworkSample]);
 	const pbPrev = (0, react$1.useRef)(null);
 	(0, react$1.useEffect)(() => {
 		if (!onPlaybackStats) {

package/dist/index.js

@@ -38913,7 +38913,7 @@ function computeClientHints(container) {
 var RECONNECT_BASE_DELAY_MS = 1500;
 var RECONNECT_MAX_DELAY_MS = 15e3;
 var MAX_RECONNECT_ATTEMPTS = 40;
-function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, muted: initialMuted = true, showControls = true, showStats = false, onPlaybackStats, className = "", onStateChange, onError, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, reconnectSignal, onControlChannel }) {
+function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, muted: initialMuted = true, showControls = true, showStats = false, onPlaybackStats, onClientNetworkSample, className = "", onStateChange, onError, overlay, createSession, sendAnswer, handleOffer, getIceServers, addIceCandidate, getIceCandidates, closeSession, getSessionState, reoffer, posterUrl, hintsOverride, reconnectSignal, onControlChannel }) {
 	const videoRef = useRef(null);
 	const containerRef = useRef(null);
 	const pcRef = useRef(null);
@@ -39681,6 +39681,58 @@ function CameraStreamPlayer({ serverUrl, streamKey, label, autoPlay = true, mute
 		}, 1e3);
 		return () => clearInterval(id);
 	}, [showStats]);
+	const netPrev = useRef(null);
+	useEffect(() => {
+		if (!onClientNetworkSample) {
+			netPrev.current = null;
+			return;
+		}
+		const tick = async () => {
+			const pc = pcRef.current;
+			if (!pc) return;
+			try {
+				const report = await pc.getStats();
+				let lost = 0;
+				let recv = 0;
+				let bytes = 0;
+				let ts = 0;
+				let jitterS = 0;
+				let rttS = 0;
+				report.forEach((raw) => {
+					const s = raw;
+					if (s.type === "inbound-rtp" && (s.kind ?? s.mediaType) === "video") {
+						lost = s.packetsLost ?? 0;
+						recv = s.packetsReceived ?? 0;
+						bytes = s.bytesReceived ?? 0;
+						ts = s.timestamp;
+						jitterS = s.jitter ?? 0;
+					} else if (s.type === "candidate-pair" && s.nominated && typeof s.currentRoundTripTime === "number") rttS = s.currentRoundTripTime;
+				});
+				const prev = netPrev.current;
+				netPrev.current = {
+					lost,
+					recv,
+					bytes,
+					ts
+				};
+				if (!prev || ts <= prev.ts) return;
+				const dLost = Math.max(0, lost - prev.lost);
+				const denom = dLost + Math.max(0, recv - prev.recv);
+				const packetLossPercent = denom > 0 ? Math.min(100, dLost / denom * 100) : 0;
+				const estimatedBandwidthKbps = Math.max(0, Math.round((bytes - prev.bytes) * 8 / (ts - prev.ts)));
+				onClientNetworkSample({
+					rttMs: Math.round(rttS * 1e3),
+					jitterMs: Math.round(jitterS * 1e3),
+					estimatedBandwidthKbps,
+					packetLossPercent
+				});
+			} catch {}
+		};
+		const id = setInterval(() => {
+			tick();
+		}, 2e3);
+		return () => clearInterval(id);
+	}, [onClientNetworkSample]);
 	const pbPrev = useRef(null);
 	useEffect(() => {
 		if (!onPlaybackStats) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.1.36",
+  "version": "1.1.37",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",