@stream-io/video-react-sdk 1.27.2 → 1.28.1

package/dist/src/components/CallStats/CallStats.d.ts

@@ -2,6 +2,10 @@ import { ReactNode } from 'react';
 export type CallStatsProps = {
     latencyLowBound?: number;
     latencyHighBound?: number;
+    audioJitterLowBound?: number;
+    audioJitterHighBound?: number;
+    videoJitterLowBound?: number;
+    videoJitterHighBound?: number;
     showCodecInfo?: boolean;
     LatencyChartSuspenseFallback?: ReactNode;
 };

package/dist/src/core/components/CallLayout/LivestreamLayout.d.ts

@@ -11,6 +11,15 @@ export type LivestreamLayoutProps = {
      * Whether to show the participant count. Defaults to `true`.
      */
     showParticipantCount?: boolean;
+    /**
+     * Whether to humanize the participant count. Defaults to `true`.
+     * @example
+     * 1000 participants -> 1k
+     * 1500 participants -> 1.5k
+     * 10_000 participants -> 10k
+     * 100_000 participants -> 100k
+     */
+    humanizeParticipantCount?: boolean;
     /**
      * Whether to enable fullscreen mode. Defaults to `true`.
      */
@@ -27,6 +36,10 @@ export type LivestreamLayoutProps = {
      * Whether to show the speaker name. Defaults to `false`.
      */
     showSpeakerName?: boolean;
+    /**
+     * Whether to show the mute button. Defaults to `true`.
+     */
+    showMuteButton?: boolean;
     /**
      * When set to `false` disables mirroring of the local participant's video.
      * @default true
@@ -59,6 +72,15 @@ export type BackstageLayoutProps = {
      * the livestream went live. Defaults to `true`.
      */
     showEarlyParticipantCount?: boolean;
+    /**
+     * Show the participant count in a humanized format. Defaults to `true`.
+     * @example
+     * 1000 participants -> 1k
+     * 1500 participants -> 1.5k
+     * 10_000 participants -> 10k
+     * 10_0000 participants -> 100k
+     */
+    humanizeParticipantCount?: boolean;
 };
 export declare const BackstageLayout: {
     (props: BackstageLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/hooks/index.d.ts

@@ -3,3 +3,4 @@ export * from './usePersistedDevicePreferences';
 export * from './useScrollPosition';
 export * from './useRequestPermission';
 export * from './useDeviceList';
+export * from './useModeration';

package/dist/src/hooks/useModeration.d.ts

@@ -0,0 +1,8 @@
+export interface ModerationOptions {
+    /**
+     * How long the moderation effect should stay active before being disabled.
+     * Set to `0` to keep it active indefinitely. Defaults to 5000 ms.
+     */
+    duration?: number;
+}
+export declare const useModeration: (options?: ModerationOptions) => void;

package/index.ts

@@ -14,6 +14,7 @@ export {
   useRequestPermission,
   usePersistedDevicePreferences,
   useDeviceList,
+  useModeration,
 } from './src/hooks';
 export { applyFilter, type Filter } from './src/utilities/filter';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.27.2",
+  "version": "1.28.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -31,9 +31,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.37.3",
-    "@stream-io/video-filters-web": "0.5.1",
-    "@stream-io/video-react-bindings": "1.11.4",
+    "@stream-io/video-client": "1.38.1",
+    "@stream-io/video-filters-web": "0.6.0",
+    "@stream-io/video-react-bindings": "1.12.1",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -47,7 +47,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
     "@stream-io/audio-filters-web": "^0.6.1",
-    "@stream-io/video-styling": "^1.8.0",
+    "@stream-io/video-styling": "^1.9.0",
     "@types/react": "~19.1.17",
     "@types/react-dom": "~19.1.11",
     "react": "19.1.0",

package/src/components/CallStats/CallStats.tsx

@@ -20,6 +20,10 @@ enum Status {
 export type CallStatsProps = {
   latencyLowBound?: number;
   latencyHighBound?: number;
+  audioJitterLowBound?: number;
+  audioJitterHighBound?: number;
+  videoJitterLowBound?: number;
+  videoJitterHighBound?: number;
   showCodecInfo?: boolean;
   LatencyChartSuspenseFallback?: ReactNode;
 };
@@ -28,6 +32,10 @@ export const CallStats = (props: CallStatsProps) => {
   const {
     latencyLowBound = 75,
     latencyHighBound = 400,
+    audioJitterLowBound = 10,
+    audioJitterHighBound = 30,
+    videoJitterLowBound = 20,
+    videoJitterHighBound = 50,
     showCodecInfo = false,
     LatencyChartSuspenseFallback = null,
   } = props;
@@ -41,6 +49,8 @@ export const CallStats = (props: CallStatsProps) => {
   const { t } = useI18n();
   const [publishBitrate, setPublishBitrate] = useState('-');
   const [subscribeBitrate, setSubscribeBitrate] = useState('-');
+  const [publishAudioBitrate, setPublishAudioBitrate] = useState('-');
+  const [subscribeAudioBitrate, setSubscribeAudioBitrate] = useState('-');
   const previousStats = useRef<CallStatsReport>(undefined);
   const { useCallStatsReport } = useCallStateHooks();
   const callStatsReport = useCallStatsReport();
@@ -61,12 +71,26 @@ export const CallStats = (props: CallStatsProps) => {
         callStatsReport,
       );
     });
+    setPublishAudioBitrate(() => {
+      return calculatePublishAudioBitrate(
+        previousCallStatsReport,
+        callStatsReport,
+      );
+    });
+    setSubscribeAudioBitrate(() => {
+      return calculateSubscribeAudioBitrate(
+        previousCallStatsReport,
+        callStatsReport,
+      );
+    });
 
     setLatencyBuffer((latencyBuf) => {
       const newLatencyBuffer = latencyBuf.slice(-19);
       newLatencyBuffer.push({
         x: callStatsReport.timestamp,
-        y: callStatsReport.publisherStats.averageRoundTripTimeInMs,
+        y:
+          callStatsReport.publisherStats.averageRoundTripTimeInMs ||
+          callStatsReport.publisherAudioStats.averageRoundTripTimeInMs,
       });
       return newLatencyBuffer;
     });
@@ -80,6 +104,16 @@ export const CallStats = (props: CallStatsProps) => {
     value: callStatsReport?.publisherStats.averageRoundTripTimeInMs || 0,
   };
 
+  const audioJitterComparison = {
+    lowBound: audioJitterLowBound,
+    highBound: audioJitterHighBound,
+  };
+
+  const videoJitterComparison = {
+    lowBound: videoJitterLowBound,
+    highBound: videoJitterHighBound,
+  };
+
   return (
     <div className="str-video__call-stats">
       {callStatsReport && (
@@ -111,7 +145,7 @@ export const CallStats = (props: CallStatsProps) => {
                 className="str-video__call-stats__icon"
                 icon="network-quality"
               />
-              {t('Call performance')}
+              {t('Video performance')}
             </h3>
             <p className="str-video__call-stats__description">
               {t('Review the key data points below to assess call performance')}
@@ -129,7 +163,7 @@ export const CallStats = (props: CallStatsProps) => {
               label={t('Receive jitter')}
               value={`${callStatsReport.subscriberStats.averageJitterInMs} ms.`}
               comparison={{
-                ...latencyComparison,
+                ...videoJitterComparison,
                 value: callStatsReport.subscriberStats.averageJitterInMs,
               }}
             />
@@ -137,7 +171,7 @@ export const CallStats = (props: CallStatsProps) => {
               label={t('Publish jitter')}
               value={`${callStatsReport.publisherStats.averageJitterInMs} ms.`}
               comparison={{
-                ...latencyComparison,
+                ...videoJitterComparison,
                 value: callStatsReport.publisherStats.averageJitterInMs,
               }}
             />
@@ -160,6 +194,54 @@ export const CallStats = (props: CallStatsProps) => {
             <StatCard label={t('Publish bitrate')} value={publishBitrate} />
             <StatCard label={t('Receiving bitrate')} value={subscribeBitrate} />
           </div>
+
+          <div className="str-video__call-stats__header">
+            <h3 className="str-video__call-stats__heading">
+              <Icon className="str-video__call-stats__icon" icon="mic" />
+              {t('Audio Performance')}
+            </h3>
+            <p className="str-video__call-stats__description">
+              {t(
+                'Review the key audio data points below to assess audio performance',
+              )}
+            </p>
+          </div>
+
+          <div className="str-video__call-stats__card-container">
+            <StatCard
+              label={t('Latency')}
+              value={`${callStatsReport.publisherAudioStats.averageRoundTripTimeInMs} ms.`}
+              comparison={latencyComparison}
+            />
+            <StatCard
+              label={t('Audio bitrate (publish)')}
+              value={publishAudioBitrate}
+            />
+            <StatCard
+              label={t('Audio bitrate (receive)')}
+              value={subscribeAudioBitrate}
+            />
+            <StatCard
+              label={t('Audio jitter (publish)')}
+              value={`${callStatsReport.publisherAudioStats.averageJitterInMs} ms.`}
+              comparison={{
+                ...audioJitterComparison,
+                value: callStatsReport.publisherAudioStats.averageJitterInMs,
+              }}
+            />
+            <StatCard
+              label={t('Audio jitter (receive)')}
+              value={`${callStatsReport.subscriberAudioStats.averageJitterInMs} ms.`}
+              comparison={{
+                ...audioJitterComparison,
+                value: callStatsReport.subscriberAudioStats.averageJitterInMs,
+              }}
+            />
+            <StatCard
+              label={t('Audio codec')}
+              value={formatAudioCodec(callStatsReport)}
+            />
+          </div>
         </>
       )}
     </div>
@@ -279,6 +361,15 @@ const formatCodec = (callStatsReport: CallStatsReport): string => {
   return name ? ` (${name})` : '';
 };
 
+const formatAudioCodec = (callStatsReport: CallStatsReport): string => {
+  const { codecPerTrackType } = callStatsReport.publisherAudioStats;
+  if (!codecPerTrackType || !codecPerTrackType[SfuModels.TrackType.AUDIO]) {
+    return '';
+  }
+  const [, name] = codecPerTrackType[SfuModels.TrackType.AUDIO].split('/');
+  return name ?? '';
+};
+
 const calculatePublishBitrate = (
   previousCallStatsReport: CallStatsReport,
   callStatsReport: CallStatsReport,
@@ -318,3 +409,31 @@ const calculateSubscribeBitrate = (
   const timeElapsed = timestamp - previousTimestamp;
   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`;
+};

package/src/core/components/CallLayout/LivestreamLayout.tsx

@@ -11,7 +11,7 @@ import {
   useCallStateHooks,
   useI18n,
 } from '@stream-io/video-react-bindings';
-import { hasScreenShare } from '@stream-io/video-client';
+import { hasScreenShare, humanize } from '@stream-io/video-client';
 import { ParticipantView, useParticipantViewContext } from '../ParticipantView';
 import { ParticipantsAudio } from '../Audio';
 import {
@@ -33,6 +33,16 @@ export type LivestreamLayoutProps = {
    */
   showParticipantCount?: boolean;
 
+  /**
+   * Whether to humanize the participant count. Defaults to `true`.
+   * @example
+   * 1000 participants -> 1k
+   * 1500 participants -> 1.5k
+   * 10_000 participants -> 10k
+   * 100_000 participants -> 100k
+   */
+  humanizeParticipantCount?: boolean;
+
   /**
    * Whether to enable fullscreen mode. Defaults to `true`.
    */
@@ -53,6 +63,11 @@ export type LivestreamLayoutProps = {
    */
   showSpeakerName?: boolean;
 
+  /**
+   * Whether to show the mute button. Defaults to `true`.
+   */
+  showMuteButton?: boolean;
+
   /**
    * When set to `false` disables mirroring of the local participant's video.
    * @default true
@@ -94,6 +109,7 @@ export const LivestreamLayout = (props: LivestreamLayoutProps) => {
       showParticipantCount={props.showParticipantCount}
       showDuration={props.showDuration}
       showLiveBadge={props.showLiveBadge}
+      showMuteButton={props.showMuteButton}
       showSpeakerName={props.showSpeakerName}
       enableFullScreen={props.enableFullScreen}
     />
@@ -160,10 +176,21 @@ export type BackstageLayoutProps = {
    * the livestream went live. Defaults to `true`.
    */
   showEarlyParticipantCount?: boolean;
+
+  /**
+   * Show the participant count in a humanized format. Defaults to `true`.
+   * @example
+   * 1000 participants -> 1k
+   * 1500 participants -> 1.5k
+   * 10_000 participants -> 10k
+   * 10_0000 participants -> 100k
+   */
+  humanizeParticipantCount?: boolean;
 };
 
 export const BackstageLayout = (props: BackstageLayoutProps) => {
-  const { showEarlyParticipantCount = true } = props;
+  const { showEarlyParticipantCount = true, humanizeParticipantCount = true } =
+    props;
   const { useParticipantCount, useCallStartsAt } = useCallStateHooks();
   const participantCount = useParticipantCount();
   const startsAt = useCallStartsAt();
@@ -182,7 +209,9 @@ export const BackstageLayout = (props: BackstageLayoutProps) => {
         {showEarlyParticipantCount && (
           <span className="str-video__livestream-layout__early-viewers-count">
             {t('{{ count }} participants joined early', {
-              count: participantCount,
+              count: humanizeParticipantCount
+                ? humanize(participantCount)
+                : participantCount,
             })}
           </span>
         )}
@@ -196,15 +225,19 @@ BackstageLayout.displayName = 'BackstageLayout';
 const ParticipantOverlay = (props: {
   enableFullScreen?: boolean;
   showParticipantCount?: boolean;
+  humanizeParticipantCount?: boolean;
   showDuration?: boolean;
   showLiveBadge?: boolean;
   showSpeakerName?: boolean;
+  showMuteButton?: boolean;
 }) => {
   const {
     enableFullScreen = true,
     showParticipantCount = true,
+    humanizeParticipantCount = true,
     showDuration = true,
     showLiveBadge = true,
+    showMuteButton = true,
     showSpeakerName = false,
   } = props;
   const overlayBarVisible =
@@ -212,12 +245,15 @@ const ParticipantOverlay = (props: {
     showParticipantCount ||
     showDuration ||
     showLiveBadge ||
+    showMuteButton ||
     showSpeakerName;
   const { participant } = useParticipantViewContext();
-  const { useParticipantCount } = useCallStateHooks();
+  const { useParticipantCount, useSpeakerState } = useCallStateHooks();
   const participantCount = useParticipantCount();
   const duration = useUpdateCallDuration();
   const toggleFullScreen = useToggleFullScreen();
+  const { speaker, volume } = useSpeakerState();
+  const isSpeakerMuted = volume === 0;
   const { t } = useI18n();
   return (
     <div className="str-video__livestream-layout__overlay">
@@ -230,7 +266,9 @@ const ParticipantOverlay = (props: {
           )}
           {showParticipantCount && (
             <span className="str-video__livestream-layout__viewers-count">
-              {participantCount}
+              {humanizeParticipantCount
+                ? humanize(participantCount)
+                : participantCount}
             </span>
           )}
           {showSpeakerName && (
@@ -246,6 +284,16 @@ const ParticipantOverlay = (props: {
               {formatDuration(duration)}
             </span>
           )}
+          {showMuteButton && (
+            <span
+              className={clsx(
+                'str-video__livestream-layout__mute-button',
+                isSpeakerMuted &&
+                  'str-video__livestream-layout__mute-button--muted',
+              )}
+              onClick={() => speaker.setVolume(isSpeakerMuted ? 1 : 0)}
+            />
+          )}
           {enableFullScreen && (
             <span
               className="str-video__livestream-layout__go-fullscreen"

package/src/hooks/index.ts

@@ -3,3 +3,4 @@ export * from './usePersistedDevicePreferences';
 export * from './useScrollPosition';
 export * from './useRequestPermission';
 export * from './useDeviceList';
+export * from './useModeration';

package/src/hooks/useModeration.ts

@@ -0,0 +1,167 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useCall } from '@stream-io/video-react-bindings';
+
+type FullScreenBlurType =
+  typeof import('@stream-io/video-filters-web').FullScreenBlur;
+
+const isFullScreenBlurPlatformSupported = (): boolean => {
+  if (
+    typeof window === 'undefined' ||
+    typeof OffscreenCanvas === 'undefined' ||
+    typeof VideoFrame === 'undefined' ||
+    !window.WebGL2RenderingContext
+  ) {
+    return false;
+  }
+
+  try {
+    const canvas = new OffscreenCanvas(1, 1);
+    return !!canvas.getContext('webgl2', {
+      alpha: false,
+      antialias: false,
+      desynchronized: true,
+    });
+  } catch {
+    return false;
+  }
+};
+
+export interface ModerationOptions {
+  /**
+   * How long the moderation effect should stay active before being disabled.
+   * Set to `0` to keep it active indefinitely. Defaults to 5000 ms.
+   */
+  duration?: number;
+}
+
+export const useModeration = (options?: ModerationOptions) => {
+  const { duration = 5000 } = options || {};
+
+  const call = useCall();
+
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const processorRef = useRef<InstanceType<FullScreenBlurType> | null>(null);
+  const unregisterRef = useRef<(() => Promise<void>) | null>(null);
+
+  const blurModulePromise = useRef<Promise<FullScreenBlurType> | null>(null);
+
+  /**
+   * Lazily loads and caches the video-filters-web module.
+   */
+  const loadVideoFiltersWebModule = useCallback(() => {
+    if (!blurModulePromise.current) {
+      blurModulePromise.current = import('@stream-io/video-filters-web')
+        .then((module) => module.FullScreenBlur)
+        .catch((error) => {
+          console.error('[moderation] Failed to import blur module:', error);
+          throw error;
+        });
+    }
+
+    return blurModulePromise.current;
+  }, []);
+
+  const disableBlur = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+
+    unregisterRef
+      .current?.()
+      .catch((err) => console.error('[moderation] unregister error:', err));
+
+    unregisterRef.current = null;
+  }, []);
+
+  const handleFallback = useCallback(async () => {
+    try {
+      await call?.camera.disable();
+    } catch (error) {
+      console.error('[moderation] Failed to disable camera:', error);
+    }
+  }, [call]);
+
+  useEffect(() => {
+    if (!call) return;
+
+    return call.on('call.moderation_warning', async () => {
+      try {
+        await loadVideoFiltersWebModule();
+      } catch (importErr) {
+        console.error('[moderation] Failed to import blur module:', importErr);
+      }
+    });
+  }, [call, loadVideoFiltersWebModule]);
+
+  useEffect(() => {
+    if (!call) return;
+
+    return call.on('call.moderation_blur', async () => {
+      if (unregisterRef.current) return;
+
+      let FullScreenBlurClass: FullScreenBlurType;
+
+      try {
+        FullScreenBlurClass = await loadVideoFiltersWebModule();
+      } catch (importErr) {
+        console.error('[moderation] Failed to import blur module:', importErr);
+        await handleFallback();
+        return;
+      }
+
+      if (!isFullScreenBlurPlatformSupported()) {
+        console.warn('[moderation] Blur not supported on this platform');
+        await handleFallback();
+        return;
+      }
+
+      const { unregister } = call.camera.registerFilter((inputStream) => {
+        unregisterRef.current = unregister;
+
+        const outputPromise = new Promise<MediaStream>(
+          async (resolve, reject) => {
+            const [track] = inputStream.getVideoTracks();
+
+            let processor: InstanceType<FullScreenBlurType>;
+
+            try {
+              processor = new FullScreenBlurClass(track);
+              processorRef.current = processor;
+
+              const result = await processor.start();
+              const output = new MediaStream([result]);
+              resolve(output);
+
+              if (duration > 0) {
+                timeoutRef.current = setTimeout(disableBlur, duration);
+              }
+            } catch (error) {
+              reject(error);
+              console.error('[moderation] Processor init failed:', error);
+
+              await unregisterRef.current?.();
+              unregisterRef.current = null;
+              processorRef.current = null;
+
+              await handleFallback();
+              return;
+            }
+          },
+        );
+
+        return {
+          output: outputPromise,
+          stop: () => {
+            if (processorRef.current) {
+              processorRef.current.stop();
+              processorRef.current = null;
+            }
+          },
+        };
+      });
+    });
+  }, [call, loadVideoFiltersWebModule, disableBlur, handleFallback, duration]);
+
+  useEffect(() => disableBlur, [disableBlur]);
+};