Migrating from Legacy Ringing

​

Before you start

​

Why it changed

​

Before and after

​

Step 1: Update dependencies

npm install @cometchat/calls-sdk-javascript@5.1.0
# @cometchat/chat-sdk-javascript (4.2.1 or later) stays: chat, and incoming calls on the web

​

Step 2: Rewrite the caller

const call = new CometChat.Call(receiverId, CometChat.CALL_TYPE.VIDEO, CometChat.RECEIVER_TYPE.USER);
const outgoingCall = await CometChat.initiateCall(call);

CometChat.addCallListener("caller", new CometChat.CallListener({
  onOutgoingCallAccepted: async (accepted) => {
    const { token } = await CometChatCalls.generateToken(accepted.getSessionId());
    await CometChatCalls.joinSession(token, { sessionType: "VIDEO" }, container);
  },
  onOutgoingCallRejected: () => closeOutgoingScreen(),
}));

function cancel() {
  CometChat.rejectCall(outgoingCall.getSessionId(), CometChat.CALL_STATUS.CANCELLED);
}

const { data: call, error } = await CometChatCalls.initiateCall(receiverId, {
  type: "video",
  sessionSettings: { sessionType: "VIDEO", isPeerCall: true },
});
if (error) throw new Error(`Could not start the call: ${error.message}`);

const offConnected = CometChatCalls.addEventListener("onParticipantConnected", () => setStatus("Ringing…"));
const offJoined = CometChatCalls.addEventListener("onParticipantJoined", () => {
  stopWatching();
  call.session.join(container);
});
const offClosed = CometChatCalls.addEventListener("onConnectionClosed", () => closeOutgoingScreen());
const stopWatching = () => { offConnected(); offJoined(); offClosed(); };
// Keep onOutgoingCallRejected on your CallListener for a decline, busy or no answer.
// Plus: poll the call's status every 3 s as a backstop and a 45 s ring timer (see Ringing).

function cancel() {
  stopWatching();
  CometChatCalls.endCall(call.sessionId, "cancelled");
}

​

Step 3: Rewrite the callee

CometChat.addCallListener("callee", new CometChat.CallListener({
  onIncomingCallReceived: (call) => showIncomingScreen(call),
  onIncomingCallCancelled: () => closeIncomingScreen(),
}));

async function answer(call) {
  await CometChat.acceptCall(call.getSessionId());
  const { token } = await CometChatCalls.generateToken(call.getSessionId());
  await CometChatCalls.joinSession(token, { sessionType: "VIDEO" }, container);
}

function decline(call) {
  CometChat.rejectCall(call.getSessionId(), CometChat.CALL_STATUS.REJECTED);
}

// Settings for an incoming 1:1 call: the type comes from the call, or an audio call opens the camera.
const settingsFor = (call) => ({
  sessionType: call.getType() === "audio" ? "VOICE" : "VIDEO",
  isPeerCall: true,
});

CometChat.addCallListener("callee", new CometChat.CallListener({
  onIncomingCallReceived: (call) => {
    if (call.getCallInitiator()?.getUid() === CometChatCalls.getLoggedInUser()?.uid) return;
    showIncomingScreen(call);
    CometChatCalls.connect(call.getSessionId(), settingsFor(call))
      .catch(() => {}); // answer falls back to a direct join
  },
  onIncomingCallCancelled: () => closeIncomingScreen(),
}));

async function answer(call) {
  const session = CometChatCalls.getActiveSession();
  if (session?.sessionId === call.getSessionId()) {
    await session.join(container);
  } else {
    const { token } = await CometChatCalls.generateToken(call.getSessionId());
    await CometChatCalls.joinSession(token, settingsFor(call), container);
  }
}

function decline(call) {
  CometChatCalls.endCall(call.getSessionId(), "rejected");
}

​

Step 4: Replace the remaining calls

​

While some users are still on legacy ringing

• Turn it on before the first users update, and leave it on while any version of your apps still in use rings the legacy way.
• It can’t be turned off from the dashboard.
• The six legacy call events (ongoing, cancelled, rejected, unanswered, busy and ended) are under Show legacy in Notifications → Settings → Call Preferences. They only reach devices on legacy ringing.

​

What users will notice

• The caller sees “Ringing…” once the callee’s tab or phone is reached, and the call screen closes when the call is declined, busy or missed (from onOutgoingCallRejected, the status poll, or the ring timer).
• Answering joins almost at once, because the session was prepared while it rang.
• Calls ring between web and mobile users in both directions, when the mobile app also rings with the Calls SDK 5.1 and the Push Notifications SDK 2.0. Calls between an app on legacy ringing and an app on this flow ring too, once Connect legacy ringing is on in the dashboard.
• The browser asks for the camera and microphone when the call is joined, not while it rings.

​

Checklist

• @cometchat/calls-sdk-javascript 5.1; the Chat SDK (4.2.1 or later) stays, initialized and logged in as the same user
• The mobile apps your web app calls also ring with the Calls SDK 5.1 and the Push Notifications SDK 2.0, or Connect legacy ringing is on in the dashboard
• initiateCall passes sessionSettings with sessionType, and isPeerCall: true for a 1:1 call
• Caller listens for onParticipantConnected / onParticipantJoined / onConnectionClosed and joins only on onParticipantJoined with data.session.join(container)
• Caller ends the screen on onOutgoingCallRejected, polls the call’s status every 3 s while ringing as a backstop, and runs a ring timer that ends the call as unanswered
• Callee skips its own outgoing calls, prepares with connect, and answers with session.join(container)
• Callee stops ringing on onIncomingCallCancelled, onConnectionClosed, its ring timer and the status poll
• Decline, busy and cancel use CometChatCalls.endCall; no CometChat.acceptCall, rejectCall or endCall left
• Hang-up uses session.leave() or CometChatCalls.leaveSession()
• Tested: web to web, web to phone and phone to web; decline, busy, cancel, no answer; two open tabs