Direct Calling - CometChat Docs

Overview

This guide demonstrates how to start call in to React Native. 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.

JavaScript
TypeScript

let loggedInUser = await CometChat.getLoggedinUser();
let authToken = loggedInUser.getAuthToken();
let sessionID = "SESSION_ID_HERE";

CometChatCalls.generateToken(authToken, sessionID).then(
    res => {
        console.log("Call token fetched: ", res.token);
    },
    err => {
        console.log("Generating call token failed with error: ", err);
    },
);

let loggedInUser = await CometChat.getLoggedinUser();
let authToken = loggedInUser.getAuthToken();
let sessionID = "SESSION_ID_HERE";

CometChatCalls.generateToken(authToken, sessionID).then(
    res => {
        console.log("Call token fetched: ", res.token);
    },
    err => {
        console.log("Generating call token failed with error: ", err);
    },
);

Parameter	Description
sessionID	The unique random session ID. In case you are using default call then session ID is available in the `Call` object.
authToken	The use auth token is logged in user auth tooken which you can get by calling CometChat Chat SDK method CometChat.getLoggedinUser()

Error Code	Error Message
INVALID_ARGUMENT_EXCEPTION	If 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:

callToken: The unique token for the call/conference session.
callSettings: The object of CallSettings class.

These parameters are to be passed as props to CometChatCalls.Component .

JavaScript
TypeScript

const audioOnly = false;
const deafaultLayout = true;

const callListener = new CometChatCalls.OngoingCallListener({
    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);
    },
    onCallSwitchedToVideo: (event) => {
        console.log("call switched to video:", event);
    },
    onUserMuted: (event) => {
        console.log("user muted:", event);
    }
});

const callSettings = new CometChatCalls.CallSettingsBuilder()
    .enableDefaultLayout(deafaultLayout)
    .setIsAudioOnlyCall(audioOnly)
    .setCallEventListener(callListener)
    .build();

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

const audioOnly = false;
const deafaultLayout = true;

const callListener = new CometChatCalls.OngoingCallListener({
    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);
    },
    onCallSwitchedToVideo: (event) => {
        console.log("call switched to video:", event);
    },
    onUserMuted: (event) => {
        console.log("user muted:", event);
    }
});

const callSettings = new CometChatCalls.CallSettingsBuilder()
    .enableDefaultLayout(deafaultLayout)
    .setIsAudioOnlyCall(audioOnly)
    .setCallEventListener(callListener)
    .build();

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

Parameter	Description
`callToken`	Received in generate token `onSuccess()` method response
`callSettings`	Object of `CallSettings` class.

Error Code	Error Message
INVALID_PROP_EXCEPTION	If you pass an invalid prop to a functional component or you don’t pass the required prop. example: Component requires valid call settings
API_ERROR	If there is some error thrown by the API server For example unauthorized
UNKNOWN_API_ERROR	If there is some API error but it didn’t come from the server. For example, if the internet is not available and API is called.
AUTH_ERR_TOKEN_INVALID_SIGNATURE	if Token is invalid

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(user)`	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.

Listeners

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)

JavaScript
TypeScript

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);
      },
      onCallSwitchedToVideo: (event) => {
          console.log("call switched to video:", event);
      },
      onUserMuted: (event) => {
          console.log("user muted:", event);
      }
	});
	return ()=> CometChatCalls.removeCallEventListener('UNIQUE_ID')
}, [])

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);
      },
      onCallSwitchedToVideo: (event) => {
          console.log("call switched to video:", event);
      },
      onUserMuted: (event) => {
          console.log("user muted:", event);
      }
	});
	return ()=> CometChatCalls.removeCallEventListener('UNIQUE_ID')
}, [])

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

CometChatCalls.switchCamera();

CometChatCalls.switchCamera();

Mute Audio

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

JavaScript
TypeScript

CometChatCalls.muteAudio(true);

CometChatCalls.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

CometChatCalls.pauseVideo(true);

CometChatCalls.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

CometChatCalls.setAudioMode(earPieceMode);

CometChatCalls.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

CometChatCalls.switchToVideoCall();

CometChatCalls.switchToVideoCall();

End Call

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

JavaScript
TypeScript

CometChatCalls.endCall();

CometChatCalls.endCall();

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

CometChatCalls.getAudioOutputModes().then(
    modes => {
      console.log('getAudioOutputModes :: modes', modes);
    }, error => {
      console.log('getAudioOutputModes :: error', error);
    }
);

CometChatCalls.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.

​Overview

​Generate Call Token

​Start Call Session

​Listeners

​Settings

​Switch Camera

​Mute Audio

​Pause Video

​Set Audio Mode

​Switch To Video Call

​End Call

​Get the list of available audio modes