Standalone Calling

CometChat Calling SDK v4 - Stable Release - Standalone Calling for JavaScript

Overview

This section demonstrates how to implement calling functionality using only the CometChat Calls SDK, without requiring the Chat SDK. This is ideal for applications that need video/audio calling capabilities without the full chat infrastructure.

Before you begin, ensure you have completed the Calls SDK setup.

User Authentication

To start a call session, you need a user auth token. Since this implementation doesn’t use the Chat SDK, you’ll need to obtain the auth token via the CometChat REST API.

To understand user authentication in CometChat, see the User Auth documentation.

You can obtain the auth token using one of these REST API endpoints:

• Create Auth Token — Creates a new auth token for a user
• Get Auth Token — Retrieves an existing auth token

For testing or POC purposes, you can create an auth token directly from the CometChat Dashboard. Navigate to Users & Groups → Users, select a user, and click + Create Auth Token.

Store the auth token securely in your application for use when generating call tokens.

Generate Call Token

A call token is required for secure access to a call session. Each token is unique to a specific session and user combination, ensuring that only authorized users can join the call.

You can generate the token just before starting the call, or generate and store it ahead of time based on your use case.

Use the generateToken() method to create a call token:

JavaScript

const sessionId = "UNIQUE_SESSION_ID"; // Generate a unique session ID
const userAuthToken = "USER_AUTH_TOKEN"; // Obtained from REST API

CometChatCalls.generateToken(sessionId, userAuthToken).then(
  (callToken) => {
    console.log("Call token generated:", callToken.token);
    // Use callToken to start the session
  },
  (error) => {
    console.log("Token generation failed:", error);
  }
);

TypeScript

const sessionId: string = "UNIQUE_SESSION_ID"; // Generate a unique session ID
const userAuthToken: string = "USER_AUTH_TOKEN"; // Obtained from REST API

CometChatCalls.generateToken(sessionId, userAuthToken).then(
  (callToken: any) => {
    console.log("Call token generated:", callToken.token);
    // Use callToken to start the session
  },
  (error: any) => {
    console.log("Token generation failed:", error);
  }
);

Parameter	Description
sessionId	A unique session ID for the call. Generate this yourself or use a shared ID for participants to join the same call.
userAuthToken	The user auth token obtained from the CometChat REST API.

Start Call Session

Use the startSession() method to join a call session. This method requires:

1. A call token (generated in the previous step)
2. A CallSettings object that configures the call UI and behavior
3. An HTML element where the call UI will be rendered

JavaScript

const callListener = new CometChatCalls.OngoingCallListener({
  onUserJoined: (user) => {
    console.log("User joined:", user);
  },
  onUserLeft: (user) => {
    console.log("User left:", user);
  },
  onUserListUpdated: (userList) => {
    console.log("User list updated:", userList);
  },
  onCallEnded: () => {
    console.log("Call ended");
    CometChatCalls.endSession();
    // Close calling screen
  },
  onCallEndButtonPressed: () => {
    console.log("End call button pressed");
    CometChatCalls.endSession();
    // Close calling screen
  },
  onError: (error) => {
    console.log("Call error:", error);
  },
  onMediaDeviceListUpdated: (deviceList) => {
    console.log("Device list updated:", deviceList);
  },
  onUserMuted: (event) => {
    console.log("User muted:", event);
  },
  onScreenShareStarted: () => {
    console.log("Screen sharing started");
  },
  onScreenShareStopped: () => {
    console.log("Screen sharing stopped");
  },
  onCallSwitchedToVideo: (event) => {
    console.log("Call switched to video:", event);
  },
  onSessionTimeout: () => {
    console.log("Session timed out");
  }
});

const callSettings = new CometChatCalls.CallSettingsBuilder()
  .enableDefaultLayout(true)
  .setIsAudioOnlyCall(false)
  .setCallListener(callListener)
  .build();

const htmlElement = document.getElementById("call-container");
CometChatCalls.startSession(callToken, callSettings, htmlElement);

TypeScript

const callListener = new CometChatCalls.OngoingCallListener({
  onUserJoined: (user: any) => {
    console.log("User joined:", user);
  },
  onUserLeft: (user: any) => {
    console.log("User left:", user);
  },
  onUserListUpdated: (userList: any[]) => {
    console.log("User list updated:", userList);
  },
  onCallEnded: () => {
    console.log("Call ended");
    CometChatCalls.endSession();
    // Close calling screen
  },
  onCallEndButtonPressed: () => {
    console.log("End call button pressed");
    CometChatCalls.endSession();
    // Close calling screen
  },
  onError: (error: any) => {
    console.log("Call error:", error);
  },
  onMediaDeviceListUpdated: (deviceList: any[]) => {
    console.log("Device list updated:", deviceList);
  },
  onUserMuted: (event: any) => {
    console.log("User muted:", event);
  },
  onScreenShareStarted: () => {
    console.log("Screen sharing started");
  },
  onScreenShareStopped: () => {
    console.log("Screen sharing stopped");
  },
  onCallSwitchedToVideo: (event: any) => {
    console.log("Call switched to video:", event);
  },
  onSessionTimeout: () => {
    console.log("Session timed out");
  }
});

const callSettings = new CometChatCalls.CallSettingsBuilder()
  .enableDefaultLayout(true)
  .setIsAudioOnlyCall(false)
  .setCallListener(callListener)
  .build();

const htmlElement = document.getElementById("call-container") as HTMLElement;
CometChatCalls.startSession(callToken, callSettings, htmlElement);

Parameter	Description
callToken	The token received from generateToken() onSuccess
callSettings	Object of CallSettings class configured via CallSettingsBuilder
htmlElement	DOM element where the call UI will be rendered

Call Settings

Configure the call experience using the following CallSettingsBuilder methods:

Method	Description
enableDefaultLayout(boolean)	Enables or disables the default call UI layout with built-in controls. true shows the default layout. false hides the button layout. Default: true
setIsAudioOnlyCall(boolean)	Sets whether the call is audio-only or audio-video. true for audio-only, false for audio-video. Default: false
setCallListener(OngoingCallListener)	Sets the listener to receive call events. See Call Listeners.
setMode(string)	Sets the call UI layout mode. Available: CometChat.CALL_MODE.DEFAULT, CometChat.CALL_MODE.SPOTLIGHT. Default: DEFAULT
startWithAudioMuted(boolean)	Starts the call with the microphone muted. Default: false
startWithVideoMuted(boolean)	Starts the call with the camera turned off. Default: false
showEndCallButton(boolean)	Shows or hides the end call button in the default layout. Default: true
showMuteAudioButton(boolean)	Shows or hides the mute audio button. Default: true
showPauseVideoButton(boolean)	Shows or hides the pause video button. Default: true
showScreenShareButton(boolean)	Shows or hides the screen share button. Default: true
showModeButton(boolean)	Shows or hides the mode toggle button (switch between DEFAULT and SPOTLIGHT). Default: true
showSwitchToVideoCallButton(boolean)	Shows or hides the button to upgrade an audio call to video. Default: true
setMainVideoContainerSetting(MainVideoContainerSetting)	Customizes the main video container. See Video View Customization.
setIdleTimeoutPeriod(number)	Sets idle timeout in seconds. Warning appears 60 seconds before auto-termination. Default: 180 seconds. v4.1.0+

Call Listeners

The OngoingCallListener provides real-time callbacks for call session events, including participant changes, call state updates, and error conditions.

You can register listeners in two ways:

1. Via CallSettingsBuilder: Use .setCallListener(listener) when building call settings
2. Via addCallEventListener: Use CometChatCalls.addCallEventListener(listenerId, listener) to add multiple listeners

Each listener requires a unique listenerId string. This ID is used to:

• Prevent duplicate registrations — Re-registering with the same ID replaces the existing listener
• Enable targeted removal — Remove specific listeners without affecting others

JavaScript

const listenerId = "UNIQUE_LISTENER_ID";

CometChatCalls.addCallEventListener(listenerId, {
  onUserJoined: (user) => {
    console.log("User joined:", user);
  },
  onUserLeft: (user) => {
    console.log("User left:", user);
  },
  onUserListUpdated: (userList) => {
    console.log("User list updated:", userList);
  },
  onCallEnded: () => {
    console.log("Call ended");
    CometChatCalls.endSession();
    // Close calling screen
  },
  onCallEndButtonPressed: () => {
    console.log("End call button pressed");
    CometChatCalls.endSession();
    // Close calling screen
  },
  onError: (error) => {
    console.log("Call error:", error);
  },
  onMediaDeviceListUpdated: (deviceList) => {
    console.log("Device list updated:", deviceList);
  },
  onUserMuted: (event) => {
    console.log("User muted:", event);
  },
  onScreenShareStarted: () => {
    console.log("Screen sharing started");
  },
  onScreenShareStopped: () => {
    console.log("Screen sharing stopped");
  },
  onCallSwitchedToVideo: (event) => {
    console.log("Call switched to video:", event);
  },
  onSessionTimeout: () => {
    console.log("Session timed out");
  }
});

// Remove listener when done
CometChatCalls.removeCallEventListener(listenerId);

TypeScript

const listenerId: string = "UNIQUE_LISTENER_ID";

CometChatCalls.addCallEventListener(listenerId, {
  onUserJoined: (user: any) => {
    console.log("User joined:", user);
  },
  onUserLeft: (user: any) => {
    console.log("User left:", user);
  },
  onUserListUpdated: (userList: any[]) => {
    console.log("User list updated:", userList);
  },
  onCallEnded: () => {
    console.log("Call ended");
    CometChatCalls.endSession();
    // Close calling screen
  },
  onCallEndButtonPressed: () => {
    console.log("End call button pressed");
    CometChatCalls.endSession();
    // Close calling screen
  },
  onError: (error: any) => {
    console.log("Call error:", error);
  },
  onMediaDeviceListUpdated: (deviceList: any[]) => {
    console.log("Device list updated:", deviceList);
  },
  onUserMuted: (event: any) => {
    console.log("User muted:", event);
  },
  onScreenShareStarted: () => {
    console.log("Screen sharing started");
  },
  onScreenShareStopped: () => {
    console.log("Screen sharing stopped");
  },
  onCallSwitchedToVideo: (event: any) => {
    console.log("Call switched to video:", event);
  },
  onSessionTimeout: () => {
    console.log("Session timed out");
  }
});

// Remove listener when done
CometChatCalls.removeCallEventListener(listenerId);

Events

Event	Description
onCallEnded()	Invoked when the call session terminates for a 1:1 call. Both participants receive this callback. Only fires for calls with exactly 2 participants.
onSessionTimeout()	Invoked when the call is auto-terminated due to inactivity (default: 180 seconds). Warning appears 60 seconds before. v4.1.0+
onCallEndButtonPressed()	Invoked when the local user clicks the end call button. Call CometChatCalls.endSession() to leave the session.
onUserJoined(user)	Invoked when a remote participant joins. The user contains UID, name, and avatar.
onUserLeft(user)	Invoked when a remote participant leaves the call session.
onUserListUpdated(userList)	Invoked whenever the participant list changes (join or leave events).
onMediaDeviceListUpdated(deviceList)	Invoked when available audio/video devices change (e.g., new microphone connected).
onUserMuted(event)	Invoked when a participant’s mute state changes. Contains muted and mutedBy properties.
onScreenShareStarted()	Invoked when the local user starts sharing their screen.
onScreenShareStopped()	Invoked when the local user stops sharing their screen.
onCallSwitchedToVideo(event)	Invoked when an audio call is upgraded to a video call. Contains sessionId, initiator, and responder.
onError(error)	Invoked when an error occurs during the call session.

End Call Session

To end the call session and release all media resources (camera, microphone, network connections), call CometChatCalls.endSession() in the onCallEndButtonPressed() callback.

JavaScript

onCallEndButtonPressed: () => {
  CometChatCalls.endSession();
  // Close the calling screen
}

TypeScript

onCallEndButtonPressed: () => {
  CometChatCalls.endSession();
  // Close the calling screen
}

Methods

These methods are available for performing custom actions during an active call session. Use them to build custom UI controls or implement specific behaviors based on your use case.

These methods can only be called when a call session is active.

Switch Camera

Toggles between the front and rear camera during a video call. Only supported on mobile browsers.

CometChatCalls.switchCamera();

This method is only supported on mobile browsers. It has no effect on desktop browsers. Available since v4.2.0

Mute Audio

Controls the local audio stream transmission. true mutes, false unmutes.

CometChatCalls.muteAudio(true);

Pause Video

Controls the local video stream transmission. true pauses, false resumes.

CometChatCalls.pauseVideo(true);

Start Screen Share

CometChatCalls.startScreenShare();

Stop Screen Share

CometChatCalls.stopScreenShare();

Set Mode

Changes the call UI layout mode dynamically during the call.

CometChatCalls.setMode(CometChat.CALL_MODE.SPOTLIGHT);

Get Audio Input Devices

const audioInputDevices = CometChatCalls.getAudioInputDevices();

Get Audio Output Devices

const audioOutputDevices = CometChatCalls.getAudioOutputDevices();

Get Video Input Devices

const videoInputDevices = CometChatCalls.getVideoInputDevices();

Set Audio Input Device

CometChatCalls.setAudioInputDevice(deviceId);

Set Audio Output Device

CometChatCalls.setAudioOutputDevice(deviceId);

Set Video Input Device

CometChatCalls.setVideoInputDevice(deviceId);

Switch To Video Call

CometChatCalls.switchToVideoCall();

End Call

CometChatCalls.endSession();