Default Calling - CometChat Docs

This section will provide information on how a complete calling workflow can be set up using the CometChat SDK. We’ve built the complete workflow to help your users make calls, receive calls as well as accept/reject calls. Let us assume Alex to be the call initiator and Bob is the receiver.

Alex initiates the call to Bob using the initiateCall() method.
Bob now has two choices:
1. Accept the call from Alex using the acceptCall() method.
2. Reject the call from Alex using the rejectCall() method passing the status as rejected.
In the meantime, Alex has the option to cancel the call he initiated to Bob using the rejectCall() method passing the status as cancelled.
If Bob accepts the call from Alex, both Alex and Bob need to call the startCall() method. Alex in the onOutgoingCallAccepted() method of the CallListener and Bob in the success obtained from the **acceptCall()** method and both will be connected to each other.

Initiate Call

The initiateCall() method sends a call request to a user or a group.

JavaScript (User Call)
JavaScript (Group Call)
Typescript (User Call)
Typescript (Group Call)

var receiverID = "UID";
var callType = CometChat.CALL_TYPE.VIDEO;
var receiverType = CometChat.RECEIVER_TYPE.USER;

var call = new CometChat.Call(receiverID, callType, receiverType);

CometChat.initiateCall(call).then(
  outGoingCall => {
    console.log("Call initiated successfully:", outGoingCall);
    // perform action on success. Like show your calling screen.
  },
  error => {
    console.log("Call initialization failed with exception:", error);
  }
);

var receiverID = "GUID";
var callType = CometChat.CALL_TYPE.VIDEO;
var receiverType = CometChat.RECEIVER_TYPE.GROUP;

var call = new CometChat.Call(receiverID, callType, receiverType);

CometChat.initiateCall(call).then(
  outGoingCall => {
    console.log("Call initiated successfully:", outGoingCall);
    // perform action on success. Like show your calling screen.
  },
  error => {
    console.log("Call initialization failed with exception:", error);
  }
);

var receiverID: string = "UID";
var callType: string = CometChat.CALL_TYPE.VIDEO;
var receiverType: string = CometChat.RECEIVER_TYPE.USER;

var call: CometChat.Call = new CometChat.Call(receiverID, callType, receiverType);

CometChat.initiateCall(call).then(
    (outGoingCall: CometChat.Call) => {
        console.log("Call initiated successfully:", outGoingCall);
    }, (error: CometChat.CometChatException) => {
        console.log("Call initialization failed with exception:", error);
    }
);

var receiverID: string = "GUID";
var callType: string = CometChat.CALL_TYPE.VIDEO;
var receiverType: string = CometChat.RECEIVER_TYPE.GROUP;

var call: CometChat.Call = new CometChat.Call(receiverID, callType, receiverType);

CometChat.initiateCall(call).then(
    (outGoingCall: CometChat.Call) => {
        console.log("Call initiated successfully:", outGoingCall);
    }, (error: CometChat.CometChatException) => {
        console.log("Call initialization failed with exception:", error);
    }
);

This method takes an object of the Call class. The constructor for Call class takes the following parameters:

Parameter	Description
`receiverID`	The UID or GUID of the recipient
`receiverType`	The type of the receiver can be, 1.`CometChat.RECEIVER_TYPE.USER` 2.`CometChat.RECEIVER_TYPE.GROUP`
`callType`	The type of call can be, 1.`CometChat.CALL_TYPE.AUDIO` 2.`CometChat.CALL_TYPE.VIDEO`

On successful initialization, a Call object is returned with the details of the call including a unique session ID for the call.

Receive Calls

Wherever you wish to receive the call events in, you need to register the CallListener listener using the addCallListener() method.

JavaScript
TypeScript

var listnerID = "UNIQUE_LISTENER_ID";
CometChat.addCallListener(
  listnerID,
  new CometChat.CallListener({
    onIncomingCallReceived: (call) => {
      console.log("Incoming call:", call);
      // Handle incoming call
    },
    onOutgoingCallAccepted: (call) => {
      console.log("Outgoing call accepted:", call);
      // Outgoing Call Accepted
    },
    onOutgoingCallRejected: (call) => {
      console.log("Outgoing call rejected:", call);
      // Outgoing Call Rejected
    },
    onIncomingCallCancelled: (call) => {
      console.log("Incoming call calcelled:", call);
    }
  })
);

var listnerID: string = "UNIQUE_LISTENER_ID";
CometChat.addCallListener(
    listnerID,
    new CometChat.CallListener({
        onIncomingCallReceived: (call: CometChat.Call) => {
            console.log("Incoming call:", call);
        },
        onOutgoingCallAccepted: (call: CometChat.Call) => {
            console.log("Outgoing call accepted:", call);
        },
        onOutgoingCallRejected: (call: CometChat.Call) => {
            console.log("Outgoing call rejected:", call);
        },
        onIncomingCallCancelled: (call: CometChat.Call) => {
            console.log("Incoming call calcelled:", call);
        }
    })
);

Parametrer	Description
`listenerID`	An ID that uniquely identifies that listener. We recommend using the activity or fragment name

We recommend you remove the listener once the activity or fragment is not in use.

JavaScript
TypeScript

var listenerID = "UNIQUE_LISTENER_ID";

CometChat.removeCallListener(listenerID);

var listenerID: string = "UNIQUE_LISTENER_ID";

CometChat.removeCallListener(listenerID);

As mentioned in the Overview section, Once the call is initiated, there are three options that can be possible:

The receiver of the call accepts the call.
The receiver of the call rejects the call.
The initiator of the call cancels the call.

Please find below how these three scenarios can be implemented:

Accept the Incoming Call

Once you have received an incoming call from a user or in any group, to accept the call using the acceptCall() method.

JavaScript
TypeScript

var sessionID = "SESSION_ID";

CometChat.acceptCall(sessionID).then(
  call => {
    console.log("Call accepted successfully:", call);
    // start the call using the startCall() method
  },
  error => {
    console.log("Call acceptance failed with error", error);
    // handle exception
  }
);

var sessionID: string = "SESSION_ID";

CometChat.acceptCall(sessionID).then(
    (call: CometChat.Call) => {
        console.log("Call accepted successfully:", call);
    }, (error: CometChat.CometChatException) => {
        console.log("Call acceptance failed with error", error);
    }
);

Parameter	Description
`sessionID`	The unique session ID available in the `Call` object

Reject the Incoming Call

To reject the incoming call once it is received using the rejectCall() method.

JavaScript
TypeScript

var sessionID = "SESSION_ID";
var status = CometChat.CALL_STATUS.REJECTED;

CometChat.rejectCall(sessionID, status).then(
  call => {
    console.log("Call rejected successfully", call);
  },
  error => {
    console.log("Call rejection failed with error:", error);
  }
);

var sessionID: string = "SESSION_ID";
var status: string = CometChat.CALL_STATUS.REJECTED;

CometChat.rejectCall(sessionID, status).then(
    (call: CometChat.Call) => {
        console.log("Call rejected successfully", call);
    }, (error: CometChat.CometChatException) => {
        console.log("Call rejection failed with error:", error);
    }
);

Parameter	Description
`sessionID`	The unique session ID available in the `Call` object
`status`	Reason for rejection of the call

Here the status needs to be set as CometChat.CALL_STATUS.REJECTED as the call is being rejected by the receiver of the call.

Cancel the Outgoing Call

In the case where the initiator wishes to cancel the call, use the same above rejectCall() method and just pass the status to the rejectCall() method as CometChat.CALL_STATUS.CANCELLED

Start a Call

Once the call request is sent and the receiver has accepted the call, both the initiator and the receiver need to call the startCall() method. You need to call this method for two scenarios:

After you accept an incoming call i.e. in the onSuccess() callback of the acceptCall() method.
After the recipient accepts an outgoing call i.e. in the onOutgoingCallAccepted() callback of the CallListener listener.

JavaScript
TypeScript

/**
		* You can get the call Object from the success of acceptCall() or from the onOutgoingCallAccepted() callback of the CallListener.
		*/

let sessionId = call.sessionId;
let audioOnly = false;
let deafaultLayout = true;

let callListener = new CometChat.OngoingCallListener({
    onUserJoined: user => {
        console.log('User joined call:', user);
    },
    onUserLeft: user => {
        console.log('User left call:', user);
    },
    onUserListUpdated: userList => {
			console.log("user list:", userList);
    },
  	onAudioModesUpdated: (audioModes) => {
        console.log("audio modes:", audioModes);
    },
    onCallEnded: call => {
        console.log('Call ended listener', call);
    },
    onError: error => {
        console.log('Call Error: ', error);
    },
  	onCallSwitchedToVideo: (sessionId, callSwitchInitiatedBy, callSwitchAcceptedBy) => {
        console.log("call switched to video:", {sessionId, callSwitchInitiatedBy, callSwitchAcceptedBy});
    },
  	onUserMuted: (userMuted, userMutedBy) => {
    	console.log("user muted:", {userMuted, userMutedBy});
    }
});

let callSettings = new CometChat.CallSettingsBuilder()
									.setSessionID(sessionId)
									.enableDefaultLayout(deafaultLayout)
									.setIsAudioOnlyCall(audioOnly)
                  .setCallEventListener(callListener)
									.build();


render(){
   return(
      <View style={{height: '100%', width: '100%', position: 'relative'}}>
          <CometChat.CallingComponent callsettings= {callSettings} />
       </View>
   );
}

/**
		* You can get the call Object from the success of acceptCall() or from the onOutgoingCallAccepted() callback of the CallListener.
		*/

let sessionID: string = call.sessionId;
let audioOnly: boolean = false;
let deafaultLayout: boolean = true;

let callListener = new CometChat.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:", userList);
    },
    onAudioModesUpdated: (audioModes: CometChat.AudioMode[]) => {
        console.log("audio modes:", audioModes);
    },
    onCallEnded: (call: CometChat.Call) => {
        console.log("Call ended:", call);
    },
    onError: (error: CometChat.CometChatException) => {
        console.log('Call Error: ', error);
    }
});

let callSettings = new CometChat.CallSettingsBuilder()
    .enableDefaultLayout(deafaultLayout)
    .setSessionID(sessionID)
    .setIsAudioOnlyCall(audioOnly)
    .setCallEventListener(callListener)
    .build();

render(){
   return(
      <View style={{height: '100%', width: '100%', position: 'relative'}}>
          <CometChat.CallingComponent callsettings= {callSettings} />
       </View>
   );
}

Parameter	Description
`callSettings`	Object of CallSettings class.
`OngoingCallListener`	CometChat.OngoingCallListener where the real-time events will be received.

The OngoingCallListener listener provides you with the below callback methods:

Callback Method	Description
`onUserJoined(User user)`	This method is called when any other user joins the call. The user details can be obtained from the `User` object provided.
`onUserLeft(User user)`	This method is called when a user leaves the call. The details of the user can be obtained from the provided `User` object.
`onError()`	This method is called when there is some error in establishing the call.
`onCallEnded()`	This method is called when the call is successfully ended. The call details can be obtained from the `Call` object provided.
`onUserListUpdated(userList)`	This method is triggered every time a participant joins or leaves the call providing the list of users active in the call.
`onAudioModesUpdated(audioModes)`	This callback is triggered if any new audio output source is available or becomes unavailable.
`onCallSwitchedToVideo(sessionId, callSwitchInitiatedBy, callSwitchAcceptedBy)`	This callback is triggered when an audio call is converted into a video call.
`onUserMuted(userMuted, userMutedBy)`	This callback is triggered when a user is muted in the call.

Settings

The CallSettings class is the most important class when it comes to the implementation of the Calling feature. This is the class that allows you to customize the overall calling experience. The properties for the call/conference can be set using the CallSettingsBuilder class. This will eventually give you an object of the CallSettings class which you can pass to the startCall() method to start the call. The mandatory parameters that are required to be present for any call/conference to work are:

sessionId - The unique session Id for the call/conference session.

The options available for customization of calls are:

Setting	Description
`enableDefaultLayout(defaultLayout: boolean)`	If set to `true` enables the default layout for handling the call operations. If set to `false` it hides the button layout and just displays the Call View. Default value = true
`showEndCallButton(showEndCallButton: boolean)`	If set to `true` it displays the EndCallButton in Button Layout. if set to `false` it hides the EndCallButton in Button Layout. Default value = true
`showPauseVideoButton(showPauseVideoButton: boolean)`	If set to `true` it displays the PauseVideoButton in Button Layout. if set to `false` it hides the PauseVideoButton in Button Layout. Default value = true
`showMuteAudioButton(showMuteAudioButton: boolean)`	If set to `true` it displays the MuteAudioButton in Button Layout. if set to `false` it hides the MuteAudioButton in Button Layout. Default value = true
`showSwitchCameraButton(showSwitchCameraButton: boolean)`	If set to `true` it displays the SwitchCameraButton in Button Layout. if set to `false` it hides the SwitchCameraButton in Button Layout. Default value = true
`showAudioModeButton(showAudioModeButton: boolean)`	If set to `true` it displays the AudioModeButton in Button Layout. if set to `false` it hides the AudioModeButton in Button Layout. Default value = true
`setIsAudioOnlyCall(audioOnly: boolean)`	If set to true, the call will be strictly an audio call. If ser to false, the call will be an audio-video call. Default value = false
`setMode(mode: string)`	CometChat provides 3 options for the calling UI. 1. CometChat.CALL_MODE.DEFAULT 2. CometChat.CALL_MODE.SPOTLIGHT 3. CometChat.CALL_MODE.SINGLE Default value = CometChat.CALL_MODE.DEFAULT
`startWithAudioMuted(audioMuted: boolean)`	This ensures the call is started with the audio muted if set to true. Default value = false
`startWithVideoMuted(videoMuted: boolean)`	This ensures the call is started with the video paused if set to true. Default value = false
`setDefaultAudioMode(audioMode: string)`	This method can be used if you wish to start the call with a specific audio mode. The available options are 1. CometChat.AUDIO_MODE.SPEAKER = “SPEAKER” 2. CometChat.AUDIO_MODE.EARPIECE = “EARPIECE” 3. CometChat.AUDIO_MODE.BLUETOOTH = “BLUETOOTH” 4. CometChat.AUDIO_MODE.HEADPHONES = “HEADPHONES”
`showSwitchToVideoCallButton(switchCall: boolean)`	This method shows/hides the switch to video call button. If set to true it will display the switch to video call button. If set to false it will hide the switch to video call button. Default value = true
`setAvatarMode(avatarMode: string)`	This method sets the mode of avatar. The avatar mode can be `circle`, `square` or `fullscreen`. Default value = circle
`setMainVideoContainerSetting(containerSettings: MainVideoContainerSetting)`	This method can be used to customize the main video container. You can read more about this here.
`enableVideoTileClick(enableVideoTileClick: boolean)`	This method can be used to enable/disable video tile click functionality in Spotlight mode. Default value = true
`enableVideoTileDrag(enableVideoTileDrag: boolean)`	This method can be used to enable/disable video tile drag functionality in Spotlight mode. Default value = true

In case you wish to achieve a completely customised UI for the Calling experience, you can do so by embedding default android buttons to the screen as per your requirement and then use the below methods to achieve different functionalities for the embedded buttons. For the use case where you wish to align your own custom buttons and not use the default layout provided by the SDK you can embed the buttons in your layout and use the below methods to perform the corresponding operations:

Switch Camera

You can call the switchCamera() Method to toggle between camera sources.

JavaScript
TypeScript

let callController = CometChat.CallController.getInstance();
callController.switchCamera();

let callController: CometChat.CallController = CometChat.CallController.getInstance();
callController.switchCamera();

Mute Audio

You can call muteAudio(mute: boolean) Method to mute your Audio Stream to the end-user.

JavaScript
TypeScript

let callController = CometChat.CallController.getInstance();
callController.muteAudio(true);

let callController: CometChat.CallController = CometChat.CallController.getInstance();
callController.muteAudio(true);

if set to true the Audio Stream is muted and if set to false Audio Stream is transmitted.

Pause Video

You can call pauseVideo(pause: boolean) Method to pause Video Stream to the end-user.

JavaScript
TypeScript

let callController = CometChat.CallController.getInstance();
callController.pauseVideo(true);

let callController: CometChat.CallController = CometChat.CallController.getInstance();
callController.pauseVideo(true);

if set to true the Video Stream is muted and if set to false Video Stream is transmitted.

Set Audio Mode

You can call the setAudioMode(mode: string) to set the output of the audio stream.

JavaScript
TypeScript

let callController = CometChat.CallController.getInstance();
let earPieceMode = CometChat.AUDIO_MODE.EARPIECE;
callController.setAudioMode(earPieceMode);

let callController: CometChat.CallController = CometChat.CallController.getInstance();
let earPieceMode: string = CometChat.AUDIO_MODE.EARPIECE;
callController.setAudioMode(earPieceMode);

The audio mode string can have either one of the below 4 values:

CometChat.AUDIO_MODE.SPEAKER = “SPEAKER”
CometChat.AUDIO_MODE.EARPIECE = “EARPIECE”
CometChat.AUDIO_MODE.BLUETOOTH = “BLUETOOTH”
CometChat.AUDIO_MODE.HEADPHONES= “HEADPHONES”

Switch To Video Call

You can use the switchToVideoCall() method to switch from audio call to video call.

JavaScript
TypeScript

let callController = CometChat.CallController.getInstance();
callController.switchToVideoCall();

let callController: CometChat.CallController = CometChat.CallController.getInstance();
callController.switchToVideoCall();

End Call

You can use the CometChat.endCall() method of the CometChat class to end the call.

JavaScript
TypeScript

CometChat.endCall("SESSION_ID_FOR_THE_CALL").then(
	call => {
		console.log('call ended', call);
	}, error => {
		console.log('error', error);
	}
);

let sessionId: string = "SESSION_ID_FOR_THE_CALL"
CometChat.endCall(sessionId).then(
    (call: CometChat.Call) => {
        console.log('call ended', call);
    }, (error: CometChat.CometChatException) => {
        console.log('error', error);
    }
);

Get the list of available audio modes

This method will return the list of available audio modes. Based on the list received, you can set the audio mode for the ongoing call using the setAudioMode() method.

JavaScript
TypeScript

let callController = CometChat.CallController.getInstance();
callController.getAudioOutputModes().then(
    modes => {
      console.log('getAudioOutputModes :: modes', modes);
    }, error => {
      console.log('getAudioOutputModes :: error', error);
    }
);

let callController: CometChat.CallController = CometChat.CallController.getInstance();

callController.getAudioOutputModes().then(
    (modes: CometChat.AudioMode[]) => {
      console.log('getAudioOutputModes :: modes', modes);
    }, (error: CometChat.CometChatException) => {
      console.log('getAudioOutputModes :: error', error);
    }
);

The AudioMode class has the below properties:

mode - The mode can be either one of the below values:

CometChat.AUDIO_MODE.SPEAKER = “SPEAKER”
CometChat.AUDIO_MODE.EARPIECE = “EARPIECE”
CometChat.AUDIO_MODE.BLUETOOTH = “BLUETOOTH”
CometChat.AUDIO_MODE.HEADPHONES= “HEADPHONES”

isSelected - This is a boolean value that indicates if the audio mode is the active mode.

Active Call

CometChat SDK provides a method to get the details of the call that is currently active. The CometChat.getActiveCall() will return an object of the Call class containing the details of the ongoing call. If there is no ongoing call this method will return null.

JavaScript
TypeScript

let activeCall = CometChat.getActiveCall();

let activeCall: CometChat.Call = CometChat.getActiveCall();

The getActiveCall() method will only return the details of the active call for the ongoing session in which the call has been started. If the app is restarted, the data will be lost.

Call Participant Count

In order to get the number of participants in any call, you can use the getCallParticipantCount() method. This method takes the session id for the call and returns the number of participants that are active in the call.

JavaScript
TypeScript

let sessionId = "CALL_SESSION_ID";
let callType = "DEFAULT";

CometChat.getCallParticipantCount(sessionId, callType).then(
	count => {
		console.log("Participants count =", count);
	}, error => {
		console.log("Some error occurred =", error);
	}
);

let sessionId: string = "CALL_SESSION_ID";
let callType: string = "DIRECT";

CometChat.getCallParticipantCount(sessionId, callType).then(
    (count: number) => {
        console.log("Participants count =", count);
    }, (error: CometChat.CometChatException) => {
        console.log("Some error occurred =", error);
    }
);

​Initiate Call

​Receive Calls

​Accept the Incoming Call

​Reject the Incoming Call

​Cancel the Outgoing Call

​Start a Call

​Settings

​Switch Camera

​Mute Audio

​Pause Video

​Set Audio Mode

​Switch To Video Call

​End Call

​Get the list of available audio modes

​Active Call

​Call Participant Count

Initiate Call

Receive Calls

Accept the Incoming Call

Reject the Incoming Call

Cancel the Outgoing Call

Start a Call

Settings

Switch Camera

Mute Audio

Pause Video

Set Audio Mode

Switch To Video Call

End Call

Get the list of available audio modes

Active Call

Call Participant Count