Presenter Mode

Create webinar-style experiences with presenters and viewers

Quick Reference for AI Agents & Developers

// Join as presenter
const presenterSettings = new CometChatCalls.PresenterSettingsBuilder()
  .setIsPresenter(true)
  .enableDefaultLayout(true)
  .setCallEventListener(callListener)
  .build();
CometChatCalls.joinPresentation(callToken, presenterSettings, htmlElement);

// Join as viewer
const viewerSettings = new CometChatCalls.PresenterSettingsBuilder()
  .setIsPresenter(false)
  .enableDefaultLayout(true)
  .setCallEventListener(callListener)
  .build();
CometChatCalls.joinPresentation(callToken, viewerSettings, htmlElement);

Build webinar-style calling experiences where presenters share content while viewers watch without broadcasting their own media.

Overview

Presenter Mode enables:

• Up to 5 presenters sharing video, audio, and/or screen
• Up to 100 total participants (presenters + viewers)
• Viewers consume content without sending their own streams
• Presenters have full control over mute, camera, recording, etc.

Use Cases

• All-hands meetings
• Keynote presentations
• Webinars
• Online classes
• Talk shows
• Product demos

Prerequisites

Before implementing Presenter Mode:

1. Complete the Calls SDK Setup
2. Generate a call token using generateToken()

User Types

Type	Can Send Media	Can Receive Media	Controls
Presenter	✅ Video, Audio, Screen	✅	Full (mute, camera, recording)
Viewer	❌	✅	Limited (volume only)

Start Presentation

Use PresentationSettingsBuilder to configure and join a presentation:

Presenter (JavaScript)

const presenterSettings = new CometChatCalls.PresenterSettingsBuilder()
  .setIsPresenter(true)  // Join as presenter
  .enableDefaultLayout(true)
  .setCallEventListener(callListener)
  .build();

const htmlElement = document.getElementById("presentation-container");
CometChatCalls.joinPresentation(callToken, presenterSettings, htmlElement);

Viewer (JavaScript)

const viewerSettings = new CometChatCalls.PresenterSettingsBuilder()
  .setIsPresenter(false)  // Join as viewer
  .enableDefaultLayout(true)
  .setCallEventListener(callListener)
  .build();

const htmlElement = document.getElementById("presentation-container");
CometChatCalls.joinPresentation(callToken, viewerSettings, htmlElement);

TypeScript

const presenterSettings = new CometChatCalls.PresenterSettingsBuilder()
  .setIsPresenter(true)
  .enableDefaultLayout(true)
  .setCallEventListener(callListener)
  .build();

const htmlElement = document.getElementById("presentation-container") as HTMLElement;
CometChatCalls.joinPresentation(callToken, presenterSettings, htmlElement);

Presentation Settings

Method	Description	Default
setIsPresenter(boolean)	true = presenter, false = viewer	-
enableDefaultLayout(boolean)	Show/hide default UI controls	true
showEndCallButton(boolean)	Show end call button	true
showPauseVideoButton(boolean)	Show pause video button (presenter only)	true
showMuteAudioButton(boolean)	Show mute audio button (presenter only)	true
showSwitchCameraButton(boolean)	Show camera switch button (presenter only)	true
showAudioModeButton(boolean)	Show audio mode selector	true
setIsAudioOnlyCall(boolean)	Audio-only presentation	false
startWithAudioMuted(boolean)	Start with mic muted	false
startWithVideoMuted(boolean)	Start with camera off	false
showRecordingButton(boolean)	Show recording button (presenter only)	false
setDefaultAudioMode(string)	Default audio output mode	-

Audio Modes

Available audio output modes:

• CometChatCalls.AUDIO_MODE.SPEAKER
• CometChatCalls.AUDIO_MODE.EARPIECE
• CometChatCalls.AUDIO_MODE.BLUETOOTH
• CometChatCalls.AUDIO_MODE.HEADPHONES

Event Listeners

Register listeners to handle presentation events:

JavaScript

const callListener = {
  onUserJoined: (user) => {
    console.log("User joined:", user);
  },
  onUserLeft: (user) => {
    console.log("User left:", user);
  },
  onUserListUpdated: (userList) => {
    console.log("Participants:", userList);
  },
  onCallEnded: () => {
    console.log("Presentation ended");
  },
  onCallEndButtonPressed: () => {
    console.log("End button pressed");
    CometChatCalls.endSession();
  },
  onError: (error) => {
    console.log("Error:", error);
  },
  onAudioModesUpdated: (audioModes) => {
    console.log("Audio modes:", audioModes);
  },
  onUserMuted: (event) => {
    console.log("User muted:", event);
  },
  onRecordingStarted: (user) => {
    console.log("Recording started by:", user);
  },
  onRecordingStopped: (user) => {
    console.log("Recording stopped by:", user);
  }
};

TypeScript

const callListener = {
  onUserJoined: (user: any): void => {
    console.log("User joined:", user);
  },
  onUserLeft: (user: any): void => {
    console.log("User left:", user);
  },
  onUserListUpdated: (userList: any[]): void => {
    console.log("Participants:", userList);
  },
  onCallEnded: (): void => {
    console.log("Presentation ended");
  },
  onCallEndButtonPressed: (): void => {
    console.log("End button pressed");
    CometChatCalls.endSession();
  },
  onError: (error: any): void => {
    console.log("Error:", error);
  },
  onAudioModesUpdated: (audioModes: any[]): void => {
    console.log("Audio modes:", audioModes);
  },
  onUserMuted: (event: any): void => {
    console.log("User muted:", event);
  },
  onRecordingStarted: (user: any): void => {
    console.log("Recording started by:", user);
  },
  onRecordingStopped: (user: any): void => {
    console.log("Recording stopped by:", user);
  }
};

Adding/Removing Listeners

You can add multiple listeners and remove them by ID:

JavaScript

// Add listener
CometChatCalls.addCallEventListener("PRESENTATION_LISTENER", callListener);

// Remove listener when done
CometChatCalls.removeCallEventListener("PRESENTATION_LISTENER");

TypeScript

CometChatCalls.addCallEventListener("PRESENTATION_LISTENER", callListener);
CometChatCalls.removeCallEventListener("PRESENTATION_LISTENER");

Event Reference

Event	Description
onCallEnded()	Presentation ended
onCallEndButtonPressed()	User clicked end button
onUserJoined(user)	Participant joined
onUserLeft(user)	Participant left
onUserListUpdated(users)	Participant list changed
onAudioModesUpdated(devices)	Audio devices changed
onUserMuted(event)	User mute state changed
onRecordingStarted(user)	Recording started
onRecordingStopped(user)	Recording stopped
onError(error)	Error occurred

Complete Example

JavaScript

import { CometChatCalls } from "@cometchat/calls-sdk-javascript";

class PresentationManager {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.callToken = null;
  }

  async joinAsPresenter(callToken) {
    this.callToken = callToken;
    
    const settings = new CometChatCalls.PresenterSettingsBuilder()
      .setIsPresenter(true)
      .enableDefaultLayout(true)
      .showRecordingButton(true)
      .startWithVideoMuted(false)
      .startWithAudioMuted(false)
      .setCallEventListener(this.getEventListener())
      .build();

    CometChatCalls.joinPresentation(callToken, settings, this.container);
  }

  async joinAsViewer(callToken) {
    this.callToken = callToken;
    
    const settings = new CometChatCalls.PresenterSettingsBuilder()
      .setIsPresenter(false)
      .enableDefaultLayout(true)
      .setCallEventListener(this.getEventListener())
      .build();

    CometChatCalls.joinPresentation(callToken, settings, this.container);
  }

  getEventListener() {
    return {
      onUserJoined: (user) => {
        console.log(`${user.getName()} joined`);
        this.updateParticipantCount();
      },
      onUserLeft: (user) => {
        console.log(`${user.getName()} left`);
        this.updateParticipantCount();
      },
      onUserListUpdated: (users) => {
        this.participants = users;
        this.updateParticipantCount();
      },
      onCallEnded: () => {
        console.log("Presentation ended");
        this.cleanup();
      },
      onCallEndButtonPressed: () => {
        CometChatCalls.endSession();
        this.cleanup();
      },
      onError: (error) => {
        console.error("Presentation error:", error);
      }
    };
  }

  updateParticipantCount() {
    const count = this.participants?.length || 0;
    console.log(`Participants: ${count}`);
  }

  cleanup() {
    this.callToken = null;
    this.participants = [];
  }
}

// Usage
const presentation = new PresentationManager("presentation-container");

// Host starts as presenter
await presentation.joinAsPresenter(callToken);

// Attendees join as viewers
await presentation.joinAsViewer(callToken);

Next Steps

Recording

Record presentations for later viewing

Screen Sharing

Share your screen during presentations