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.
"START_OPERATION" : When this event comes, it just means that the display is stopped while the voice call is in progress in the mobile client side and the main application on the mobile device can start any action flow. This event should be used in the mobile application if there will be a process where the camera will be used other than the video call. Because the operating systems of the devices do not allow camera access from different threads at the same time.

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

Start Another Operation When Call In Progress#

While the video or audio call is in progress, your representative or employee can initiate the desired transaction on the phone of the customer. There may be a camera or hardware function in the process that can be started on customer's mobile device. For example, you can start an OCR process using the camera or facial recognition when call in progres. In this mode, customer camera will be stopped only voice call continue and other process can access the camera. This is the main point that separates this process from Picture In Picture mode.

An operation that uses a camera on the customer's phone can be performed with 3 different methods. You can design your implementaton that supports all or some of them. These methods are as follows:

  1. The client view is stopped and an event is sent to the main application to perform the desired operation. In this method, the customer and the representative only hear each other's voice during the operation.
  2. The call is minimized as picture in picture. During the operation, the customer sees and hears the voice and image of the representative in picInpic mode. The agent hears only the voice of the customer.
  3. Customer phone screen shared with representative by screen casting method and representative can see customer phone's screen and direct customer with voice in real time. This screencast can only done by getting permission from the customer. Permission is getting by operating system automatically.

There will be no change for the mobile application in all 3 methods. As in Picture In picture mode, you should listen ManageCallEvent and when you receive START_OPERATION event, you can start any operation which describes in the details of the event. You can only focus on implementation of the operation, Diyalog SDK will manage camera stopping or screen castion or picInPic mode.

In other words, as in picture in picture mode, you can listen to manageCall events with the subscribeToManageCallEvent method and start any operation according to the type of operation you want with a control like below.

Below is sample code.

ValueChangedListener<String> manageCallEventListener = new ValueChangedListener<String>() {
@Override
public void onChanged(String val, Value<String> value) {
if (val.equals("START_OPERATION")){
ArrayList<ManageCallEventData> callEventData =
DiyalogEngine.diyalogInstance().getManageCallEventData();
for (ManageCallEventData data: callEventData){
if (data.getKey().equals("operationName") && data.getValue().equals("START_OCR")){
final Intent intent = new Intent(getApplicationContext(), SampleOcrActivity.class);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(intent);
}
if (data.getKey().equals("operationName") && data.getValue().equals("START_NFC")){
// do your nfc operation
}
if (data.getKey().equals("operationName") && data.getValue().equals("START_FACE_RECOGNITION")){
// do your face recognition operation
}
if (data.getKey().equals("operationName") && data.getValue().equals("<OPERATION_YOU_DEFINED>")){
// do your another operation
}
}
}
}
};
DiyalogEngine.diyalogInstance().subscribeToManageCallEvent(manageCallEventListener);

After your operation completed, you should call below method of the Diyalog SDK in order to turn back to video call. Of course, before calling this method, if the main application is performing an operation on the device's camera, the camera access must be closed and then the method must be called. Otherwise, the application may crash.

DiyalogEngine.diyalogInstance().turnBackToVideoCall();

Representative may also order turn back to call by remotely. SDK will broadcast message to the main application with diyalog.camerastartedincall string object. Again, the main application should dismiss views of the operation and close the camera access when this notification received. Therefore this notification should listen via BroadcastReceiver.

You can see how you can listen and act to it in below sample code.

try {
IntentFilter intentFilter = new IntentFilter("diyalog.camerastartedincall");
registerReceiver(broadcastReceiver, intentFilter);
} catch (Exception e) {
e.printStackTrace();
}
BroadcastReceiver broadcastReceiver = new BroadcastReceiver() {
@Override
public void onReceive(Context context, Intent intent) {
// stop camera access and dismiss your activity.
}
};

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.