> ## Documentation Index > Fetch the complete documentation index at: https://cometchat-22654f5b-docs-v6-beta2-flutter-uikit.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Call Session > Start and manage call sessions in your React Native app using the CometChat Calls SDK, including token generation, call settings, listeners, and session control. **Quick Reference** - Generate token and start a call session: ```javascript theme={null} // Generate call token const callToken = await CometChatCalls.generateToken(sessionId, userAuthToken); // Configure and render const callSettings = new CometChatCalls.CallSettingsBuilder() .enableDefaultLayout(true) .setIsAudioOnlyCall(false) .build(); // ``` ## Overview This section demonstrates how to start a call session in a React Native application. Previously known as **Direct Calling**. **Available via:** SDK | UI Kits Before you begin, we strongly recommend you read the [calling setup guide](/sdk/react-native/calling-setup). If you want to implement a complete calling experience with ringing functionality (incoming/outgoing call UI), follow the [Ringing](/sdk/react-native/default-call) guide first. Once the call is accepted, return here to start the call session. ## 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 theme={null} const loggedInUser = await CometChat.getLoggedinUser(); const userAuthToken = loggedInUser.getAuthToken(); const sessionId = "SESSION_ID"; // Random or from Call object in ringing flow 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 theme={null} const loggedInUser = await CometChat.getLoggedinUser(); const userAuthToken = loggedInUser.getAuthToken(); const sessionId: string = "SESSION_ID"; // Random or from Call object in ringing flow CometChatCalls.generateToken(sessionId, userAuthToken).then( (callToken: GenerateToken) => { console.log("Call token generated:", callToken.token); // Use callToken to start the session }, (error: CometChat.CometChatException) => { console.log("Token generation failed:", error); } ); ``` | Parameter | Description | | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | `sessionId` | The unique random session ID. In case you are using the ringing flow, the session ID is available in the `Call` object. | | `userAuthToken` | The user auth token is the logged-in user auth token which you can get by calling CometChat Chat SDK method `CometChat.getLoggedinUser().getAuthToken()` | **On Success** — `generateToken()` returns a `GenerateToken` object containing the session ID and JWT token: **GenerateToken Object:** | Parameter | Type | Description | Sample Value | | ----------- | ------ | --------------------------------------------- | ---------------------------------------------------------------------------------- | | `sessionId` | string | Unique identifier for the call session | `"v1.in.2748663902141719.1772095292a49c6a5198e07f9096447749e87124204d95cfc8"` | | `token` | string | JWT token for authenticating the call session | `"eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6ImNjcHJvX2p3dF9yczI1Nl9rZXkxIn0..."` | ## Start Call Session Use the `CometChatCalls.Component` to render the call UI. This component requires a call token (generated in the previous step) and a `CallSettings` object that configures the call UI and behavior. The `CallSettings` class configures the call UI and behavior. Use `CallSettingsBuilder` to create a `CallSettings` instance. ```javascript theme={null} 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"); // Clear Active Call and End Session - see End Call Session section }, onCallEndButtonPressed: () => { console.log("End call button pressed"); // Handle end call - see End Call Session section }, onError: (error) => { console.log("Call error:", error); }, onAudioModesUpdated: (audioModes) => { console.log("Audio modes updated:", audioModes); }, onCallSwitchedToVideo: (event) => { console.log("Call switched to video:", event); }, onUserMuted: (event) => { console.log("User muted:", event); }, onSessionTimeout: () => { console.log("Session timed out"); } }); const callSettings = new CometChatCalls.CallSettingsBuilder() .enableDefaultLayout(true) .setIsAudioOnlyCall(false) .setCallEventListener(callListener) .build(); // In your render method return ( ); ``` ```typescript theme={null} const callListener = new CometChatCalls.OngoingCallListener({ onUserJoined: (user: CometChat.User) => { console.log("User joined:", user); }, onUserLeft: (user: CometChat.User) => { console.log("User left:", user); }, onUserListUpdated: (userList: CometChat.User[]) => { console.log("User list updated:", userList); }, onCallEnded: () => { console.log("Call ended"); // Clear Active Call and End Session - see End Call Session section }, onCallEndButtonPressed: () => { console.log("End call button pressed"); // Handle end call - see End Call Session section }, onError: (error: CometChat.CometChatException) => { console.log("Call error:", error); }, onAudioModesUpdated: (audioModes: string[]) => { console.log("Audio modes updated:", audioModes); }, onCallSwitchedToVideo: (event: any) => { console.log("Call switched to video:", event); }, onUserMuted: (event: any) => { console.log("User muted:", event); }, onSessionTimeout: () => { console.log("Session timed out"); } }); const callSettings = new CometChatCalls.CallSettingsBuilder() .enableDefaultLayout(true) .setIsAudioOnlyCall(false) .setCallEventListener(callListener) .build(); // In your render method return ( ); ``` | Parameter | Description | | -------------- | -------------------------------------------------------------------- | | `callToken` | The `GenerateToken` object received from `generateToken()` onSuccess | | `callSettings` | Object of `CallSettings` class configured via `CallSettingsBuilder` | ### 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 with end call, mute, video toggle buttons. `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` | | `setCallEventListener(OngoingCallListener)` | Sets the listener to receive call events. See [Call Listeners](#call-listeners) for available callbacks. | | `setMode(string)` | Sets the call UI layout mode. Available: `CometChat.CALL_MODE.DEFAULT` (grid), `CometChat.CALL_MODE.SPOTLIGHT` (active speaker), `CometChat.CALL_MODE.SINGLE` (one participant). Default: `DEFAULT` | | `setAvatarMode(string)` | Sets how avatars are displayed when video is off. Available: `circle`, `square`, `fullscreen`. Default: `circle` | | `setDefaultAudioMode(string)` | Sets the initial audio output device. Available: `SPEAKER`, `EARPIECE`, `BLUETOOTH`, `HEADPHONES` | | `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` | | `showSwitchCameraButton(boolean)` | Shows or hides the switch camera button (front/back). Default: `true` | | `showMuteAudioButton(boolean)` | Shows or hides the mute audio button. Default: `true` | | `showPauseVideoButton(boolean)` | Shows or hides the pause video button. Default: `true` | | `showAudioModeButton(boolean)` | Shows or hides the audio mode selection button. 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](/sdk/react-native/video-view-customisation). | | `enableVideoTileClick(boolean)` | Enables or disables click interactions on video tiles in Spotlight mode. Default: `true` | | `enableVideoTileDrag(boolean)` | Enables or disables drag functionality for video tiles in Spotlight mode. Default: `true` | | `setIdleTimeoutPeriod(number)` | Sets idle timeout in seconds. Warning appears 60 seconds before auto-termination. Default: `180` seconds. *v4.2.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 `.setCallEventListener(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 theme={null} useEffect(() => { 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"); }, onCallEndButtonPressed: () => { console.log("End call button pressed"); }, onError: (error) => { console.log("Call error:", error); }, onAudioModesUpdated: (audioModes) => { console.log("Audio modes updated:", audioModes); }, onCallSwitchedToVideo: (event) => { console.log("Call switched to video:", event); }, onUserMuted: (event) => { console.log("User muted:", event); }, onSessionTimeout: () => { console.log("Session timed out"); } }); // Cleanup on unmount return () => CometChatCalls.removeCallEventListener(listenerId); }, []); ``` ```typescript theme={null} useEffect(() => { const listenerId: string = "UNIQUE_LISTENER_ID"; CometChatCalls.addCallEventListener(listenerId, { onUserJoined: (user: CometChat.User) => { console.log("User joined:", user); }, onUserLeft: (user: CometChat.User) => { console.log("User left:", user); }, onUserListUpdated: (userList: CometChat.User[]) => { console.log("User list updated:", userList); }, onCallEnded: () => { console.log("Call ended"); }, onCallEndButtonPressed: () => { console.log("End call button pressed"); }, onError: (error: CometChat.CometChatException) => { console.log("Call error:", error); }, onAudioModesUpdated: (audioModes: string[]) => { console.log("Audio modes updated:", audioModes); }, onCallSwitchedToVideo: (event: any) => { console.log("Call switched to video:", event); }, onUserMuted: (event: any) => { console.log("User muted:", event); }, onSessionTimeout: () => { console.log("Session timed out"); } }); // Cleanup on unmount return () => CometChatCalls.removeCallEventListener(listenerId); }, []); ``` Always remove call event listeners when the component unmounts using `CometChatCalls.removeCallEventListener(listenerId)`. Failing to remove listeners can cause memory leaks and duplicate event handling. ### 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.2.0+* | | `onCallEndButtonPressed()` | Invoked when the local user taps the end call button. For ringing flow, call `CometChat.endCall()`. For standalone, call `CometChatCalls.endSession()`. | | `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). | | `onAudioModesUpdated(audioModes)` | Invoked when available audio devices change (e.g., Bluetooth connected). | | `onCallSwitchedToVideo(event)` | Invoked when an audio call is upgraded to a video call. | | `onUserMuted(event)` | Invoked when a participant's mute state changes. | | `onScreenShareStarted()` | Invoked when the local user starts sharing a screen. | | `onScreenShareStopped()` | Invoked when the local user stops sharing a screen. | | `onError(error)` | Invoked when an error occurs during the call session. | **On Event** — `onUserJoined` returns a user object when a participant joins the call: **User Object:** | Parameter | Type | Description | Sample Value | | -------------- | ------- | ------------------------------------------- | ----------------------------------------------------------------------- | | `uid` | string | Unique identifier of the user | `"cometchat-uid-6"` | | `name` | string | Display name of the user | `"Ronald Jerry"` | | `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"` | | `id` | string | Internal session participant ID | `"cd530243"` | | `joinedAt` | string | Unix timestamp when user joined (as string) | `"1772095303043"` | | `isVideoMuted` | boolean | Whether user's video is muted | `true` | | `isAudioMuted` | boolean | Whether user's audio is muted | `false` | | `isLocalUser` | boolean | Whether this is the local user | `false` | **On Event** — `onUserLeft` returns a user object when a participant leaves the call: **User Object:** | Parameter | Type | Description | Sample Value | | -------------- | ------- | ------------------------------------------- | ----------------------------------------------------------------------- | | `uid` | string | Unique identifier of the user | `"cometchat-uid-6"` | | `name` | string | Display name of the user | `"Ronald Jerry"` | | `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"` | | `id` | string | Internal session participant ID | `"cd530243"` | | `joinedAt` | string | Unix timestamp when user joined (as string) | `"1772095303043"` | | `isVideoMuted` | boolean | Whether user's video was muted | `true` | | `isAudioMuted` | boolean | Whether user's audio was muted | `false` | **On Event** — `onUserListUpdated` returns an array of all current participants in the call: **User Array:** | Parameter | Type | Description | Sample Value | | --------- | ----- | --------------------- | ------------------------------------------------ | | (array) | array | Array of user objects | [See below ↓](#on-user-list-updated-user-object) | **User Object (each item in array):** | Parameter | Type | Description | Sample Value | | --------- | ------ | ----------------------------- | ----------------------------------------------------------------------- | | `uid` | string | Unique identifier of the user | `"cometchat-uid-7"` | | `name` | string | Display name of the user | `"Henry Marino"` | | `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"` | **On Event** — `onAudioModesUpdated` returns an array of available audio output modes: **Audio Modes Array:** | Parameter | Type | Description | Sample Value | | --------- | ----- | --------------------------- | -------------------------------------------------- | | (array) | array | Array of audio mode objects | [See below ↓](#on-audio-modes-updated-mode-object) | **Audio Mode Object (each item in array):** | Parameter | Type | Description | Sample Value | | ---------- | ------- | --------------------------------------- | ------------ | | `type` | string | Type of audio output device | `"SPEAKER"` | | `selected` | boolean | Whether this mode is currently selected | `true` | **On Event** — `onCallSwitchedToVideo` is invoked when an audio call is upgraded to video. This event may not include additional data. ## End Call Session Ending a call session properly is essential to release media resources (camera, microphone, network connections) and update call state across all participants. The termination process differs based on whether you're using the Ringing flow or Session Only flow. ### Ringing Flow When using the [Ringing](/sdk/react-native/default-call) flow, you must coordinate between the CometChat Chat SDK and the Calls SDK to properly terminate the call and notify all participants. The Ringing flow requires calling methods from both the Chat SDK (`CometChat.endCall()`) and the Calls SDK (`CometChatCalls.endSession()`) to ensure proper call termination and participant notification. **User who initiates the end call:** When the user presses the end call button in the UI, the `onCallEndButtonPressed()` callback is triggered. You must call `CometChat.endCall()` inside this callback to properly terminate the call and notify other participants. On success, call `CometChat.clearActiveCall()` and `CometChatCalls.endSession()` to release resources. ```javascript theme={null} onCallEndButtonPressed: () => { CometChat.endCall(sessionId).then( (call) => { console.log("Call ended successfully"); CometChat.clearActiveCall(); CometChatCalls.endSession(); // Close the calling screen }, (error) => { console.log("End call failed:", error); } ); } ``` ```typescript theme={null} onCallEndButtonPressed: () => { CometChat.endCall(sessionId).then( (call: CometChat.Call) => { console.log("Call ended successfully"); CometChat.clearActiveCall(); CometChatCalls.endSession(); // Close the calling screen }, (error: CometChat.CometChatException) => { console.log("End call failed:", error); } ); } ``` **On Success** — `CometChat.endCall()` returns a `Call` object with the final call status: **Call Object (Root Level):** | Parameter | Type | Description | Sample Value | | ---------------- | ------- | ----------------------------------------- | ----------------------------------------------------------------------------- | | `reactions` | array | List of reactions on the call | `[]` | | `mentionedUsers` | array | List of mentioned users | `[]` | | `mentionedMe` | boolean | Whether current user was mentioned | `false` | | `receiverId` | string | UID of the call receiver | `"cometchat-uid-6"` | | `type` | string | Type of call | `"audio"` | | `receiverType` | string | Type of receiver | `"user"` | | `category` | string | Message category | `"call"` | | `action` | string | Call action | `"ended"` | | `sessionId` | string | Unique session identifier | `"v1.in.2748663902141719.1772095292a49c6a5198e07f9096447749e87124204d95cfc8"` | | `status` | string | Current call status | `"ended"` | | `metadata` | object | Custom metadata attached to the call | `{"new": "metajson"}` | | `initiatedAt` | number | Unix timestamp when call was initiated | `1772095292` | | `id` | string | Unique message ID | `"25424"` | | `conversationId` | string | Unique conversation identifier | `"cometchat-uid-6_user_cometchat-uid-7"` | | `sender` | object | User who initiated the call | [See below ↓](#end-call-sender-object) | | `receiver` | object | User receiving the call | [See below ↓](#end-call-receiver-object) | | `data` | object | Additional call data | [See below ↓](#end-call-data-object) | | `sentAt` | number | Unix timestamp when call message was sent | `1772095553` | | `updatedAt` | number | Unix timestamp of last update | `1772095553` | | `callInitiator` | object | User who initiated the call | [See below ↓](#end-call-initiator-object) | | `callReceiver` | object | User receiving the call | [See below ↓](#end-call-call-receiver-object) | *** **`sender` Object:** | Parameter | Type | Description | Sample Value | | --------------- | ------- | ------------------------------------------------- | ----------------------------------------------------------------------- | | `hasBlockedMe` | boolean | Whether this user has blocked the current user | `false` | | `blockedByMe` | boolean | Whether the current user has blocked this user | `false` | | `deactivatedAt` | number | Timestamp when user was deactivated (0 if active) | `0` | | `uid` | string | Unique user identifier | `"cometchat-uid-7"` | | `name` | string | Display name of the user | `"Henry Marino"` | | `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"` | | `lastActiveAt` | number | Unix timestamp of last activity | `1772094890` | | `role` | string | User's role | `"default"` | | `status` | string | User's online status | `"online"` | | `tags` | array | Tags associated with the user | `[]` | *** **`receiver` Object:** | Parameter | Type | Description | Sample Value | | --------------- | ------- | ------------------------------------------------- | ----------------------------------------------------------------------- | | `hasBlockedMe` | boolean | Whether this user has blocked the current user | `false` | | `blockedByMe` | boolean | Whether the current user has blocked this user | `false` | | `deactivatedAt` | number | Timestamp when user was deactivated (0 if active) | `0` | | `uid` | string | Unique user identifier | `"cometchat-uid-6"` | | `name` | string | Display name of the user | `"Ronald Jerry"` | | `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"` | | `lastActiveAt` | number | Unix timestamp of last activity | `1772094886` | | `role` | string | User's role | `"default"` | | `status` | string | User's online status | `"online"` | | `tags` | array | Tags associated with the user | `[]` | *** **`data` Object:** | Parameter | Type | Description | Sample Value | | ---------- | ------ | --------------------------- | -------------------------------------------------------------------------- | | `action` | string | Call action type | `"ended"` | | `entities` | object | Entity details for the call | [See below ↓](#end-call-data-entities-object) | | `resource` | string | SDK resource identifier | `"REACT_NATIVE-4_0_14-3e152d60-8e2b-435b-86cd-0c0fe3bbc6e1-1772094888945"` | **`data.entities` Object:** | Parameter | Type | Description | Sample Value | | --------- | ------ | --------------------------------- | ------------------------------------------------- | | `by` | object | User who performed the action | [See below ↓](#end-call-data-entities-by-object) | | `for` | object | User the action was performed for | [See below ↓](#end-call-data-entities-for-object) | | `on` | object | The call entity | [See below ↓](#end-call-data-entities-on-object) | **`data.entities.by` Object:** | Parameter | Type | Description | Sample Value | | ------------ | ------ | ------------------- | ------------------------------------------------------- | | `entity` | object | User entity details | [See below ↓](#end-call-data-entities-by-entity-object) | | `entityType` | string | Type of entity | `"user"` | **`data.entities.by.entity` Object:** | Parameter | Type | Description | Sample Value | | -------------- | ------ | ------------------------------- | ----------------------------------------------------------------------- | | `uid` | string | Unique user identifier | `"cometchat-uid-7"` | | `name` | string | Display name of the user | `"Henry Marino"` | | `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"` | | `status` | string | User's online status | `"online"` | | `role` | string | User's role | `"default"` | | `lastActiveAt` | number | Unix timestamp of last activity | `1772094890` | | `tags` | array | Tags associated with the user | `[]` | **`data.entities.for` Object:** | Parameter | Type | Description | Sample Value | | ------------ | ------ | ------------------- | -------------------------------------------------------- | | `entity` | object | User entity details | [See below ↓](#end-call-data-entities-for-entity-object) | | `entityType` | string | Type of entity | `"user"` | **`data.entities.for.entity` Object:** | Parameter | Type | Description | Sample Value | | ---------------- | ------ | ------------------------------- | ----------------------------------------------------------------------- | | `uid` | string | Unique user identifier | `"cometchat-uid-6"` | | `name` | string | Display name of the user | `"Ronald Jerry"` | | `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"` | | `status` | string | User's online status | `"online"` | | `role` | string | User's role | `"default"` | | `lastActiveAt` | number | Unix timestamp of last activity | `1772094886` | | `conversationId` | string | Conversation ID for this user | `"cometchat-uid-6_user_cometchat-uid-7"` | | `tags` | array | Tags associated with the user | `[]` | **`data.entities.on` Object:** | Parameter | Type | Description | Sample Value | | ------------ | ------ | ------------------- | ------------------------------------------------------- | | `entity` | object | Call entity details | [See below ↓](#end-call-data-entities-on-entity-object) | | `entityType` | string | Type of entity | `"call"` | **`data.entities.on.entity` Object:** | Parameter | Type | Description | Sample Value | | ---------------- | ------ | -------------------------------------- | ----------------------------------------------------------------------------- | | `sessionid` | string | Unique session identifier | `"v1.in.2748663902141719.1772095292a49c6a5198e07f9096447749e87124204d95cfc8"` | | `conversationId` | string | Conversation ID | `"cometchat-uid-6_user_cometchat-uid-7"` | | `sender` | string | UID of the call sender | `"cometchat-uid-7"` | | `receiverType` | string | Type of receiver | `"user"` | | `receiver` | string | UID of the call receiver | `"cometchat-uid-6"` | | `status` | string | Call status | `"ended"` | | `type` | string | Type of call | `"audio"` | | `data` | object | Nested call data | `{...}` | | `initiatedAt` | number | Unix timestamp when call was initiated | `1772095292` | | `startedAt` | number | Unix timestamp when call started | `1772095302` | | `endedAt` | number | Unix timestamp when call ended | `1772095553` | | `duration` | number | Call duration in seconds | `251` | *** **`callInitiator` Object:** | Parameter | Type | Description | Sample Value | | --------------- | ------- | ------------------------------------------------- | ----------------------------------------------------------------------- | | `hasBlockedMe` | boolean | Whether this user has blocked the current user | `false` | | `blockedByMe` | boolean | Whether the current user has blocked this user | `false` | | `deactivatedAt` | number | Timestamp when user was deactivated (0 if active) | `0` | | `uid` | string | Unique user identifier | `"cometchat-uid-7"` | | `name` | string | Display name of the user | `"Henry Marino"` | | `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-7.webp"` | | `lastActiveAt` | number | Unix timestamp of last activity | `1772094890` | | `role` | string | User's role | `"default"` | | `status` | string | User's online status | `"online"` | | `tags` | array | Tags associated with the user | `[]` | *** **`callReceiver` Object:** | Parameter | Type | Description | Sample Value | | --------------- | ------- | ------------------------------------------------- | ----------------------------------------------------------------------- | | `hasBlockedMe` | boolean | Whether this user has blocked the current user | `false` | | `blockedByMe` | boolean | Whether the current user has blocked this user | `false` | | `deactivatedAt` | number | Timestamp when user was deactivated (0 if active) | `0` | | `uid` | string | Unique user identifier | `"cometchat-uid-6"` | | `name` | string | Display name of the user | `"Ronald Jerry"` | | `avatar` | string | URL to user's avatar image | `"https://assets.cometchat.io/sampleapp/v2/users/cometchat-uid-6.webp"` | | `lastActiveAt` | number | Unix timestamp of last activity | `1772094886` | | `role` | string | User's role | `"default"` | | `status` | string | User's online status | `"online"` | | `tags` | array | Tags associated with the user | `[]` | **Remote participant** (receives the `onCallEnded()` callback): Call `CometChat.clearActiveCall()` to clear the local call state, then call `CometChatCalls.endSession()` to release media resources. ```javascript theme={null} onCallEnded: () => { CometChat.clearActiveCall(); CometChatCalls.endSession(); // Close the calling screen } ``` ```typescript theme={null} onCallEnded: () => { CometChat.clearActiveCall(); CometChatCalls.endSession(); // Close the calling screen } ``` ### Session Only Flow When using the Session Only flow (direct call without ringing), you only need to call the Calls SDK method to end the session. There's no need to notify the Chat SDK since no call signaling was involved. Call `CometChatCalls.endSession()` in the `onCallEndButtonPressed()` callback to release all media resources and disconnect from the call session. ```javascript theme={null} onCallEndButtonPressed: () => { CometChatCalls.endSession(); // Close the calling screen } ``` ```typescript theme={null} 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. Useful for allowing users to switch their camera view without leaving the call. ```javascript theme={null} CometChatCalls.switchCamera(); ``` ```typescript theme={null} CometChatCalls.switchCamera(); ``` ### Mute Audio Controls the local audio stream transmission. When muted, other participants cannot hear the local user. * `true` — Mutes the microphone, stops transmitting audio * `false` — Unmutes the microphone, resumes audio transmission ```javascript theme={null} CometChatCalls.muteAudio(true); ``` ```typescript theme={null} CometChatCalls.muteAudio(true); ``` ### Pause Video Controls the local video stream transmission. When paused, other participants see a frozen frame or avatar instead of live video. * `true` — Pauses the camera, stops transmitting video * `false` — Resumes the camera, continues video transmission ```javascript theme={null} CometChatCalls.pauseVideo(true); ``` ```typescript theme={null} CometChatCalls.pauseVideo(true); ``` ### Set Audio Mode Routes the audio output to a specific device. Use this to let users choose between speaker, earpiece, or connected audio devices. **Available modes:** * `CometChat.AUDIO_MODE.SPEAKER` — Device speaker (loudspeaker) * `CometChat.AUDIO_MODE.EARPIECE` — Phone earpiece * `CometChat.AUDIO_MODE.BLUETOOTH` — Connected Bluetooth device * `CometChat.AUDIO_MODE.HEADPHONES` — Wired headphones ```javascript theme={null} CometChatCalls.setAudioMode(CometChat.AUDIO_MODE.EARPIECE); ``` ```typescript theme={null} CometChatCalls.setAudioMode(CometChat.AUDIO_MODE.EARPIECE); ``` ### Switch To Video Call Upgrades an ongoing audio call to a video call. This enables the camera and starts transmitting video to other participants. The remote participant receives the `onCallSwitchedToVideo()` callback. ```javascript theme={null} CometChatCalls.switchToVideoCall(); ``` ```typescript theme={null} CometChatCalls.switchToVideoCall(); ``` ### Get Audio Output Modes Returns the list of available audio output devices. Use this to display audio options to the user and then set the selected mode using `setAudioMode()`. ```javascript theme={null} CometChatCalls.getAudioOutputModes().then( (modes) => { console.log("Available audio modes:", modes); // Each mode has: mode (string) and isSelected (boolean) }, (error) => { console.log("Failed to get audio modes:", error); } ); ``` ```typescript theme={null} CometChatCalls.getAudioOutputModes().then( (modes: CometChat.AudioMode[]) => { console.log("Available audio modes:", modes); // Each mode has: mode (string) and isSelected (boolean) }, (error: CometChat.CometChatException) => { console.log("Failed to get audio modes:", error); } ); ``` **On Success** — `getAudioOutputModes()` returns an object containing an array of available audio modes: **Response Object:** | Parameter | Type | Description | Sample Value | | --------- | ----- | ------------------------------------- | ------------------------------------------- | | `modes` | array | Array of available audio output modes | [See below ↓](#get-audio-modes-mode-object) | **Mode Object (each item in `modes` array):** | Parameter | Type | Description | Sample Value | | ---------- | ------- | --------------------------------------- | ------------ | | `type` | string | Type of audio output device | `"SPEAKER"` | | `selected` | boolean | Whether this mode is currently selected | `true` | ### End Call Terminates the current call session and releases all media resources (camera, microphone, network connections). After calling this method, the call view should be closed. ```javascript theme={null} CometChatCalls.endSession(); ``` ```typescript theme={null} CometChatCalls.endSession(); ``` ## Best Practices Call tokens are session-specific and time-limited. Generate them right before starting the call session rather than caching them for extended periods. This ensures the token is fresh and reduces the chance of token expiry errors. When using the Ringing flow, remember to call both `CometChat.endCall()` and `CometChatCalls.endSession()`. Missing either call can leave the session in an inconsistent state — the Chat SDK may still show the call as active, or media resources may not be released properly. Always remove call event listeners in your component's cleanup function (e.g., the return function of `useEffect`). Orphaned listeners can cause memory leaks, duplicate event handling, and unexpected behavior when navigating between screens. The `CometChatCalls.Component` should be rendered inside a `View` with `height: '100%'`, `width: '100%'`, and `position: 'relative'`. This ensures the call UI fills the screen correctly and overlays render in the right position. When registering call event listeners with `addCallEventListener`, use a unique `listenerId` per component instance. This prevents one component from accidentally overwriting another component's listener, especially in navigation stacks where multiple screens may be mounted simultaneously. ## Troubleshooting Ensure the user is logged in and the auth token is valid. Call `CometChat.getLoggedinUser()` to verify the user session is active. If the auth token has expired, re-authenticate the user before generating a call token. Verify that the `CometChatCalls.Component` is wrapped in a `View` with explicit dimensions (`height: '100%'`, `width: '100%'`). The component requires a sized container to render. Also confirm that both `callSettings` and `callToken` props are provided and not `null` or `undefined`. Check that the listener is registered before the call session starts. If using `addCallEventListener`, ensure the `listenerId` is unique and hasn't been overwritten by another registration. Also verify that the Calls SDK has been initialized via `CometChatCalls.init()`. The `onCallEnded` callback only fires for 1:1 calls (exactly 2 participants). For group calls, use `onUserLeft` and `onUserListUpdated` to track when participants leave, and handle session cleanup based on your app's logic. Check device permissions for camera and microphone. On React Native, you need to request `CAMERA` and `RECORD_AUDIO` permissions on Android, and add `NSCameraUsageDescription` and `NSMicrophoneUsageDescription` to `Info.plist` on iOS. Also verify that `setIsAudioOnlyCall` matches your intended call type. *** ## Next Steps Implement a complete calling experience with incoming and outgoing call UI Record call sessions for playback and compliance Customize the main video container and participant tiles Enable screen sharing and presenter layouts in calls