@stream-io/video-react-sdk 1.36.0 → 1.37.0

package/dist/src/components/BackgroundFilters/types.d.ts

@@ -74,8 +74,9 @@ export type BackgroundFiltersProps = PlatformSupportFlags & {
      */
     onError?: (error: any) => void;
     /**
-     * Configuration for performance metric thresholds.
-     * Use this to customize when performance warnings are triggered.
+     * `@deprecated` Performance tuning is now handled internally by the SDK, so
+     * this prop is ignored. Remove this prop; there is no replacement
+     * configuration. Degradation is derived from the processed/source FPS ratio.
      */
     performanceThresholds?: BackgroundFiltersPerformanceThresholds;
     /**
@@ -91,8 +92,8 @@ export type PerformanceDegradationReason = 'frame-drop' | 'cpu-throttling';
 /**
  * Performance degradation information for background filters.
  *
- * Performance is calculated using an Exponential Moving Average (EMA) of FPS values
- * to smooth out quick spikes and provide stable performance warnings.
+ * Performance is calculated from a smoothed processed/source FPS ratio to
+ * provide stable performance warnings.
  */
 export type BackgroundFiltersPerformance = {
     /**

package/dist/src/core/hooks/useTrackElementVisibility.d.ts

@@ -1,7 +1,6 @@
-import { DynascaleManager, VideoTrackType } from '@stream-io/video-client';
-export declare const useTrackElementVisibility: <T extends HTMLElement>({ trackedElement, dynascaleManager: propsDynascaleManager, sessionId, trackType, }: {
+import { VideoTrackType } from '@stream-io/video-client';
+export declare const useTrackElementVisibility: <T extends HTMLElement>({ trackedElement, sessionId, trackType, }: {
     trackedElement: T | null;
     sessionId: string;
-    dynascaleManager?: DynascaleManager;
     trackType: VideoTrackType | "none";
 }) => void;

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

@@ -56,8 +56,10 @@ export declare const translations: {
         Dismiss: string;
         "Microphone on": string;
         "Microphone off": string;
+        "Microphone is paused by your system": string;
         "Camera on": string;
         "Camera off": string;
+        "Camera is paused by your system": string;
         "No camera found": string;
         "Video is disabled": string;
         Pinned: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -45,9 +45,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.48.0",
+    "@stream-io/video-client": "1.50.0",
     "@stream-io/video-filters-web": "0.7.4",
-    "@stream-io/video-react-bindings": "1.15.0",
+    "@stream-io/video-react-bindings": "1.16.0",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -60,8 +60,8 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@stream-io/audio-filters-web": "^0.7.3",
-    "@stream-io/video-styling": "^1.13.0",
+    "@stream-io/audio-filters-web": "^0.8.0",
+    "@stream-io/video-styling": "^1.14.0",
     "@types/react": "~19.1.17",
     "@types/react-dom": "~19.1.11",
     "react": "19.1.0",

package/src/components/BackgroundFilters/BackgroundFilters.tsx

@@ -30,15 +30,26 @@ import type {
   PerformanceDegradationReason,
 } from './types';
 
+type MediaStreamTrackVideoStats = {
+  deliveredFrames: number;
+  discardedFrames: number;
+  totalFrames: number;
+};
+
+type MediaStreamTrackWithStats = MediaStreamTrack & {
+  stats?: MediaStreamTrackVideoStats;
+};
+
 /**
  * Constants for FPS warning calculation.
- * Smooths out quick spikes using an EMA, ignores brief outliers,
- * and uses two thresholds to avoid flickering near the limit.
+ * Smooths the processed-to-source FPS ratio and uses hysteresis
+ * so the degradation warning doesn't flicker near the limit.
  */
 const ALPHA = 0.2;
-const DEFAULT_FPS = 30;
-const DEVIATION_LIMIT = 0.5;
-const OUTLIER_PERSISTENCE = 5;
+const FPS_RATIO_WARNING_THRESHOLD_LOWER = 0.75;
+const FPS_RATIO_WARNING_THRESHOLD_UPPER = 0.85;
+
+const EMPTY_BACKGROUND_IMAGES: string[] = [];
 
 /**
  * Represents the available background filter processing engines.
@@ -76,6 +87,76 @@ const determineEngine = async (
   return isMediaPipeSupported ? FilterEngine.MEDIA_PIPE : FilterEngine.NONE;
 };
 
+/**
+ * Samples the raw camera track's frame stats (W3C MediaCapture Extensions) at a
+ * fixed interval and returns a live source fps estimate. Returns `undefined`
+ * while warming up, when the camera is off, or when the browser doesn't expose
+ * `MediaStreamTrack.stats` (currently Chromium-only).
+ */
+const useTrackFramesPerSecond = (call: Call | undefined) => {
+  const { useCameraState } = useCallStateHooks();
+  const { rootMediaStream } = useCameraState();
+  const [fps, setFps] = useState<number | undefined>(undefined);
+  const trackId = rootMediaStream?.getVideoTracks()[0]?.id;
+
+  useEffect(() => {
+    if (!call) {
+      setFps(undefined);
+      return;
+    }
+
+    let previousSnapshot:
+      | (MediaStreamTrackVideoStats & { capturedAt: number })
+      | undefined;
+    let previousTrackId: string | undefined;
+
+    const intervalId = setInterval(() => {
+      const track = rootMediaStream?.getVideoTracks()[0] as
+        | MediaStreamTrackWithStats
+        | undefined;
+
+      const stats = track?.stats;
+      if (!track || !stats) {
+        previousSnapshot = undefined;
+        setFps(undefined);
+        return;
+      }
+
+      if (track.id !== previousTrackId) {
+        previousTrackId = track.id;
+        previousSnapshot = undefined;
+        setFps(undefined);
+      }
+
+      const currentSnapshot = {
+        deliveredFrames: stats.deliveredFrames,
+        discardedFrames: stats.discardedFrames,
+        totalFrames: stats.totalFrames,
+        capturedAt: performance.now(),
+      };
+
+      if (previousSnapshot) {
+        const elapsedSec =
+          (currentSnapshot.capturedAt - previousSnapshot.capturedAt) / 1000;
+
+        const delivered =
+          currentSnapshot.deliveredFrames - previousSnapshot.deliveredFrames;
+
+        const nextFps = Math.round(delivered / elapsedSec);
+        setFps(nextFps);
+      }
+      previousSnapshot = currentSnapshot;
+    }, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+      setFps(undefined);
+    };
+  }, [call, rootMediaStream, trackId]);
+
+  return fps;
+};
+
 /**
  * A provider component that enables the use of background filters in your app.
  *
@@ -93,7 +174,7 @@ export const BackgroundFiltersProvider = (
   const {
     ContextProvider,
     children,
-    backgroundImages = [],
+    backgroundImages = EMPTY_BACKGROUND_IMAGES,
     backgroundFilter: bgFilterFromProps = undefined,
     backgroundImage: bgImageFromProps = undefined,
     backgroundBlurLevel: bgBlurLevelFromProps = undefined,
@@ -102,7 +183,6 @@ export const BackgroundFiltersProvider = (
     useLegacyFilter,
     basePath,
     onError,
-    performanceThresholds,
     forceSafariSupport,
     forceMobileSupport,
     segmentationOptions,
@@ -120,46 +200,37 @@ export const BackgroundFiltersProvider = (
   const [showLowFpsWarning, setShowLowFpsWarning] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
+  const rootFps = useTrackFramesPerSecond(call);
   const cameraFrameRate = callStatsReport?.publisherStats?.camera?.frameRate;
 
-  const sourceFps =
-    performanceThresholds?.defaultFps || cameraFrameRate || DEFAULT_FPS;
-
-  const fpsWarningThresholdLower =
-    performanceThresholds?.fpsWarningThresholdLower ?? sourceFps * 0.75;
-  const fpsWarningThresholdUpper =
-    performanceThresholds?.fpsWarningThresholdUpper ?? sourceFps * 0.85;
-
-  const emaRef = useRef<number>(sourceFps);
-  const outlierStreakRef = useRef<number>(0);
+  const sourceFps = rootFps ?? cameraFrameRate;
+  const fpsRatioEmaRef = useRef<number | undefined>(undefined);
 
   const handleStats = useCallback(
     (stats: PerformanceStats) => {
       const fps = stats?.fps;
-      if (fps === undefined || fps === null) {
-        emaRef.current = sourceFps;
-        outlierStreakRef.current = 0;
+      if (fps == null || !sourceFps) {
+        fpsRatioEmaRef.current = undefined;
         setShowLowFpsWarning(false);
         return;
       }
 
-      const prevEma = emaRef.current;
-      const deviation = Math.abs(fps - prevEma) / prevEma;
-
-      const isOutlier = fps < prevEma && deviation > DEVIATION_LIMIT;
-      outlierStreakRef.current = isOutlier ? outlierStreakRef.current + 1 : 0;
-      if (isOutlier && outlierStreakRef.current < OUTLIER_PERSISTENCE) return;
+      const ratio = fps / sourceFps;
+      const prevRatioEma = fpsRatioEmaRef.current ?? ratio;
 
-      emaRef.current = ALPHA * fps + (1 - ALPHA) * prevEma;
+      const nextFpsRatioEma = ALPHA * ratio + (1 - ALPHA) * prevRatioEma;
+      fpsRatioEmaRef.current = nextFpsRatioEma;
 
       setShowLowFpsWarning((prev) => {
-        if (prev && emaRef.current > fpsWarningThresholdUpper) return false;
-        if (!prev && emaRef.current < fpsWarningThresholdLower) return true;
+        if (prev && nextFpsRatioEma > FPS_RATIO_WARNING_THRESHOLD_UPPER)
+          return false;
+        if (!prev && nextFpsRatioEma < FPS_RATIO_WARNING_THRESHOLD_LOWER)
+          return true;
 
         return prev;
       });
     },
-    [fpsWarningThresholdLower, fpsWarningThresholdUpper, sourceFps],
+    [sourceFps],
   );
 
   const performance: BackgroundFiltersPerformance = useMemo(() => {
@@ -207,16 +278,17 @@ export const BackgroundFiltersProvider = (
       call?.tracer.trace('backgroundFilters.performance', {
         degraded: currentDegraded,
         reason: performance?.reason,
-        fps: emaRef.current,
+        ratio: fpsRatioEmaRef.current,
+        sourceFps,
       });
     }
     prevDegradedRef.current = currentDegraded;
   }, [
-    performanceThresholds,
     performance.degraded,
     performance.reason,
     backgroundFilter,
     call?.tracer,
+    sourceFps,
   ]);
 
   const applyBackgroundImageFilter = useCallback((imageUrl: string) => {
@@ -237,10 +309,9 @@ export const BackgroundFiltersProvider = (
     setBackgroundImage(undefined);
     setBackgroundBlurLevel(undefined);
 
-    emaRef.current = sourceFps;
-    outlierStreakRef.current = 0;
+    fpsRatioEmaRef.current = undefined;
     setShowLowFpsWarning(false);
-  }, [sourceFps]);
+  }, []);
 
   const [engine, setEngine] = useState<FilterEngine>(FilterEngine.NONE);
   const [isSupported, setIsSupported] = useState(false);
@@ -288,24 +359,45 @@ export const BackgroundFiltersProvider = (
   );
 
   const isReady = useLegacyFilter ? !!tfLite : !!mediaPipe;
-  const contextValue: BackgroundFiltersContextValue = {
-    isSupported,
-    performance,
-    isReady,
-    isLoading,
-    backgroundImage,
-    backgroundBlurLevel,
-    backgroundFilter,
-    disableBackgroundFilter,
-    applyBackgroundBlurFilter,
-    applyBackgroundImageFilter,
-    backgroundImages,
-    tfFilePath,
-    modelFilePath,
-    basePath,
-    onError: handleError,
-    segmentationOptions,
-  };
+
+  const contextValue = useMemo<BackgroundFiltersContextValue>(
+    () => ({
+      isSupported,
+      performance,
+      isReady,
+      isLoading,
+      backgroundImage,
+      backgroundBlurLevel,
+      backgroundFilter,
+      disableBackgroundFilter,
+      applyBackgroundBlurFilter,
+      applyBackgroundImageFilter,
+      backgroundImages,
+      tfFilePath,
+      modelFilePath,
+      basePath,
+      onError: handleError,
+      segmentationOptions,
+    }),
+    [
+      isSupported,
+      performance,
+      isReady,
+      isLoading,
+      backgroundImage,
+      backgroundBlurLevel,
+      backgroundFilter,
+      disableBackgroundFilter,
+      applyBackgroundBlurFilter,
+      applyBackgroundImageFilter,
+      backgroundImages,
+      tfFilePath,
+      modelFilePath,
+      basePath,
+      handleError,
+      segmentationOptions,
+    ],
+  );
   return (
     <ContextProvider.Provider value={contextValue}>
       {children}

package/src/components/BackgroundFilters/types.ts

@@ -92,8 +92,9 @@ export type BackgroundFiltersProps = PlatformSupportFlags & {
   onError?: (error: any) => void;
 
   /**
-   * Configuration for performance metric thresholds.
-   * Use this to customize when performance warnings are triggered.
+   * `@deprecated` Performance tuning is now handled internally by the SDK, so
+   * this prop is ignored. Remove this prop; there is no replacement
+   * configuration. Degradation is derived from the processed/source FPS ratio.
    */
   performanceThresholds?: BackgroundFiltersPerformanceThresholds;
 
@@ -112,8 +113,8 @@ export type PerformanceDegradationReason = 'frame-drop' | 'cpu-throttling';
 /**
  * Performance degradation information for background filters.
  *
- * Performance is calculated using an Exponential Moving Average (EMA) of FPS values
- * to smooth out quick spikes and provide stable performance warnings.
+ * Performance is calculated from a smoothed processed/source FPS ratio to
+ * provide stable performance warnings.
  */
 export type BackgroundFiltersPerformance = {
   /**

package/src/components/CallControls/ToggleAudioButton.tsx

@@ -1,4 +1,4 @@
-import { OwnCapability } from '@stream-io/video-client';
+import { OwnCapability, SfuModels } from '@stream-io/video-client';
 import {
   Restricted,
   useCallStateHooks,
@@ -38,7 +38,7 @@ export const ToggleAudioPreviewButton = (
     ...restCompositeButtonProps
   } = props;
   const { t } = useI18n();
-  const { useMicrophoneState } = useCallStateHooks();
+  const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();
   const {
     microphone,
     hasBrowserPermission,
@@ -46,6 +46,10 @@ export const ToggleAudioPreviewButton = (
     optionsAwareIsMute,
     isTogglePending,
   } = useMicrophoneState({ optimisticUpdates });
+  const localParticipant = useLocalParticipant();
+  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(
+    SfuModels.TrackType.AUDIO,
+  );
   const [tooltipDisabled, setTooltipDisabled] = useState(false);
   const handleClick = createCallControlHandler(props, () =>
     microphone.toggle(),
@@ -56,7 +60,9 @@ export const ToggleAudioPreviewButton = (
       title={
         !hasBrowserPermission
           ? t('Check your browser audio permissions')
-          : (caption ?? t('Mic'))
+          : isSystemMuted
+            ? t('Microphone is paused by your system')
+            : (caption ?? t('Mic'))
       }
       tooltipDisabled={tooltipDisabled}
     >
@@ -99,6 +105,13 @@ export const ToggleAudioPreviewButton = (
             children="?"
           />
         )}
+        {isSystemMuted && hasBrowserPermission && (
+          <span
+            className="str-video__system-muted"
+            title={t('Microphone is paused by your system')}
+            children="!"
+          />
+        )}
       </CompositeButton>
     </WithTooltip>
   );
@@ -128,7 +141,7 @@ export const ToggleAudioPublishingButton = (
   const { hasPermission, requestPermission, isAwaitingPermission } =
     useRequestPermission(OwnCapability.SEND_AUDIO);
 
-  const { useMicrophoneState } = useCallStateHooks();
+  const { useMicrophoneState, useLocalParticipant } = useCallStateHooks();
   const {
     microphone,
     hasBrowserPermission,
@@ -136,6 +149,10 @@ export const ToggleAudioPublishingButton = (
     isTogglePending,
     optionsAwareIsMute,
   } = useMicrophoneState({ optimisticUpdates });
+  const localParticipant = useLocalParticipant();
+  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(
+    SfuModels.TrackType.AUDIO,
+  );
 
   const [tooltipDisabled, setTooltipDisabled] = useState(false);
   const handleClick = createCallControlHandler(props, async () => {
@@ -161,7 +178,9 @@ export const ToggleAudioPublishingButton = (
               ? t('You have no permission to share your audio')
               : !hasBrowserPermission
                 ? t('Check your browser mic permissions')
-                : (caption ?? t('Mic'))
+                : isSystemMuted
+                  ? t('Microphone is paused by your system')
+                  : (caption ?? t('Mic'))
           }
           tooltipDisabled={tooltipDisabled}
         >
@@ -200,6 +219,14 @@ export const ToggleAudioPublishingButton = (
                 ?
               </span>
             )}
+            {isSystemMuted && hasBrowserPermission && hasPermission && (
+              <span
+                className="str-video__system-muted"
+                title={t('Microphone is paused by your system')}
+              >
+                !
+              </span>
+            )}
           </CompositeButton>
         </WithTooltip>
       </PermissionNotification>

package/src/components/CallControls/ToggleVideoButton.tsx

@@ -5,7 +5,7 @@ import {
   UseInputMediaDeviceOptions,
 } from '@stream-io/video-react-bindings';
 import clsx from 'clsx';
-import { OwnCapability } from '@stream-io/video-client';
+import { OwnCapability, SfuModels } from '@stream-io/video-client';
 import { CompositeButton, IconButtonWithMenuProps } from '../Button/';
 import { DeviceSelectorVideo } from '../DeviceSettings';
 import { PermissionNotification } from '../Notification';
@@ -38,7 +38,7 @@ export const ToggleVideoPreviewButton = (
     ...restCompositeButtonProps
   } = props;
   const { t } = useI18n();
-  const { useCameraState } = useCallStateHooks();
+  const { useCameraState, useLocalParticipant } = useCallStateHooks();
   const {
     camera,
     hasBrowserPermission,
@@ -46,6 +46,10 @@ export const ToggleVideoPreviewButton = (
     isTogglePending,
     optionsAwareIsMute,
   } = useCameraState({ optimisticUpdates });
+  const localParticipant = useLocalParticipant();
+  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(
+    SfuModels.TrackType.VIDEO,
+  );
   const [tooltipDisabled, setTooltipDisabled] = useState(false);
   const handleClick = createCallControlHandler(props, () => camera.toggle());
 
@@ -54,7 +58,9 @@ export const ToggleVideoPreviewButton = (
       title={
         !hasBrowserPermission
           ? t('Check your browser video permissions')
-          : (caption ?? t('Video'))
+          : isSystemMuted
+            ? t('Camera is paused by your system')
+            : (caption ?? t('Video'))
       }
       tooltipDisabled={tooltipDisabled}
     >
@@ -97,6 +103,13 @@ export const ToggleVideoPreviewButton = (
             children="?"
           />
         )}
+        {isSystemMuted && hasBrowserPermission && (
+          <span
+            className="str-video__system-muted"
+            title={t('Camera is paused by your system')}
+            children="!"
+          />
+        )}
       </CompositeButton>
     </WithTooltip>
   );
@@ -126,7 +139,8 @@ export const ToggleVideoPublishingButton = (
   const { hasPermission, requestPermission, isAwaitingPermission } =
     useRequestPermission(OwnCapability.SEND_VIDEO);
 
-  const { useCameraState, useCallSettings } = useCallStateHooks();
+  const { useCameraState, useCallSettings, useLocalParticipant } =
+    useCallStateHooks();
   const {
     camera,
     optionsAwareIsMute,
@@ -134,6 +148,10 @@ export const ToggleVideoPublishingButton = (
     isPromptingPermission,
     isTogglePending,
   } = useCameraState({ optimisticUpdates });
+  const localParticipant = useLocalParticipant();
+  const isSystemMuted = !!localParticipant?.interruptedTracks?.includes(
+    SfuModels.TrackType.VIDEO,
+  );
   const callSettings = useCallSettings();
   const isPublishingVideoAllowed = callSettings?.video.enabled;
   const [tooltipDisabled, setTooltipDisabled] = useState(false);
@@ -164,7 +182,9 @@ export const ToggleVideoPublishingButton = (
                 ? t('Check your browser video permissions')
                 : !isPublishingVideoAllowed
                   ? t('Video publishing is disabled by the system')
-                  : caption || t('Video')
+                  : isSystemMuted
+                    ? t('Camera is paused by your system')
+                    : caption || t('Video')
           }
           tooltipDisabled={tooltipDisabled}
         >
@@ -205,6 +225,17 @@ export const ToggleVideoPublishingButton = (
                 ?
               </span>
             )}
+            {isSystemMuted &&
+              hasBrowserPermission &&
+              hasPermission &&
+              isPublishingVideoAllowed && (
+                <span
+                  className="str-video__system-muted"
+                  title={t('Camera is paused by your system')}
+                >
+                  !
+                </span>
+              )}
           </CompositeButton>
         </WithTooltip>
       </PermissionNotification>

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

@@ -152,7 +152,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
 
     const cleanup = call.setViewport(paginatedGridLayoutWrapperElement);
 
-    return () => cleanup();
+    return () => cleanup?.();
   }, [paginatedGridLayoutWrapperElement, call]);
 
   // only used to render video elements

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

@@ -149,7 +149,7 @@ export const SpeakerLayout = ({
 
     const cleanup = call.setViewport(participantsBarWrapperElement);
 
-    return () => cleanup();
+    return () => cleanup?.();
   }, [participantsBarWrapperElement, call]);
 
   const isOneOnOneCall = allParticipants.length === 2;

package/src/core/components/ParticipantView/ParticipantView.tsx

@@ -102,7 +102,6 @@ export const ParticipantView = forwardRef<HTMLDivElement, ParticipantViewProps>(
     const [contextVideoPlaceholderElement, setContextVideoPlaceholderElement] =
       useState<HTMLDivElement | null>(null);
 
-    // TODO: allow to pass custom ViewportTracker instance from props
     useTrackElementVisibility({
       sessionId,
       trackedElement,

package/src/core/hooks/useTrackElementVisibility.ts

@@ -1,29 +1,19 @@
 import { useEffect } from 'react';
-import { DynascaleManager, VideoTrackType } from '@stream-io/video-client';
+import { VideoTrackType } from '@stream-io/video-client';
 import { useCall } from '@stream-io/video-react-bindings';
 
 export const useTrackElementVisibility = <T extends HTMLElement>({
   trackedElement,
-  dynascaleManager: propsDynascaleManager,
   sessionId,
   trackType,
 }: {
   trackedElement: T | null;
   sessionId: string;
-  dynascaleManager?: DynascaleManager;
   trackType: VideoTrackType | 'none';
 }) => {
   const call = useCall();
-  const manager = propsDynascaleManager ?? call?.dynascaleManager;
   useEffect(() => {
-    if (!trackedElement || !manager || !call || trackType === 'none') return;
-    const unobserve = manager.trackElementVisibility(
-      trackedElement,
-      sessionId,
-      trackType,
-    );
-    return () => {
-      unobserve();
-    };
-  }, [trackedElement, manager, call, sessionId, trackType]);
+    if (!trackedElement || !call || trackType === 'none') return;
+    return call.trackElementVisibility(trackedElement, sessionId, trackType);
+  }, [trackedElement, call, sessionId, trackType]);
 };

package/src/translations/en.json

@@ -60,8 +60,10 @@
 
   "Microphone on": "Microphone on",
   "Microphone off": "Microphone off",
+  "Microphone is paused by your system": "Microphone is paused by your system",
   "Camera on": "Camera on",
   "Camera off": "Camera off",
+  "Camera is paused by your system": "Camera is paused by your system",
   "No camera found": "No camera found",
   "Video is disabled": "Video is disabled",
   "Pinned": "Pinned",