Skip to main content
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:
  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
  5. 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. 
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). 
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 MethodDescription
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:
ParameterDescription
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
  • 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
  • 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