Skip to content

Commit

Permalink
docs(react-native): Core Concepts - Camera and microphone, Call and P…
Browse files Browse the repository at this point in the history 
…articipant State (#979)
  • Loading branch information
@khushal87
khushal87 authored Aug 24, 2023
1 parent e390bd5 commit 0d48787
Show file tree
Hide file tree
Showing 11 changed files with 183 additions and 129 deletions.
123 changes: 58 additions & 65 deletions ...ative-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,36 +9,38 @@ You can access call, participant and client state using hooks. These hooks are r

To observe call state you need to provide a `Call` instance to the [`StreamCall` component](../../ui-components/core/stream-call).

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

```tsx
import { View, Text } from 'react-native';
import {
StreamCall,
useCall,
useCallCallingState,
Call,
useCall,
useCallStateHooks,
} from '@stream-io/video-react-native-sdk';

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

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

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

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

return (
<View>
<Text>Call: {call?.data?.cid}</Text>
<Text>State: {callingState}</Text>
</View>
<div>
<div>Call: {call?.cid}</div>
<div>State: {callingState}</div>
<div>Participants: {participants.length}</div>
</div>
);
};
```
Expand All @@ -47,45 +49,45 @@ This approach makes it possible to access the call state and be notified about c

The `StreamCall` component uses the `StreamCallProvider` under the hood.

Here are all the call-related state hooks:
Here is an excerpt of the available call state hooks:

| Name | Description |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| `useCall` | The `Call` instance that is registered with `StreamCall`. You need the `Call` instance to initiate API calls. |
| `useIsCallRecordingInProgress` | It's' `true` if the call is being recorded. |
| `useIsCallBroadcastingInProgress` | It's `true` if the call is being broadcasted. |
| `useIsCallLive` | It's `true` if the call is currently live. |
| `useCallMembers` | The list of call members |
| `useCallBlockedUserIds` | The list of blocked user IDs. |
| `useCallCallingState` | Provides information about the call state. For example, `RINGING`, `JOINED` or `RECONNECTING`. |
| `useCallCreatedAt` | The time the call was created. |
| `useCallCreatedBy` | The user that created the call. |
| `useCallCustomData` | The custom data attached to the call. |
| `useCallMembers` | The list of call members |
| `useCallSettings` | The settings of the call. |
| `useCallStartedAt` | The actual start time of the current call session. |
| `useCallStartsAt` | The scheduled start time of the call. |
| `useCallStatsReport` | When stats gathering is enabled, this observable will emit a new value at a regular (configurable) interval. |
| `useCallMetadata` | The `CallResponse`, see below for more information. |
| `useCallRecordings` | The latest list of recordings performed during the call. |
| `useHasOngoingScreenShare` | It will return `true` if at least one participant is sharing their screen. |
| `useCallUpdatedAt` | The time the call was last updated. |
| `useDominantSpeaker` | The participant that is the current dominant speaker of the call. |
| `useOwnCapabilities` | The capabilities of the local participant. |
| `useHasOngoingScreenShare` | It will return `true` if at least one participant is sharing their screen. |
| `useHasPermissions` | Returns `true` if the local participant has all the given permissions. |
| `useCallPermissionRequest` | The latest call permission request. |

The `CallResponse` object contains the following information:

| Name | Description |
| ------------------ | ------------------------------------------------------- |
| `backstage` | It's `true` if the call is in backstage mode. |
| `blocked_user_ids` | The users who are blocked from this call. |
| `created_at` | The time the call was created. |
| `created_by` | The creator of the call. |
| `custom` | Custom data attached to the call. |
| `egress` | Broadcasting related information. |
| `ended_at` | When the call was ended. |
| `ingress` | RTMP publishing related information. |
| `recording` | It's `true` if the call is being recorded. |
| `session` | Information related to the current session of the call. |
| `settings` | The settings for this call. |
| `starts_at` | The scheduled start time of the call. |
| `team` | Team that the call is restricted to. |
| `type` | The type of the call. |
| `updated_at` | When the call was updated. |
| `useIsCallLive` | It's `true` if the call is currently live. |
| `useIsCallRecordingInProgress` | It's' `true` if the call is being recorded. |
| `useIsCallBroadcastingInProgress` | It's `true` if the call is being broadcasted. |
| `useIsCallTranscribingInProgress` | It's `true` if the call is being transcribed. |
| `useOwnCapabilities` | The capabilities of the local participant. |

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

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

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

## Participant state

Expand All @@ -100,33 +102,31 @@ If you want to display information about the joined participants of the call you
| `useAnonymousParticipantCount` | The approximate participant count of anonymous users in the active call. |

```tsx
import { View, Text } from 'react-native';
import {
useParticipantCount,
useLocalParticipant,
useCallStateHooks,
StreamCall,
Call,
} from '@stream-io/video-react-native-sdk';

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

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

const CallUI = () => {
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>
<div>
<div>Number of participants: {participantCount}</div>
<div>Session ID: {localParticipant.sessionId}</div>
</div>
);
};
```
Expand Down Expand Up @@ -159,37 +159,30 @@ The `StreamVideoLocalParticipant` has these additional properties:

## Client state

To observe client state you need to provide a `StreamVideoClient` instance to the `StreamVideo` context provider:
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:

If you want to observe the connected user you can use the `useConnectedUser` hook.

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

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

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

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

Expand Down
Loading

0 comments on commit 0d48787

Please sign in to comment.