Skip to main content

Starting Video Help

Diyalog Platform offers live assistance to your customers through your mobile application with video calls.

You can download full simple video call android project from SimpleVideoCall link.

Main Flow#

First of all, you need to know the flow about video call help in Diyalog platform for anonymous users. Anonymous user means you can connect logged in or not logged in user with your representatives.

The flow is like below :

  1. Your app calls the DiyalogSDK startVideoCallWithAttachedDataInBackground method.
  2. startVideoCallWithAttachedDataInBackground connects Diyalog Server and server will add your video call request to your representative queue then return to sdk about the result.
  3. startVideoCallWithAttachedDataInBackground works asyncronously and result of the method call will return to your app in a callback method.
  4. If inserting queue successfull then DiyalogSDK waits in background without showing any screen in your mobile app until a representative connecting . Therefore, you should show your wait screen thaht showing a representative will connect soon.
  5. If any represenatative connecting, DiyalogSDK will automatically starts video call and come into foreground.
  6. After you retrun succecsfull result from startVideoCallWithAttachedDataInBackground function, You can follow all stages of the video call by subscribing CallState in DiyalogSDK. So, you should subscribe to CallState by calling subscribeToCallStateWithTxCodeEvent in DiyalogSDK.

According to your business needs, a video call can be started at the relevant stage of your application as follows. When the following method is called, the DiyalogSDK in the background will transmit the call request to the call center over the server, and it will be waiting in the background until a representative from the call center initiates the call. During this process, the standby screen should be displayed in your mobile application. Customers who are tired of waiting should be allowed to cancel the transaction by adding a cancellation option to the waiting screen.

public void startVideoCallWithAttachedDataInBackground(Activity context,
Long idNumber,
String customerId,
String customerName,
Long customerPhone,
String txCode,
ArrayList<AttachedData> attachedDataList,
VideoCallResult videoCallResult)
Parameters
context (Activity)
Activity that this method called from.
idNumber (Long)
National ID number of the customer.
customerId (String) Customer id number. This can be real or candidate customer id.
customerName (String) Name of the customer.
customerPhone (Long)
Opsiyoneldir.
Phone number of the customer. This paramater is optional. It can be set null.
txCode (String) This field is a parameter used only in the mobile client. The main application can distinguish the callState events of the its video calls in from other call. CallState events related to the conversation status are returned to the main application with this txcode parameter. It is in no way migrated to the server or agent application.
attachedData (ArrayList of AttachedData)
Opsiyoneldir.
With this parameter, you can send the data you want to the agent application. The Diyalog server transmits the data in the key-value array in this parameter to the Agent application. The data transmitted in this area is not stored on the Diyalog servers, only transmitted.
videoCallResult (VideoCallResult) startVideoCallWithAttachedDataInBackground method is an asynchronous method and sends the result (information that the call request has been started) to your application with this callback method.

You can find the detail about VideoCallResult class

public interface VideoCallResult {
void success();
void failure(VideoCallError videoCallError);
}
public class VideoCallError {
public static final String IDNUMBER_SHOULD_BE_PASSED = "DLGEXCPINP_IDNUMBER";
public static final String CUSTOMERID_SHOULD_BE_PASSED = "DLGEXCPINP_CUSTOMER_ID";
public static final String EXCEPTION_IN_AUTH_REQUEST = "DLGEXCP_AUTH_REQUEST";
private String errorCode;
private String errorMsg;
public VideoCallError(String errorCode, String errorMsg) {
this.errorCode = errorCode;
this.errorMsg = errorMsg;
}
public String getErrorCode() {
return errorCode;
}
public String getErrorMsg() {
return errorMsg;
}
}

You can use startVideoCallWithAttachedDataInBackground method as shown in below code. First of all, you need to create an ArrayList that takes the data you want to pass in AttachedData class.

import im.diyalog.core.AttachedData;
..
ArrayList<AttachedData> attachedData = new ArrayList<AttachedData>();
attachedData.add(new AttachedData("dataName1","dataValue1"));
attachedData.add(new AttachedData("dataName2","dataValue2"));
attachedData.add(new AttachedData("dataName3","dataValue3"));
attachedData.add(new AttachedData("dataName4","dataValue4"));

Then you need to pass this data in the attachedDataList parameter of the startVideoCallWithAttachedDataInBackground method.

public void startVideoCallWithAttachedDataInBackground(Activity context,
Long idNumber,
String customerId,
String customerName,
Long customerPhone,
String txCode,
ArrayList<AttachedData> attachedDataList,
VideoCallResult videoCallResult)

If you get success as a videoCallResult from the startVideoCallWithAttachedDataInBackground method, you need to subscribe to the event mechanism where you can follow the status of the call.

public void subscribeToCallStateWithTxCodeEvent(
ValueChangedListener<CallStateEvent> listener
)
public class CallStateEvent {
private String state;
private String txCode;
public CallStateEvent(String state, String txCode) {
this.state = state;
this.txCode = txCode;
}
public String getState() {
return state;
}
public String getTxCode() {
return txCode;
}
}

CallStates that can receive from DiyalogSDK after subscribe as follows:

"RINGING" : Phone is calling "CONNECTING" : Call accepted by both peers and Webrtc session is creating. "IN_PROGRESS" : Call in progress "ENDED" : Call ended.
"NO_CALL" : Initial state. No call active.
"CALL_ACTIVITY_DESTROYED" : DiyalogSDK Call Activity completely destroyed. This event is only for android sdk.

After call completed and your logic finished for video help, you should unsubscribe from CallState event bu using following method.aşağıdaki metod ile unsubscribe olabilirsiniz.

public void unSubscribeToCallStateWithTxCodeEvent(ValueChangedListener<String> listener)

You can see complete code sample that you need to implement below. You should show wait screen after getting success from VideoCallResult callback. If you receive failure, there is an error in the system and you should show error screen to customer.

ArrayList<AttachedData> attachedData = new ArrayList<AttachedData>();
attachedData.add(new AttachedData("dataName1","dataValue1"));
attachedData.add(new AttachedData("dataName2","dataValue2"));
attachedData.add(new AttachedData("dataName3","dataValue3"));
attachedData.add(new AttachedData("dataName4","dataValue4"));
DiyalogEngine.diyalogInstance().startVideoCallWithAttachedDataInBackground(
this,
Long.parseLong(idenNo),
"<Customer_No>",
"<Customer_NAME>",
null,
"<Tx_Code",
attachedData,
new VideoCallResult() {
@Override
public void success() {
DiyalogEngine.diyalogInstance().subscribeToCallStateWithTxCodeEvent(
new ValueChangedListener<CallStateEvent>() {
@Override
public void onChanged(CallStateEvent val, Value<CallStateEvent> valueModel) {
Log.d("VIDEOCALL",
"CALL STATE CHANGED TO " +
val.getState() +
" for txCode " +
val.getTxCode());
//RINGING, CONNECTING, IN_PROGRESS, ENDED, NO_CALL, CALL_ACTIVITY_DESTROYED
if (val.equals("CALL_ACTIVITY_DESTROYED")){
// Show customer creation result to user
}
else if (val.equals("IN_PROGRESS")){
}
..
}
});
// SHOW YOUR WAIT SCREEN
}
@Override
public void failure(VideoCallError videoCallError) {
Log.e(
"VIDEO CALL CENTER",
"Video call failed. Failure Code :" +
videoCallError.getErrorCode() +
" Failure Message :" +
videoCallError.getErrorMsg());
// Show Call failed message to user
}
});

If startVideoCallWithAttachedDataInBackground method return successfull and you showed wait screen to customer and the customer press cancel button in your wait screen before agent start video call, you should call stopVideoCall method to stop process

public boolean stopVideoCall(String customerId)

Sample code

DiyalogEngine.diyalogInstance().stopVideoCall(customerId);

Done :)

Picture In Picture Mode#

Diyalog SDK has feature picture in picture mode when video or voice call in progress. It is managed by other peer. It means, Diyalog App which is used by staff (agent) can send a manage call event to the mobile app in background and call view in mobile app automatically minimized over host application as picture in picture mode.

When mobile app call view is mininizing, Diyalog app that used by staff can send data (command) to mobile app in background. In this way, mobile host application can start any flow by checking the data/command for the customer during video/voice call.

The subscribeToManageCallEvent method is used to listen to these events. Each time a new event occurs, the callback function given to this method is called. Possible values are as follows :

"NO_EVENT" : Default and initial value of the event. This event should be ignored.
"CALL_MINIMIZED" : When this event comes, it means that the video call is minimized and the desired flow can be started. There can be additional data/command in the event.
"MESSAGE_RECEIVED" : When this event comes, it means that data has been transmitted from the other application to the mobile application.

After subscription, "CALL_MINIMIZED" event should be waited and getManageCallEventData method should be used to read event data/command when this event comes up. You can redirect to the flow you want with the eventData you designed.

ValueChangedListener<String> manageCallEventListener = new ValueChangedListener<String>() {
@Override
public void onChanged(String val, Value<String> value) {
if (val.equals("CALL_MINIMIZED")){
ArrayList<ManageCallEventData> callEventData =
DiyalogEngine.diyalogInstance().getManageCallEventData();
for (ManageCallEventData data: callEventData){
if (data.getKey().equals("command") && data.getValue().equals("getCardPassword")){
// Do something
}
}
}
}
};
DiyalogEngine.diyalogInstance().subscribeToManageCallEvent(manageCallEventListener);

When the call is ended or you don't want to listen to this event, you should unsubscribe your listener by calling unsubscribeToManageCallEvent method.

DiyalogEngine.diyalogInstance().unsubscribeToManageCallEvent(manageCallEventListener);

Receiving Data From Remote Party In a Call#

Mobile app can receive any message or data from other party (agent or staff) during video/voice call in background. Staff or agent application can send any data/command/message to the mobile app during call in progress by means of DiyalogSDK.

This messages can be get by subscribing to manage call events.

The subscribeToManageCallEvent method is used to listen to these events. Each time a new event occurs, the callback function given to this method is called. Possible values are as follows :

"NO_EVENT" : Default and initial value of the event. This event should be ignored.
"CALL_MINIMIZED" : When this event comes, it means that the video call is minimized and the desired flow can be started. There can be additional data/command in the event.
"MESSAGE_RECEIVED" : When this event comes, it means that data has been transmitted from the other application to the mobile application.

After subscription, "MESSAGE_RECEIVED" event should be waited and getManageCallEventData method should be used to read event data/command when this event comes up. You can redirect to the flow you want with the eventData you designed.

ValueChangedListener<String> manageCallEventListener = new ValueChangedListener<String>() {
@Override
public void onChanged(String val, Value<String> value) {
if (val.equals("MESSAGE_RECEIVED")){
ArrayList<ManageCallEventData> callEventData =
DiyalogEngine.diyalogInstance().getManageCallEventData();
for (ManageCallEventData data: callEventData){
if (data.getKey().equals("processName") && data.getValue().equals("custOnboarding")){
// Do something
}
}
}
}
};
DiyalogEngine.diyalogInstance().subscribeToManageCallEvent(manageCallEventListener);

Sending Data To Remote Party In a Call#

You can send any data from mobile app to remote staff or agent app by means of DiyalogSDK during call.

For doing this, you can call below method with eventData array.

public void sendMessageToRemote(ArrayList<EventData> eventData, SendMessageToRemoteResult result)

EventData stores keyName and keyValue strings as ArrayList. This data is transfered to remote by calling sendMessageToRemote method.

Sample usage :

ArrayList<EventData> eventData = new ArrayList<EventData>();
eventData.add(new EventData("processName","CustOnboarding"));
eventData.add(new EventData("processState","customer_approve_by_pin"));
DiyalogEngine.diyalogInstance().sendMessageToRemote(
eventData,
new SendMessageToRemoteResult() {
@Override
public void success() {
}
@Override
public void failure(String errorMessage) {
}
});

In this sample code remote peer (agent / staff app) will receive following json object. Sending a message to the remote peer is only possible during call.

{
eventType: 'sendMessage',
manageCallEventData: [
{dataName: 'processName', dataValue: 'CustOnboarding'},
{dataName: 'processState', dataValue: 'customer_approve_by_pin'}
]
}

Sample Android project#

You can download full simple video call android project from SimpleVideoCall link.