Skip to main content
Version: v4

Direct Call

Overview​

This guide demonstrates how to start call in to an web. Before you begin, we strongly recommend you read the calling setup guide.

Generate Call Token​

Prior to starting the call session, it is necessary to have a call token. A call token can be generated using the generateToken method of CometChatCalls class.

const loggedInUser = await CometChat.getLoggedinUser();
if (loggedInUser) {
  const authToken = loggedInUser.getAuthToken();
  const sessionID = "SESSION_ID_HERE";

  CometChatCalls.generateToken(sessionID, authToken).then(
    (res) => {
      console.log("Call token fetched: ", res.token);
    },
    (err) => {
      console.log("Generating call token failed with error: ", err);
    }
  );
}
ParameterDescription
sessionIDA unique random session ID. In case you are using default call then session ID is available in the Call object.
authTokenThe user auth token is logged in user auth token which you can get by calling CometChat's Chat SDK method CometChat.getLoggedinUser()

Error CodeError Message
INVALID_ARGUMENT_EXCEPTIONIf you pass invalid param to a function or you don't pass the required params. example: Authtoken and session are required, Invalid callToken passed, please verify.

On success of generateToken method you will get the response object containing call token with key named token.

Start Call Session​

The most important class that will be used in the implementation is the CallSettings class. This class allows you to set the various parameters for the call/conference. In order to set the various parameters of the CallSettings class, you need to use the CallSettingsBuilder class. Below are the various options available with the CallSettings class.

The mandatory parameters that are required to be present for any call/conference to work are:

  1. callToken: The unique token for the call/conference session.
  2. callSettings: The object of CallSettings class.
  3. htmlElement: A unique DOM element inside which call UI will be loaded.

A basic example of how to start a call session:

const defaultLayout = true;
const audioOnly = false;

const callSettings = new CometChatCalls.CallSettingsBuilder()
  .enableDefaultLayout(defaultLayout)
  .setIsAudioOnlyCall(audioOnly)
  .setCallListener(
    new CometChatCalls.OngoingCallListener({
      onUserListUpdated: (userList) => {
        console.log("user list:", userList);
      },
      onCallEnded: () => {
        console.log("Call ended");
      },
      onError: (error) => {
        console.log("Error :", error);
      },
      onMediaDeviceListUpdated: (deviceList) => {
        console.log("Device List:", deviceList);
      },
      onUserMuted: (event) => {
        // This event will work in JS SDK v3.0.2-beta1 & later.
        console.log("Listener => onUserMuted:", {
          userMuted: event.muted,
          userMutedBy: event.mutedBy,
        });
      },
      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: (event) => {
        // This event will work in JS SDK v3.0.8 & later.
        console.log("call switched to video:", {
          sessionId: event.sessionId,
          callSwitchInitiatedBy: event.initiator,
          callSwitchAcceptedBy: event.responder,
        });
      },
      onUserJoined: (user) => console.log("event => onUserJoined", user),
      onUserLeft: (user) => console.log("event => onUserLeft", user),
    })
  )
  .build();

const htmlElement = document.getElementById("ELEMENT_ID");
CometChatCalls.startSession(callToken, callSettings, htmlElement);

The setIsAudioOnlyCall() method allows you to set if the call is supposed to be an audio call or an audio-video call. If set to true, the call will be an audio-only call else when set to false the call will be an audio-video call. The default is false, so if not set, the call will be an audio-video call.

ParameterDescription
callTokenAn authorization token used to start the call session, received by calling generateToken method of CometChatCalls class.
callSettingsObject of CallSettings class.
htmlElementDOM element inside which the call UI wll be rendered.

Error CodeError Messages
INVALID_PROP_EXCEPTIONif you pass an invalid prop to a functional component or you don't pass the required prop. example: Component requires valid call settings
API_ERRORIf there is some error thrown by the API server For example unauthorized
UNKNOWN_API_ERRORIf there is some API error but it didn't come from the server. For example if internet is not available and API is called.
AUTH_ERR_TOKEN_INVALID_SIGNATUREif Token is invalid

The OngoingCallListener listener provides you with the below callback methods:

Callback MethodDescription
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(event)This method is triggered when a user is muted in the ongoing call. The event object contains two keys named muted and mutedBy
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.
onCallSwitchedToVideo(event)This callback is triggered when an audio call is converted into a video call. The event object contains three keys named sessionId , initiator and responder

Listener​

Listeners can be added in two ways the first one is to use .setCallEventListener(listeners : OngoingCallListener) method in CallSettingsBuilder or PresenterSettingsBuilder class. The second way is to use CometChatCalls.addCallEventListener(name: string, callListener: OngoingCallListener) by this you can add multiple listeners and remove the specific listener by their name CometChatCalls.removeCallEventListener(name: string)

useEffect(() => {
  CometChatCalls.addCallEventListener("UNIQUE_ID", {
    onUserJoined: (user) => {
      console.log("user joined:", user);
    },
    onUserLeft: (user) => {
      console.log("user left:", user);
    },
    onUserListUpdated: (userList) => {
      console.log("user list:", 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:", audioModes);
    },
    onUserMuted: (event) => {
      console.log("user muted:", event);
    },
  });
  return () => CometChatCalls.removeCallEventListener("UNIQUE_ID");
}, []);

End Call Session​

To release the acquired calling resource and end the call, the end call session must be called.

For Default Call

info

You only need to call the end call method of the chat SDK for default calling flows. Direct calling flows do not require it.

To end a call in the default call flow, you must call the CometChat.endCall() method, which belongs to the CometChat Chat SDK, and the CometChatCalls.endSession() method, which belongs to the CometChat Calls SDK.

The user who pressed the end call button will call the CometChat.endCall() method, and the another user how was on call will call the two methods which is CometChat.clearActiveCall() and CometChatCalls.endSession() methods to release the calling resources


Image

The user who ended the call

CometChat.endCall();

The another user who was on call

CometChat.clearActiveCall();
CometChatCalls.endSession();

For Direct Call​

CometChatCalls.endSession();

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 customise 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 startSession() method to start the call.

The options available for customisation of calls are:

SettingDescription
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
showScreenShareButton(showScreenShareButton: boolean)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 set to false, the call will be an audio-video call.
Default value = false
setMode(mode: string)CometChat provides 2 options for the calling UI.
1. CometChat.CALL_MODE.DEFAULT
2. CometChat.CALL_MODE.SPOTLIGHT
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
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
setMainVideoContainerSetting(containerSettings: MainVideoContainerSetting)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:

Mute Audio​

You can call the muteAudio(mute: boolean) method to mute/unmute your audio stream.

CometChatCalls.muteAudio(true);

If set to true the audio stream will be muted and if set to false the audio stream will be unmuted.

Pause Video​

You can call the pauseVideo(pause: boolean) method to pause/unpause video stream.

CometChatCalls.pauseVideo(true);

If set to true the video stream will be paused and if set to false the video stream will be unpaused.

Start Screen Share​

You can call startScreenShare() to start the screen share.

CometChatCalls.startScreenShare();

Stop Screen Share​

You can call stopScreenShare() to stop the screen share.

CometChatCalls.stopScreenShare();

Set Mode​

You can use the setMode(mode: string) method to set the mode.

let mode = CometChat.CALL_MODE.SPOTLIGHT;
CometChatCalls.setMode(mode);

Get Audio Input Devices​

You can use the getAudioInputDevices() method to get all the available audio input devices.

let audioInputDevices = CometChatCalls.getAudioInputDevices();

Get Audio Output Devices​

You can use the getAudioOutputDevices() method to get all the available audio output devices.

let audioOutputDevices = CometChatCalls.getAudioOutputDevices();

Get Video Input Devices​

You can use the getVideoInputDevices() method to get all the available video input devices.

let videoInputDevices = CometChatCalls.getVideoInputDevices();

Set Audio Input Device​

You can use the setAudioInputDevice(deviceId) method to set the active audio input device.

CometChatCalls.setAudioInputDevice(deviceId);

Set Audio Output Device​

You can use the setAudioOutputDevice(deviceId) method to set the active audio output device.

CometChatCalls.setAudioOutputDevice(deviceId);

Set Video Input Device​

You can use the setVideoInputDevice(deviceId) method to set the active video input device.

CometChatCalls.setVideoInputDevice(deviceId);

Switch To Video Call​

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