Low Bandwidth

Our servers can detect if you are on a low-bandwidth connection and will automatically adjust the video quality to ensure smooth playback. However, sometimes even reduced quality may not be enough for a good experience, and our system may decide to opt the local user out from consuming some or all remote videos. The video pause feature improves call quality by automatically turning off incoming video streams, resulting in an audio-only mode in response to deteriorating network conditions on the subscriber side.

In such cases, you will see an icon in the participant’s label indicating that the video is being paused due to bandwidth constraints.

Low Bandwidth Optimization toggling

The Low Bandwidth optimization is enabled by default on an SDK level. However, integrators can decide to opt out of this feature accordingly to their use case:

import { SfuModels } from "@stream-io/video-react-sdk";

const call = client.call(type, id);
await call.disableClientCapabilities(
  SfuModels.ClientCapability.SUBSCRIBER_VIDEO_PAUSE,
);

// use call.enableClientCapabilities(...) to re-enable the feature

await call.join();

This signals to the backend that the client supports dynamic video pausing, allowing the system to optimize media delivery under limited network conditions.

Observing Paused Tracks

The information about server-side paused tracks lives on the participant.pausedTracks property. You can observe changes to this property to customize the UI further, such as showing a message or changing the participant’s label.

import { useCallStateHooks, SfuModels } from "@stream-io/video-react-sdk";

export const MyComponent = () => {
  const { useParticipants } = useCallStateHooks();
  const participants = useParticipants();

  const participantsWithPausedVideoTracks = participants.filter((p) =>
    p.pausedTracks?.includes(SfuModels.TrackType.VIDEO),
  );

  return (
    <>
      {participantsWithPausedVideoTracks.length > 0 && (
        <ShowPausedIncomingVideoNotification />
      )}
      <MyCalLayoutUI />
    </>
  );
};