Call & Participant State

The call, participant and client states are reactive. Their value is updated on WebSocket events and API calls. We use the RxJS library for this, each state property is an Observable.

Let's see an example, this is how you can subscribe to changes related to participants:

const { participants$ } = call.state;
const subscription = participants$.subscribe((participants) => {
  console.log(participants);
});

// dispose the subscription when you don't need it anymore
subscription.unsubscribe();

The console.log method will be called each time there is a change to the list of participants in the call.

This approach makes it possible to access the state and be notified about changes anywhere in your application without having to manually subscribe to WebSocket events.

Alternatively, you can also access the current value of each state variable:

const { participants } = call.state;
console.log(participants);

It's useful when you need to know the current value, but you don't need to be notified about future changes.

Call state

The call state can be accessed through call.state object as in the examples above. In this object, you'll find properties that are reactive and static as well. The reactive/observable properties are suffixed with $ and the static ones are without the suffix.

Here is an excerpt of the call state properties:

Participant state

If you want to display information about the joined participants of the call you can use the following properties in call.state:

Observable properties

Participant data

The StreamVideoParticipant object contains the following information:

Utility functions

The SDK also provides a few utility functions that help you to work with participants:

import {
  Call,
  hasAudio,
  hasInterruptedTrack,
  hasScreenShare,
  hasScreenShareAudio,
  hasVideo,
  isPinned,
  SfuModels,
} from "@stream-io/video-client";

let call: Call;

// example usage
const subscription = call.state.participants$.subscribe((participants) => {
  for (let participant of participants) {
    // check if the participant has audio, video, screen share or screen share audio
    const hasAudioOn = hasAudio(participant);
    const hasVideoOn = hasVideo(participant);
    const hasScreenShareOn = hasScreenShare(participant);
    const hasScreenShareAudioOn = hasScreenShareAudio(participant);
    const isPinnedOn = isPinned(participant);
    const isAudioInterrupted = hasInterruptedTrack(
      participant,
      SfuModels.TrackType.AUDIO,
    );
  }

  // participants with a specific role
  const hosts = participants.filter((p) => p.roles.includes("host"));

  // participants that publish video and audio
  const videoParticipants = participants.filter(
    (p) => hasVideo(p) && hasAudio(p),
  );
});

subscription.unsubscribe();

Detecting participant source

Participants can be created from different sources (WebRTC, RTMP/OBS, WHIP, SIP, etc...). The source property of the StreamVideoParticipant object indicates the source of the participant.

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

const subscription = call.state.participants$.subscribe((participants) => {
  // participants joining through OBS have RTMP source
  const rtmpParticipants = participants.filter(
    (p) => p.source === SfuModels.ParticipantSource.RTMP,
  );
});

// remember to unsubscribe when you don't need it anymore
subscription.unsubscribe();

Detecting interrupted tracks

A participant's published audio or video can be temporarily silenced by something outside the participant's control — the operating system muting the microphone, a Bluetooth headset disconnecting, an iOS audio session interruption, or transient SFU/RTP issues. Use the hasInterruptedTrack(participant, trackType) helper to detect this and surface a hint in the UI:

import { Call, hasInterruptedTrack, SfuModels } from "@stream-io/video-client";

let call: Call;

const subscription = call.state.localParticipant$.subscribe((participant) => {
  if (!participant) return;
  const isMicInterrupted = hasInterruptedTrack(
    participant,
    SfuModels.TrackType.AUDIO,
  );
  // toggle a "Microphone is paused by your system" hint in your UI
});

// remember to unsubscribe when you don't need it anymore
subscription.unsubscribe();

The helper intersects interruptedTracks with publishedTracks, so the indicator only fires while the participant is actively publishing the track. This avoids a stale "interrupted" indicator if a remote sender unpublishes the track while it was interrupted.

For remote participants, interruptedTracks currently only surfaces TrackType.AUDIO; remote video and screen-share interruption are not tracked. For the local participant, it covers both audio and video.

Client state

The client state can be accessed by client.state.

Here is the list of client state properties:

The connectedUser object contains the following properties: