Direct Calling - CometChat Docs

This section will guide you to start the call/conference directly with the session id of your choice. The session id is the most important parameter as all the users joining the same session id will be connected to the same call/conference.

Implementation

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 parameter is the sessionId for the call/conference. You can use the setSessionId() method of the CallSettingsBuilder to set the session Id of the call. A basic example of how to start a direct call:

JavaScript
TypeScript

let sessionID = "SESSION_ID";
let audioOnly = false;
let defaultLayout = true;

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

CometChat.startCall(
callSettings,
document.getElementById("callScreen"),
new CometChat.OngoingCallListener({
  	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 setAudioOnlyCall() 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.

Parameter	Description
`callSettings`	Object of CallSettings Class.
`callScreen`	DOM element where you want to show the call UI.
`OngoingCallListener`	CometChat.OngoingCallListener where the real-time events will be received.

The OngoingCallListener 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.
`onCallSwitchedToVideo(sessionId, callSwitchInitiatedBy, callSwitchAcceptedBy)`	This callback is triggered when an audio call is converted into a video 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
`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 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(legacyUI: 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 | | 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.

Mute Audio
TypeScript

let callController = CometChat.CallController.getInstance();
callController.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.

Pause Video
TypeScript

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

If set to true the video stream will be paused and if set to false the video stream will be unpaused. You can call startScreenShare() to start the screen share. You can call stopScreenShare() to stop the screen share.

Set Mode

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

Set Mode
TypeScript

let mode = CometChat.CALL_MODE.SPOTLIGHT;
let callController = CometChat.CallController.getInstance();
callController.setMode(mode);

Get Audio Input Devices

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

Get Audio Input Devices
TypeScript

let callController = CometChat.CallController.getInstance();
let audioInputDevices = callController.getAudioInputDevices();

Get Audio Output Devices

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

Get Audio Output Devices
TypeScript

let callController = CometChat.CallController.getInstance();
let audioOutputDevices = callController.getAudioOutputDevices();

Get Video Input Devices

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

Get Video Input Devices
TypeScript

let callController = CometChat.CallController.getInstance();
let videoInputDevices = callController.getVideoInputDevices();

Set Audio Input Device

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

Set Audio Input Devices
TypeScript

let callController = CometChat.CallController.getInstance();
callController.setAudioInputDevice(deviceId);

Set Audio Output Device

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

Set Audio Output Devices
TypeScript

let callController = CometChat.CallController.getInstance();
callController.setAudioOutputDevice(deviceId);

Set Video Input Device

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

Set Video Input Devices
TypeScript

let callController = CometChat.CallController.getInstance();
callController.setVideoInputDevice(deviceId);

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();

End Call

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

End Call
TypeScript

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

The CometChat.getActiveCall() method in case of Direct Calling will return null and all the details related to the call session will have to be saved and maintained at your end.

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 or participants that are active in the call

Call Participant Count
TypeScript

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

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

​Implementation

​Settings

​Mute Audio

​Pause Video

​Start Screen Share

​Stop Screen Share

​Set Mode

​Get Audio Input Devices

​Get Audio Output Devices

​Get Video Input Devices

​Set Audio Input Device

​Set Audio Output Device

​Set Video Input Device

​Switch To Video Call

​End Call

​Call Participant Count

Implementation

Settings

Mute Audio

Pause Video

Start Screen Share

Stop Screen Share

Set Mode

Get Audio Input Devices

Get Audio Output Devices

Get Video Input Devices

Set Audio Input Device

Set Audio Output Device

Set Video Input Device

Switch To Video Call

End Call

Call Participant Count