Call & Participant State

You can access call, participant and client state using hooks. These hooks are reactive (their value is updated on WebSocket events and API calls).

Call state

To observe call state you need to provide a Call instance to the StreamCall component.

Let’s see an example where we use the useCall, useCallCallingState and useParticipants hooks to display some basic information about the call:

import {
  Call,
  useCall,
  useCallStateHooks,
} from '@stream-io/video-react-native-sdk';

export default function MyApp() {
  let call: Call;

  return (
    <StreamCall call={call}>
      <MyCallUI />
    </StreamCall>
  );
}

const MyCallUI = () => {
  const call = useCall();

  const { useCallCallingState, useParticipants } = useCallStateHooks();
  const callingState = useCallCallingState();
  const participants = useParticipants();

  return (
    <div>
      <div>Call: {call?.cid}</div>
      <div>State: {callingState}</div>
      <div>Participants: {participants.length}</div>
    </div>
  );
};

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

The StreamCall component is a context provider that makes the call state available to all child components. The useCall hook returns the Call instance that is registered with StreamCall. You need the Call instance to initiate API calls.

Call State Hooks

Here is an excerpt of the available call state hooks:

In your IDE of choice, you can see the full list if you de-structure the useCallStateHooks object:

import { useCallStateHooks } from '@stream-io/video-react-native-sdk';

const {
  useCallMembers,
  useDominantSpeaker,
  useParticipants,
  useLocalParticipant,
  useIsCallRecordingInProgress,
  // ...
} = useCallStateHooks();

Participant state

If you want to display information about the joined participants of the call you can use these hooks:

import {
  useCallStateHooks,
  StreamCall,
} from '@stream-io/video-react-native-sdk';

export default function App() {
  let call: call;

  return (
    <StreamCall call={call}>
      <MyCallUI />
    </StreamCall>
  );
}

const MyCallUI = () => {
  const { useLocalParticipant, useParticipantCount } = useCallStateHooks();
  const participantCount = useParticipantCount();
  const localParticipant = useLocalParticipant();

  return (
    <View>
      <Text>Number of participants: {participantCount}</Text>
      <Text>Session ID: {localParticipant.sessionId}</Text>
    </View>
  );
};

The StreamVideoParticipant object contains the following information:

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

import {
  hasAudio,
  hasVideo,
  hasScreenShare,
  hasScreenShareAudio,
  isPinned,
  useCallStateHooks,
} from '@stream-io/video-react-native-sdk';

// example usage
const { useParticipants } = useCallStateHooks();

// check if the participant has audio, video, screen share or screen share audio
const [participant] = useParticipants();
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)
);

In a call with many participants, the list returned by the useParticipants call state hook 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

To observe client state you need to provide a StreamVideoClient instance to the StreamVideo context provider. If you want to observe the connected user you can use the useConnectedUser hook.

Let’s see an example:

import {
  useConnectedUser,
  StreamVideo,
  StreamVideoClient,
} from '@stream-io/video-react-native-sdk';

export default function App() {
  let client: StreamVideoClient;

  return (
    <StreamVideo client={client}>
      <MyHeader />
    </StreamVideo>
  );
}

const MyHeader = () => {
  const user = useConnectedUser();
  return <Text>{user ? `Logged in: ${user.name}` : 'Logged out'}</Text>;
};

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

Here is the list of client-state hooks:

The connectedUser object contains the following properties: