Skip to main content
// Start a presentation session
const settings = new CometChatCalls.PresenterSettingsBuilder()
  .setIsPresenter(true)
  .enableDefaultLayout(true)
  .setCallEventListener(callListener)
  .build();

CometChatCalls.joinPresentation(callToken, settings, htmlElement);
  • Presenter (max 5): Can share video, audio, and screen
  • Viewer (up to 100 total): Passive consumers, no outgoing streams

​
Overview

Presenter Mode enables broadcast-style calling experiences where presenters share content with passive viewers.
RoleCapabilitiesMax Count
PresenterVideo, audio, screen sharing, mute controls, recording5
ViewerWatch and listen only (no outgoing streams)Up to 100 total
Use cases: webinars, keynotes, all-hands meetings, online classes, talk shows. Before starting a presentation, generate a call token using generateToken() as described in Call Session.

​
Start Presentation Session

Configure the presentation using PresentationSettingsBuilder. Set the user type with setIsPresenter(true) for presenters or setIsPresenter(false) for viewers. Basic example: 
let presenterSettings = new CometChatCalls.PresenterSettingsBuilder()
  										.setIsPresenter(isPresenter)
                  	.enableDefaultLayout(defaultLayout)
                  	.setCallEventListener(callListener)
                  	.build();

let htmlElement = document.getElementById("ELEMENT_ID");
CometChatCalls.joinPresentation(
  callToken,
  presenterSettings,
  htmlElement
);

​
Listeners

Add listeners in two ways:
  1. Use .setCallEventListener() in PresentationSettingsBuilder
  2. Use CometChatCalls.addCallEventListener(name, listener) for multiple listeners
Always remove listeners when they’re no longer needed (e.g., on component unmount or page navigation). Failing to remove listeners can cause memory leaks and duplicate event handling.
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')
}, [])

​
Events

Callback MethodDescription
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<RTCUser>)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<AudioMode>)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

Configure the presentation experience using PresentationSettingsBuilder:
ParameterDescription
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
showPauseVideoButton(showPauseVideoButton: 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
For custom UI, embed your own buttons and use the call control methods described in Call Session Methods.

​
Next Steps

Call Session

Start standard call sessions without presenter mode

Recording

Record call and presentation sessions

Virtual Background

Add virtual backgrounds to video calls

Video View Customisation

Customize the video layout and containers