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:

The StreamVideoParticipant object contains the following information:

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

import {
  Call,
  hasAudio,
  hasScreenShare,
  hasScreenShareAudio,
  hasVideo,
  isPinned,
} 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);
  }

  // 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();

In a call with many participants, the value of the participants$ call state observable is truncated to 250 participants. The participants who are publishing video, audio, or screen sharing have priority over the other participants in the list. This means, for example, that in a livestream with one host and many viewers, the host is guaranteed to be in the list.

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: