| name | ringing-integration |
| description | Implement ringing with dual SDK (Chat + Calls). Use when adding incoming/outgoing call screens, CometChat.initiateCall, accept/reject/cancel calls, or integrating Chat SDK signaling with Calls SDK sessions. Triggers on "ringing", "incoming call", "outgoing call", "initiateCall", "acceptCall", "rejectCall". |
| inclusion | manual |
CometChat Calls SDK v5 — Ringing Integration
Overview
Implement call ringing using both CometChat Chat SDK (signaling) and Calls SDK (session). The Chat SDK handles initiating, accepting, rejecting, and cancelling calls. The Calls SDK manages the actual call session after acceptance.
Key Imports
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatCalls, type SessionSettings } from '@cometchat/calls-sdk-javascript';
Implementation
1. Initiate a Call (Caller Side)
const call = new CometChat.Call(
receiverUID,
CometChat.RECEIVER_TYPE.USER,
CometChat.CALL_TYPE.VIDEO
);
const outgoingCall = await CometChat.initiateCall(call);
2. Listen for Incoming Calls
const listenerID = 'CALL_LISTENER';
CometChat.addCallListener(listenerID, new CometChat.CallListener({
onIncomingCallReceived: (call) => {
},
onOutgoingCallAccepted: (call) => {
joinCallSession(call.getSessionId(), call.getType());
},
onOutgoingCallRejected: (call) => {
},
onIncomingCallCancelled: (call) => {
},
}));
CometChat.removeCallListener(listenerID);
3. Accept a Call (Receiver Side)
const acceptedCall = await CometChat.acceptCall(sessionId);
joinCallSession(acceptedCall.getSessionId(), acceptedCall.getType());
4. Reject a Call
await CometChat.rejectCall(sessionId, CometChat.CALL_STATUS.REJECTED);
5. Cancel an Outgoing Call
await CometChat.rejectCall(sessionId, CometChat.CALL_STATUS.CANCELLED);
6. Join Call Session After Accept
async function joinCallSession(sessionId: string, callType: string) {
const container = document.getElementById('call-container') as HTMLElement;
const isVoice = callType === CometChat.CALL_TYPE.AUDIO;
const { token } = await CometChatCalls.generateToken(sessionId);
const sessionSettings: SessionSettings = {
sessionType: isVoice ? 'VOICE' : 'VIDEO',
layout: isVoice ? 'SPOTLIGHT' : 'TILE',
startVideoPaused: isVoice,
};
await CometChatCalls.joinSession(token, sessionSettings, container);
}
7. End a Call (During Session)
CometChatCalls.leaveSession();
CometChatCalls.addEventListener('onSessionLeft', () => {
});
8. Handle Leave Button
CometChatCalls.addEventListener('onLeaveSessionButtonClicked', () => {
CometChatCalls.leaveSession();
});
Gotchas
- Cancel uses
CometChat.rejectCall() with CometChat.CALL_STATUS.CANCELLED status
- Call type constants:
CometChat.CALL_TYPE.VIDEO and CometChat.CALL_TYPE.AUDIO
- Remove call listeners on component unmount / page navigation to prevent memory leaks
- Initialize and login to both SDKs before using ringing
- The Chat SDK handles signaling (ring/accept/reject); the Calls SDK handles the actual media session
generateToken() requires the Calls SDK user to be logged in