> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-v6-beta2-flutter-uikit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Presenter Mode
> Implement presenter mode in your React Native app — allow up to 5 presenters to share video, audio, and screen with up to 100 viewers using CometChat Calls SDK.
**Quick Reference** - Start a presentation session:
```javascript theme={null}
// Configure presenter settings
let presenterSettings = new CometChatCalls.PresenterSettingsBuilder()
.setIsPresenter(true) // false for viewer
.enableDefaultLayout(true)
.setCallEventListener(callListener)
.build();
// Render presenter component
//
```
**Available via:** SDK | UI Kits
## Overview
The Presenter Mode feature allows developers to create a calling service experience in which:
1. There are one or more users who are presenting their video, audio and/or screen (Maximum 5)
2. Viewers who are consumers of that presentation. (They cannot send their audio, video or screen streams out).
3. The total number of presenters and viewers can go up to 100.
4. Features such as mute/unmute audio, show/hide camera capture, recording, etc. will be enabled only for the Presenter in this mode.
5. Other call participants will not get these features. Hence they act like passive viewers in the call.
Using this feature developers can create experiences such as:
1. All hands calls
2. Keynote speeches
3. Webinars
4. Talk shows
5. Online classes
6. and many more...
### About this guide
This guide demonstrates how to start a presentation into an React Native application. Before you begin, we strongly recommend you read the [calling setup guide](/sdk/react-native/calling-setup).
Before starting a call session you have to [generate a call token](/sdk/react-native/direct-call#generate-call-token).
### Start Presentation Session
The most important class that will be used in the implementation is the `PresentationSettings` class. This class allows you to set the various parameters for the Presentation Mode. In order to set the various parameters of the `PresentationSettings` class, you need to use the `PresentationSettingsBuilder` class. Below are the various options available with the `PresentationSettings` class.
You will need to set the User Type, There are 2 type of users in Presenter Mode, `Presenter` & `Participant` , You can set this `PresentationSettingsBuilder` by using the following method `setIsPresenter(true/false)`
A basic example of how to start a Presentation:
```javascript theme={null}
let presenterSettings = new CometChatCalls.PresenterSettingsBuilder()
.setIsPresenter(isPresenter)
.enableDefaultLayout(defaultLayout)
.setCallEventListener(callListener)
.build();
render(){
return(
);
}
```
## Listeners
Listeners can be added in two ways the first one is to use `.setCallEventListener(listeners : OngoingCallListener)` method in `CallSettingsBuilder` or `PresenterSettingsBuilder` class. The second way is to use `CometChatCalls.addCallEventListener(name: string, callListener: OngoingCallListener)` by this you can add multiple listeners and remove the specific listener by their name `CometChatCalls.removeCallEventListener(name: string)`
```javascript theme={null}
useEffect(() => {
CometChatCalls.addCallEventListener("UNIQUE_ID", {
onUserJoined: (user) => {
console.log("user joined:", user);
},
onUserLeft: (user) => {
console.log("user left:", user);
},
onUserListUpdated: (userList) => {
console.log("user list:", userList);
},
onCallEnded: () => {
console.log("Call ended");
},
onCallEndButtonPressed: () => {
console.log("End Call button pressed");
},
onError: (error) => {
console.log("Call Error: ", error);
},
onAudioModesUpdated: (audioModes) => {
console.log("audio modes:", audioModes);
},
onUserMuted: (event) => {
console.log("user muted:", event);
},
});
return () => CometChatCalls.removeCallEventListener("UNIQUE_ID");
}, []);
```
Always remove call event listeners when the component unmounts using `CometChatCalls.removeCallEventListener(listenerId)`. Failing to remove listeners can cause memory leaks and duplicate event handling.
**On Event** — `onUserJoined` returns a user object when a participant joins the presentation:
**User Object:**
| Parameter | Type | Description | Sample Value |
| -------------- | ------- | ------------------------------------------- | ----------------------------------------------------------------------- |
| `uid` | string | Unique identifier of the user | `"cometchat-uid-6"` |
| `name` | string | Display name of the user | `"Ronald Jerry"` |
| `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"` |
| `id` | string | Internal session participant ID | `"cd530243"` |
| `joinedAt` | string | Unix timestamp when user joined (as string) | `"1772095303043"` |
| `isVideoMuted` | boolean | Whether user's video is muted | `true` |
| `isAudioMuted` | boolean | Whether user's audio is muted | `false` |
| `isLocalUser` | boolean | Whether this is the local user | `false` |
**On Event** — `onUserLeft` returns a user object when a participant leaves the presentation:
**User Object:**
| Parameter | Type | Description | Sample Value |
| -------------- | ------- | ------------------------------------------- | ----------------------------------------------------------------------- |
| `uid` | string | Unique identifier of the user | `"cometchat-uid-6"` |
| `name` | string | Display name of the user | `"Ronald Jerry"` |
| `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"` |
| `id` | string | Internal session participant ID | `"cd530243"` |
| `joinedAt` | string | Unix timestamp when user joined (as string) | `"1772095303043"` |
| `isVideoMuted` | boolean | Whether user's video was muted | `true` |
| `isAudioMuted` | boolean | Whether user's audio was muted | `false` |
**On Event** — `onUserListUpdated` returns an array of all current participants in the presentation:
**User Array:**
| Parameter | Type | Description | Sample Value |
| --------- | ----- | --------------------- | ------------------------------------------------ |
| (array) | array | Array of user objects | [See below ↓](#on-user-list-updated-user-object) |
**User Object (each item in array):**
| Parameter | Type | Description | Sample Value |
| --------- | ------ | ----------------------------- | ----------------------------------------------------------------------- |
| `uid` | string | Unique identifier of the user | `"cometchat-uid-7"` |
| `name` | string | Display name of the user | `"Henry Marino"` |
| `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"` |
**On Event** — `onAudioModesUpdated` returns an array of available audio output modes:
**Audio Modes Array:**
| Parameter | Type | Description | Sample Value |
| --------- | ----- | --------------------------- | -------------------------------------------------- |
| (array) | array | Array of audio mode objects | [See below ↓](#on-audio-modes-updated-mode-object) |
**Audio Mode Object (each item in array):**
| Parameter | Type | Description | Sample Value |
| ---------- | ------- | --------------------------------------- | ------------ |
| `type` | string | Type of audio output device | `"SPEAKER"` |
| `selected` | boolean | Whether this mode is currently selected | `true` |
**On Event** — `onRecordingStarted` returns information about the user who started the recording:
**RecordingStartedBy Object:**
| Parameter | Type | Description | Sample Value |
| -------------- | ------ | --------------------------------------------------- | ----------------------------------------------------------------------- |
| `uid` | string | Unique identifier of the user who started recording | `"cometchat-uid-7"` |
| `name` | string | Display name of the user | `"Henry Marino"` |
| `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"` |
| `recordId` | string | Unique identifier for this recording session | `"noujausedimwfhwl"` |
| `id` | string | Internal session participant ID | `"042d0440"` |
| `isLocalUser` | string | Whether this is the local user (as string) | `"true"` |
| `isVideoMuted` | string | Whether user's video is muted (as string) | `"true"` |
| `isAudioMuted` | string | Whether user's audio is muted (as string) | `"false"` |
**On Event** — `onRecordingStopped` returns information about the user who stopped the recording:
**RecordingStoppedBy Object:**
| Parameter | Type | Description | Sample Value |
| -------------- | ------ | --------------------------------------------------- | ----------------------------------------------------------------------- |
| `uid` | string | Unique identifier of the user who stopped recording | `"cometchat-uid-7"` |
| `name` | string | Display name of the user | `"Henry Marino"` |
| `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"` |
| `id` | string | Internal session participant ID | `"042d0440"` |
| `isLocalUser` | string | Whether this is the local user (as string) | `"true"` |
| `isVideoMuted` | string | Whether user's video is muted (as string) | `"true"` |
| `isAudioMuted` | string | Whether user's audio is muted (as string) | `"false"` |
The `CometChatCallsEventsListener` listener provides you with the below callback methods:
| Callback Method | Description |
| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| onCallEnded() | This method is called when the call is successfully ended. The call details can be obtained from the `Call` object provided. |
| onCallEndButtonPressed() | This method is called when the user press end call button. |
| onUserJoined(user: RTCUser) | This method is called when any other user joins the call. The user details can be obtained from the `User` object provided. |
| onUserLeft(user: RTCUser) | This method is called when a user leaves the call. The details of the user can be obtained from the provided `User` object. |
| onUserListUpdated(users: Array\) | This method is triggered every time a participant joins or leaves the call providing the list of users active in the call |
| onAudioModesUpdated(devices: Array\) | This callback is triggered if any new audio output source is available or becomes unavailable. |
| onUserMuted(muteObj: RTCMutedUser) | This method is triggered when a user is muted in the ongoing call. |
| onRecordingStarted(user: RTCUser) | This method is triggered when a recording starts. |
| onRecordingStopped(user: RTCUser) | This method is triggered when a recording stops. |
| onError(e: CometChatException) | This method is called when there is some error in establishing the call. |
## Settings
The `PresentationSettings` class is the most important class when it comes to the implementation of the Calling feature. This is the class that allows you to customize the overall calling experience. The properties for the call/conference can be set using the `PresentationSettingsBuilder` class. This will eventually give you and object of the `PresentationSettings` class which you can pass to the `joinPresentation()` method to start the call.
The **mandatory** parameters that are required to be present for any call/conference to work are:
1. Context - context of the activity/application
2. RelativeLayout - A RelativeLayout object in which the calling UI is loaded.
The options available for customization of calls are:
| Parameter | Description |
| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `setIsPresenter(isPresenter: boolean)` | If set to `true` user will join as the presenter. If set to `false` user will join as the viewer. |
| `enableDefaultLayout(defaultLayout: boolean)` | If set to `true` enables the default layout for handling the call operations. If set to `false` it hides the button layout and just displays the Call View. **Default value = true** |
| `showEndCallButton(showEndCallButton: boolean)` | If set to `true` it displays the EndCallButton in Button Layout. If set to `false` it hides the EndCallButton in Button Layout. **Default value = true** |
| `showEndCallButton(showEndCallButton: boolean)` | If set to `true` it displays the PauseVideoButton in Button Layout. If set to `false` it hides the PauseVideoButton in Button Layout. **Default value = true** |
| `showMuteAudioButton`(showMuteAudioButton: boolean)\`\` | If set to `true` it displays the MuteAudioButton in Button Layout. If set to `false` it hides the MuteAudioButton in Button Layout. **Default value = true** |
| `showSwitchCameraButton`(showSwitchCameraButton: boolean)\`\` | If set to `true` it displays the SwitchCameraButton in Button Layout. If set to `false` it hides the SwitchCameraButton in Button Layout. **Default value = true** |
| `showAudioModeButton`(showAudioModeButton: boolean)\`\` | If set to `true` it displays the AudioModeButton in Button Layout. If set to `false` it hides the AudioModeButton in Button Layout. **Default value = true** |
| `setIsAudioOnlyCall(audioOnly: boolean)` | If set to `true`, the call will be strictly an audio call. If set to `false`, the call will be an audio-video call.**Default value = false** |
| `startWithAudioMuted(audioMuted: boolean)` | This ensures the call is started with the audio muted if set to true. **Default value = false** |
| `startWithVideoMuted(videoMuted: boolean)` | This ensures the call is started with the video paused if set to true. **Default value = false** |
| `startWithVideoMuted(videoMuted: boolean)` | If set to true it displays the Recording in Button Layout. if set to false it hides the Recording in Button Layout. **Default value = false** |
| `setDefaultAudioMode(audioMode: string)` | This method can be used if you wish to start the call with a specific audio mode. The available options are 1. CometChatCalls.AUDIO\_MODE.SPEAKER = "SPEAKER" 2. CometChatCalls.AUDIO\_MODE.EARPIECE = "EARPIECE" 3. CometChatCalls.AUDIO\_MODE.BLUETOOTH = "BLUETOOTH" 4. CometChatCalls.AUDIO\_MODE.HEADPHONES = "HEADPHONES" |
| `setEventListener(new CometChatCallsEventsListener())` | The `CometChatCallsEventsListener` listener provides you callbacks |
In case you wish to achieve a completely customised UI for the Calling experience, you can do so by embedding default android buttons to the screen as per your requirement and then use the below methods to achieve different functionalities for the embedded buttons.
For the use case where you wish to align your own custom buttons and not use the default layout provided by CometChat you can embed the buttons in your layout and use the below methods to perform the corresponding operations:
## Best Practices
Always explicitly set `setIsPresenter(true)` for presenters and `setIsPresenter(false)` for viewers. Viewers cannot send audio, video, or screen streams — this is enforced by the SDK, not just the UI.
Presenter Mode supports a maximum of 5 concurrent presenters. If your app allows dynamic role switching, enforce this limit in your logic before calling `setIsPresenter(true)` for additional users.
Always remove call event listeners in your component's cleanup function (e.g., the return function of `useEffect`). Orphaned listeners can cause memory leaks and duplicate event handling.
Call tokens are session-specific and time-limited. Generate them right before starting the presentation session rather than caching them for extended periods.
## Troubleshooting
Verify that `setIsPresenter(false)` is set for viewer participants. If a viewer is incorrectly set as a presenter, they will have access to media controls.
Ensure the `CometChatCalls.PresenterComponent` is wrapped in a `View` with `flex: 1` or explicit dimensions. Also confirm that both `presenterSettings` and `callToken` props are provided and not `null`.
Check that the listener is registered before the presentation session starts. If using `addCallEventListener`, ensure the `listenerId` is unique and hasn't been overwritten. Also verify the Calls SDK has been initialized via `CometChatCalls.init()`.
Presenter Mode supports up to 100 total participants (presenters + viewers). If users can't join, check the current participant count in your session.
***
## Next Steps
Start and manage standard call sessions with full configuration options
Record presentation sessions for playback and compliance
Customize the main video container and participant tiles
Install dependencies, configure permissions, and initialize the Calls SDK