Presenter Mode - CometChat Docs

Quick Reference - Start a presentation session:

let presenterSettings = new CometChatCalls.PresenterSettingsBuilder()
  .setIsPresenter(true) // false for viewer
  .enableDefaultLayout(true)
  .setCallEventListener(callListener)
  .build();

// <CometChatCalls.PresenterComponent presenterSettings={presenterSettings} callToken={callToken} />

Available via: SDK | UI Kits

Overview

The Presenter Mode feature allows developers to create a calling service experience in which:

There are one or more users who are presenting their video, audio and/or screen (Maximum 5)
Viewers who are consumers of that presentation (they cannot send their audio, video or screen streams out)
The total number of presenters and viewers can go up to 100
Features such as mute/unmute audio, show/hide camera capture, recording, etc. will be enabled only for the Presenter
Other call participants act like passive viewers in the call

About this guide

This guide demonstrates how to start a presentation into a React Native application. Before you begin, we strongly recommend you read the calling setup guide. Before starting a call session you have to generate a call token.

Start Presentation Session

The PresentationSettings class allows you to set the various parameters for the Presentation Mode. Use the PresentationSettingsBuilder class to configure it. Set the User Type with setIsPresenter(true/false) — there are 2 types: Presenter & Participant.

JavaScript

let presenterSettings = new CometChatCalls.PresenterSettingsBuilder()
  .setIsPresenter(isPresenter)
  .enableDefaultLayout(defaultLayout)
  .setCallEventListener(callListener)
  .build();

return (
  <View style={{flex:1}}>
    <CometChatCalls.PresenterComponent presenterSettings={presenterSettings} callToken={callToken} />
  </View>
);

Listeners

Listeners can be added in two ways: using .setCallEventListener(listeners) in PresenterSettingsBuilder, or using CometChatCalls.addCallEventListener(name, callListener).

JavaScript

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).

Events

Callback Method	Description
onCallEnded()	Called when the call is successfully ended.
onCallEndButtonPressed()	Called when the user presses the end call button.
onUserJoined(user: RTCUser)	Called when any other user joins the call.
onUserLeft(user: RTCUser)	Called when a user leaves the call.
onUserListUpdated(users: Array<RTCUser>)	Triggered every time a participant joins or leaves the call.
onAudioModesUpdated(devices: Array<AudioMode>)	Triggered if any new audio output source is available or becomes unavailable.
onUserMuted(muteObj: RTCMutedUser)	Triggered when a user is muted in the ongoing call.
onRecordingStarted(user: RTCUser)	Triggered when a recording starts.
onRecordingStopped(user: RTCUser)	Triggered when a recording stops.
onError(e: CometChatException)	Called when there is some error in establishing the call.

Settings

The PresentationSettings class customization options:

Parameter	Description
`setIsPresenter(isPresenter: boolean)`	If `true` user joins as presenter. If `false` user joins as viewer.
`enableDefaultLayout(defaultLayout: boolean)`	Enables/disables the default layout. Default: true
`showEndCallButton(showEndCallButton: boolean)`	Shows/hides the EndCallButton. Default: true
`showMuteAudioButton(showMuteAudioButton: boolean)`	Shows/hides the MuteAudioButton. Default: true
`showSwitchCameraButton(showSwitchCameraButton: boolean)`	Shows/hides the SwitchCameraButton. Default: true
`showAudioModeButton(showAudioModeButton: boolean)`	Shows/hides the AudioModeButton. Default: true
`setIsAudioOnlyCall(audioOnly: boolean)`	If `true`, audio-only call. Default: false
`startWithAudioMuted(audioMuted: boolean)`	Starts with audio muted. Default: false
`startWithVideoMuted(videoMuted: boolean)`	Starts with video paused. Default: false
`setDefaultAudioMode(audioMode: string)`	Sets initial audio mode. Options: `SPEAKER`, `EARPIECE`, `BLUETOOTH`, `HEADPHONES`

Best Practices

Always explicitly set setIsPresenter(true) for presenters and setIsPresenter(false) for viewers
Limit presenters to 5 — enforce this in your logic before calling setIsPresenter(true)
Clean up listeners on component unmount
Generate call tokens just before use

Troubleshooting

Viewer can send audio/video: Verify setIsPresenter(false) is set for viewer participants
Presentation UI does not render: Ensure the component is wrapped in a View with flex: 1 or explicit dimensions
Listeners not firing: Check that the listener is registered before the session starts
Maximum participant limit reached: Presenter Mode supports up to 100 total participants

Next Steps

Call Session

Start and manage standard call sessions with full configuration options

Recording

Record presentation sessions for playback and compliance

Video View Customisation

Customize the main video container and participant tiles

Calls SDK Setup

Install dependencies, configure permissions, and initialize the Calls SDK

​Overview

​About this guide

​Start Presentation Session

​Listeners

​Events

​Settings

​Next Steps

Call Session

Recording

Video View Customisation

Calls SDK Setup

Overview

About this guide

Start Presentation Session

Listeners

Events

Settings

Next Steps