This section will provide information on how a complete calling workflow can be set up using CometChat. 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:
Accept the call from Alex using the acceptCall() method.
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.
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
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.
Report incorrect code
Copy
Ask AI
/*** You can get the call Object from the success of acceptCall() or from the onOutgoingCallAccepted() callback of the CallListener.*/var sessionId = call.sessionId;var callType = call.type;var callSettings = new CometChat.CallSettingsBuilder() .setSessionID(sessionId) .enableDefaultLayout(true) .setIsAudioOnlyCall(callType == 'audio' ? true : false) .build();CometChat.startCall(callSettings,document.getElementById("callScreen"),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); }, onCallEnded: call => { console.log("Call ended:", call); }, onError: error => { console.log("Error :", error); }, onMediaDeviceListUpdated: deviceList => { console.log("Device List:", deviceList); }, onUserMuted: (userMuted, userMutedBy) => { // This event will work in JS SDK v3.0.2-beta1 & later. console.log("Listener => onUserMuted:", userMuted, userMutedBy); }, onScreenShareStarted: () => { // This event will work in JS SDK v3.0.3 & later. console.log("Screen sharing started."); }, onScreenShareStopped: () => { // This event will work in JS SDK v3.0.3 & later. console.log("Screen sharing stopped."); }, onCallSwitchedToVideo: (sessionId, callSwitchInitiatedBy, callSwitchAcceptedBy) => { // This event will work in JS SDK v3.0.8 & later. console.log("call switched to video:", {sessionId, callSwitchInitiatedBy, callSwitchAcceptedBy}); }}));
The current startCall() method which takes the sessionId, view, Ongoing Call Listener to load the call view is deprecated and will be replaced in the future versions. It will continue to work on this version but we suggest moving to the new method as shown above using the object of the CallSettings class as the parameter.
Parameter
Description
callSettings
Object of CallSettings class.
callScreen
DOM element where you want show the call UI.
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)
This method is called when any other user joins the call. The user details can be obtained from the User object provided.
onUserLeft(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.
onMediaDeviceListUpdated(deviceList)
This method is triggered if any new audio output source is available or becomes unavailable.
onUserMuted(userMuted, userMutedBy)
This method is triggered when a user is muted in the ongoing call.
onScreenShareStarted()
This method is triggered when the local user starts sharing a screen.
onScreenShareStopped()
This method is triggered when the local user stops sharing a screen.
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
If set to true it displays the ShareScreenButton in Button Layout. if set to false it hides the ShareScreenButton in Button Layout. Default value = true
showModeButton(showModeButton: boolean)
If set to true it displays the ShowModeButton in Button Layout. if set to false it hides the ShowModeButton 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 4 options for the calling UI. 1. CometChat.CALL_MODE.DEFAULT 2. CometChat.CALL_MODE.SPOTLIGHT 3. CometChat.CALL_MODE.SINGLE 4. CometChat.CALL_MODE.GRID 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
setCustomCSS(customCSS: string)
This will apply the given CSS on the Calling UI. For example: let customCSS = “.main-container{border: 1px solid yellow}”; setCustomCSS(customCSS) You can read more about custom CSS here.
forceLegacyUI(useLegacyUI: boolean)
This ensures that the legacy UI is used. ** ** Default value = true
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
This method can be used to customize the main video container. You can read more about this here.
In case you wish to achieve a completely customized 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 CometChat, you can embed the buttons in your layout and use the below methods to perform the corresponding operations:
CometChat 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.
Report incorrect code
Copy
Ask AI
let activeCall = 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.
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.