Calls SDK

Use CometChat Calls SDK v5 for JavaScript to add voice and video calling, call sessions, participants, layouts, and in-call features.

The CometChat Calls SDK enables real-time voice and video calling capabilities in your web application. Built on top of WebRTC, it provides a complete calling solution with built-in UI components and extensive customization options.

​

Prerequisites

Before integrating the Calls SDK, ensure you have:

1. CometChat Account: Sign up and create an app to get your App ID, Region, and API Key
2. CometChat Users: Users must exist in CometChat to use calling features. For testing, create users via the Dashboard or REST API. Authentication is handled by the Calls SDK - see Authentication
3. Browser Requirements: See Browser Compatibility below
4. Permissions: Camera and microphone permissions for video/audio calls

​

Browser Compatibility

The Calls SDK requires a modern browser with WebRTC support:

Browser	Minimum Version	Notes
Chrome	72+	Full support
Firefox	68+	Full support
Safari	12.1+	Full support
Edge	79+	Chromium-based
Opera	60+	Full support
Samsung Internet	12+	Full support

​

Requirements

• HTTPS: Required for camera/microphone access in production. Localhost is exempt during development.
• WebRTC: The browser must support WebRTC APIs (getUserMedia, RTCPeerConnection)
• JavaScript: ES6+ support required

​

Mobile Browsers

Browser	Support
Chrome for Android	✅ Full support
Safari for iOS	✅ iOS 12.1+
Firefox for Android	✅ Full support
Samsung Internet	✅ Full support

For native mobile apps, consider using the iOS or Android SDKs for better performance and native features like CallKit/VoIP.

​

Framework Integrations

Get started quickly with framework-specific guides that include complete setup, authentication, and working call implementations:

React

Context provider pattern with hooks

Vue

Composables and reactive state management

Angular

Service-based architecture with RxJS

Next.js

SSR handling with App Router and Pages Router

Ionic

Cross-platform with Angular, React, and Vue

​

Call Flow

Every call is a session joined by ID. Where the ID comes from depends on the kind of call:

• Direct call: your app shares a session ID (for example in a message) and each participant generates a token and calls joinSession with it. Group calls and meetings work this way.
• Ringing call: the caller starts it with CometChatCalls.initiateCall, the callee’s open tabs receive it through the Chat SDK and prepare it with CometChatCalls.connect, and both sides join the prepared session with session.join(container) once the callee answers. See Ringing.

​

Features

Ringing

Start a call, ring the callee’s open tabs and phones, show “Ringing…”, answer, decline, cancel and end

Call Layouts

Tile, Sidebar, and Spotlight view modes for different call scenarios

Recording

Record call sessions for later playback

Call Logs

Retrieve call history and details

Participant Management

Mute, pin, and manage call participants

Screen Sharing

Share your screen with other participants

Virtual Background

Apply blur or custom image backgrounds

Raise Hand

Signal to get attention during calls

Idle Timeout

Automatic session termination when alone in a call

​

Architecture

The SDK is organized around these core components:

Component	Description
CometChatCalls	Main entry point for SDK initialization, authentication, session management, and call actions
CallAppSettings	Configuration object for SDK initialization (App ID, Region)
CallSettings	Configuration object for individual call sessions
CallSession	The session object initiateCall, connect and getActiveSession() return: sessionId, prepareStatus, join(container), leave() and every session action
addEventListener	Method to register event listeners for session, participant, media, and UI events

​

Single Active Session

CometChatCalls is a singleton, and it tracks one active call session at a time. Every session method acts on that current session, which is why methods like leaveSession() take no session ID:

// Joins and becomes the active session
await CometChatCalls.joinSession(callToken, callSettings, container);

// Acts on whatever session is currently active - no session ID needed
CometChatCalls.leaveSession();

Behavior	Detail
One session at a time	The SDK does not support being connected to two sessions simultaneously. Leave the current session before joining another. A session that is only prepared (an outgoing call still ringing) counts too: joinSession refuses to run while it exists.
Session methods take no session ID	leaveSession() and the other actions apply to the active session only.
Actions apply to the active session	muteAudio(), pauseVideo(), startScreenShare(), and similar methods target the session currently in progress.
Events are not session-scoped	Listeners registered with addEventListener fire for the active session.

To move a user from one call to another, leave the current session, wait for the onSessionLeft event, then generate a token for the new session and join:

CometChatCalls.addEventListener("onSessionLeft", async () => {
  const { token } = await CometChatCalls.generateToken(nextSessionId);
  await CometChatCalls.joinSession(token, callSettings, container);
});

CometChatCalls.leaveSession();

The limit applies per SDK instance. Separate browser tabs or windows each load their own instance, so they can hold separate sessions independently.

​

Sample App

React

React sample app

Angular

Angular sample app

Vue

Vue sample app

Svelte

Svelte sample app

Ionic

Ionic sample app

Changelog

View the latest releases and changes