Suggestions

close search

Get started with Stringee Call API to make a video call from Mobile App to StringeeX Contact Center

This tutorial will walk you through the steps to make or reveive a call on Mobile App to StringeeX Contact Center.

Step 1:

Before you use Stringee Call API to make or receive a video call, you must sign up for a Stringee account. Here are 2 ways to do it:

Option 1:

1. Sign up a Stringee account on: https://developer.stringee.com/account/register
2. Go to the Dashboard and Create a project
   
   
3. Create a portal
   
   
4. Generate an access token: Tools -> Generate Access Token
   
   

Option 2:

1. Sign up a StringeeX account on: https://stringeex.com/en/register
2. Create a portal
   
   
3. Generate an access token: Sign in stringee.com with the StringeeX account then go to Tools -> Generate Access Token
   
   

Step 2: Creating a new project

Stringee Call API is delivered through Stringee SDK which is designed to be used with Android Studio.

1. Open Android Studio and select New Project from the File menu.
2. Set the minimum SDK for the app to be API 16 (Android 4.1 Jelly Bean).
3. Click through the wizard, ensuring that Empty Activity is selected. Set the Activity Name to MainActivity and the Layout Name set to activity_main.

Step 3: Adding the Stringee SDK

Stringee Android SDK is distributed as an AAR and can be added to your project by referencing the AAR remotely with Maven.

1. Navigate to your build.gradle at the project level and include the following:

   buildscript {
       repositories {
           ...
           mavenCentral()
       }
   }

2. Navigate to your build.gradle at the app level and include the following:

   android {
       ...
       compileOptions {
           sourceCompatibility JavaVersion.VERSION_1_8
           targetCompatibility JavaVersion.VERSION_1_8
       }
   }
   dependencies {    
       ...
       implementation 'com.stringee.sdk.android:stringee-android-sdk:1.9.3'
       implementation 'com.android.volley:volley:1.2.1'
   }

Step 4: Permissions and proguard

The Stringee Android SDK will require some permissions from your app's AndroidManifest.xml file:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />

If your project uses ProGuard, you may have to add the following settings to your ProGuard configuration file to ensure Stringee builds correctly:

-dontwarn org.webrtc.**
-keep class org.webrtc.** { *; }
-keep class com.stringee.** { *; }

Step 5: Setting up authentication

In order to connect to Stringee's Server, you will need access from the authentication credential: access token. In production application, the access token should be generated by your server described here: Client authentication.

But to speed things up, we will hard code the value for now:

1. In the MainActivity class, declare a variable to store the access token.

   public class MainActivity extends AppCompatActivity {
       private String token;
       ...
   }

2. Adjust the code by hard coding the value for the token with the access token generated in Step 1.

Step 6: Connecting

Next, we will connect to Stringee Server. You must do this before you can make or answer a video call.

1. Add StringeeClient property to the MainActivity class.

   private StringeeClient client;

2. Instantiate the StringeeClient object and register a connection listener to interact with the Stringee server:

   client = new StringeeClient(this);
   client.setConnectionListener(new StringeeConnectionListener() {
       @Override
       public void onConnectionConnected(final StringeeClient stringeeClient, boolean isReconnecting) {
       }
       @Override
       public void onConnectionDisconnected(StringeeClient stringeeClient, boolean isReconnecting) {
       }
       @Override
       public void onIncomingCall(final StringeeCall stringeeCall) {
       }
       @Override
       public void onIncomingCall2(StringeeCall2 stringeeCall2) {
       }
       @Override
       public void onConnectionError(StringeeClient stringeeClient, final StringeeError stringeeError) {
       }
       @Override
       public void onRequestNewToken(StringeeClient stringeeClient) {
           // Get new token here and connect to Stringe server
       }
       @Override
       public void onCustomMessage(String s, JSONObject jsonObject) {
       }
       @Override
       public void onTopicMessage(String s, JSONObject jsonObject) {
       }
   });        

   • When the client connects to Stringee Server, the onConnectionConnected(StringeeClient stringeeClient, boolean isReconnecting) method is called.
   • When the client disconnects to Stringee Server, the onConnectionDisconnected(StringeeClient stringeeClient, boolean isReconnecting) method is called
   • When the client fails to connect to Stringee Server, the onConnectionError(StringeeClient stringeeClient, StringeeError stringeeError) method is called.
   • When the token is expired, the onRequestNewToken(StringeeClient stringeeClient) is called. You will need re-generate a new token and connect again.
   • When the client has an incoming call, the onIncomingCall(StringeeCall stringeeCall) method is called.

3. Connect the Stringee server with the access token generated in Step 5:

   client.connect(token);

Step 7: Making a call

Before making a call, you need to learn about the flow of a call from a mobile app to StringeeX Contact Center.

For more detail, go to https://developer.stringee.com/docs/integrable-contact-center-overview. When you create a portal in the Step 1, a Contact Center number is auto-generated. You can configure this number in your portal -> Settings -> Call Center -> Hotline.

Now you can make a call from your mobile app to the Contact Center:

1. Create OutgoingCallActivity class to display the outgoing call screen.
2. Add a stringeeCall property to the OutgoingCallActivity class:

   private StringeeCall2 stringeeCall;
   private StringeeAudioManager audioManager;

3. Modify the implementation of the onCreate method in OutgoingCallActivity class to include code to make a call:

   stringeeCall = new StringeeCall2(client, from, to);
   stringeeCall.setVideoCall(true);
   // Initialize audio manager to manage the audio routing
   audioManager = StringeeAudioManager.create(this);
   audioManager.setSpeakerphoneOn(true);
   audioManager.start(new StringeeAudioManager.AudioManagerEvents() {
       @Override
       public void onAudioDeviceChanged(StringeeAudioManager.AudioDevice selectedAudioDevice, Set<StringeeAudioManager.AudioDevice> availableAudioDevices) {
           // All change of audio devices will receive in here
       }
   });
   // Make a call
   stringeeCall.makeCall(new StatusListener() {
       @Override
       public void onSuccess() {
   
       }
   });

• client: the StringeeClient object that has been initiated from MainActivity.
• from: is the user id which is used to generate the access token on Step 1.
• to: is the Contact Center number, such as: "testcall".

4. Implement the StringeeCall2.StringeeCallListener interface to interact with the call:

   stringeeCall.setCallListener(new StringeeCall2.StringeeCallListener() {
       @Override
       public void onSignalingStateChange(final StringeeCall2 stringeeCall, final StringeeCall2.SignalingState signalingState, String reason, int sipCode, String sipReason) {
       }
   
       @Override
       public void onError(StringeeCall2 stringeeCall, int code, String description) {
       }
   
       @Override
       public void onHandledOnAnotherDevice(StringeeCall2 stringeeCall, StringeeCall2.SignalingState signalingState, String description) {
       }
   
       @Override
       public void onMediaStateChange(StringeeCall2 stringeeCall, StringeeCall2.MediaState mediaState) {
       }
   
       @Override
       public void onLocalStream(final StringeeCall2 stringeeCall) {
       }
   
       @Override
       public void onRemoteStream(final StringeeCall2 stringeeCall) {
       }
   
       @Override
       public void onVideoTrackAdded(StringeeVideoTrack videoTrack) {
   
       }
   
       @Override
       public void onVideoTrackRemoved(StringeeVideoTrack videoTrack) {
   
       }
   
       @Override
       public void onCallInfo(StringeeCall2 stringeeCall, final JSONObject
               callInfo) {
       }
   
       @Override
       public void onTrackMediaStateChange(String from, StringeeVideoTrack.MediaType mediaType, boolean enable) {
   
       }
   });

   • When the client fails to make a call, the onError(StringeeCall2 stringeeCall, int code, String description) method will be invoked.
   • When the client makes a call successfully, the call will walk through many states such as calling, ringing, answered, ended, busy... Each time the call's state changes, the onSignalingStateChange(final StringeeCall2 call, final StringeeCall2.SignalingState signalingState, String reason, int sipCode, String sipReason) method will be invoked.
   • When the call's media stream is connected or disconnected, the onMediaStateChange(StringeeCall2 stringeeCall, StringeeCall2.MediaState mediaState) method is invoked.
   • When the call is handled on another device, the onHandledOnAnotherDevice(StringeeCall2 stringeeCall, StringeeCall2.SignalingState signalingState, String description) method is invoked.

A call is established when it's answered, and the media's state is MediaState.CONNECTED.

Step 8: Answering a call

In order for a client to be able to answer an incoming call:

1. Create IncomingCallActivity class to display the incoming call screen.
2. Modify the implementation of the onIncomingCall(StringeeCall2 stringeeCall) method and include code to navigate the IncomingCallActivity.

   @Override
   public void onIncomingCall(StringeeCall2 stringeeCall) {
       callsMap.put(stringeeCall.getCallId(), stringeeCall);
       Intent intent = new Intent(MainActivity.this, IncomingCallActivity.class);
       intent.putExtra("call_id", stringeeCall.getCallId());
       startActivity(intent);
   }

   Pass the call id to the IncomingCallActivity class.

3. Add a stringeeCall property to the IncomingCallActivity class:

   private StringeeCall2 stringeeCall;
   private StringeeAudioManager audioManager;

4. Get StringeeCall from calls map:

   String callId = getIntent().getStringExtra("call_id");
   stringeeCall = callsMap.get(callId);

5. Initialize the answer and send a ringing signal:

   // Initialize audio manager to manage the audio routing
   audioManager = StringeeAudioManager.create(this);
   audioManager.setSpeakerphoneOn(true);
   audioManager.start(new StringeeAudioManager.AudioManagerEvents() {
       @Override
       public void onAudioDeviceChanged(StringeeAudioManager.AudioDevice selectedAudioDevice, Set<StringeeAudioManager.AudioDevice> availableAudioDevices) {
       }
   });
   
   // Send ringing signal
   stringeeCall.ringing(new StatusListener() {
       @Override
       public void onSuccess() {
       }
   });

6. Answer and start the conversation:

   stringeeCall.answer(new StatusListener() {
       @Override
       public void onSuccess() {
   
       }
   });

   To make a test call from the Contact Center to your mobile app, go to your StringeeX portal, open the softphone, make a call to the user id which is used to generate access token in the Step 1.

Step 9: Displaying video

The Stringee Android SDK can show videos of the caller and callee as View objects. You can add these as subsidaries of ViewGroup objects in your app. This sample app will use FrameLayout objects (which extend ViewGroup) as containers for the caller and callee views:

1. Open the app/res/layout/activity_outgoing_call.xml file and include the following:

   <FrameLayout
       android:id="@+id/v_remote"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />
   
   <FrameLayout
       android:id="@+id/v_local"
       android:layout_width="80dp"
       android:layout_height="120dp"
       android:layout_alignParentRight="true"        
       android:layout_margin="10dp" />
   

2. Declare mLocalViewContainer and mRemoteViewcontainer as properties of the OutgoingCallActivity class.

   private FrameLayout mLocalViewContainer;
   private FrameLayout mRemoteViewContainer;

3. Then, initialize these layout view objects

   mLocalViewContainer = (FrameLayout) findViewById(R.id.v_local);
   mRemoteViewContainer = (FrameLayout) findViewById(R.id.v_remote);

4. Register the StringeeCall2.StringeeCallListener interface as described in 7.4

5. Modify the implementation code of the onLocalStream(final StringeeCall2 stringeeCall) method to display the caller's video (local media stream):

   runOnUiThread(new Runnable() {
       @Override
       public void run() {
           mLocalViewContainer.addView(stringeeCall.getLocalView());
           stringeeCall.renderLocalView(true);
       }
   });

   onLocalStream(final StringeeCall2 stringeeCall) method runs in background thread. So in order to interact with UI components from this method, your code must run in the UI thread.

6. Modify the implementation code of the onRemoteStream(StringeeCall2 stringeeCall) method to display callee's video (remote media stream):

   runOnUiThread(new Runnable() {
       @Override
       public void run() {
           mRemoteViewContainer.addView(stringeeCall.getRemoteView());
           stringeeCall.renderRemoteView(false);
       }
   });

Step 10: Hanging up a call

To terminate a call and release resources:

```
stringeeCall.hangup(new StatusListener() {
    @Override
    public void onSuccess() {

    }
});
// Stop audio manager to restore the previous audio settings before making a call
audioManager.stop();
```

Step 11: Reject a call

To reject a call:

```
stringeeCall.reject(new StatusListener() {
    @Override
    public void onSuccess() {

    }
});
// Stop audio manager to restore the previous audio settings before making a call
audioManager.stop();
```

Step 12: Mute

To mute the local sound:

```
boolean mute = true; // true: mute, false: unmute
stringeeCall.mute(true);
```

Step 13: Switch speaker

to switch to speakerphone or internal speaker:

```
boolean isSpeaker = true; // true: speakerphone, false: internal speaker
audioManager.setSpeakerphoneOn(isSpeaker);
```    

Step 14: Switch camera

to switch to the local camera:

```
stringeeCall.switchCamera(new StatusListener() {
    @Override
    public void onSuccess() {
    }
});
``` 

Step 15: Turn on/off the video

Turn on/off the video:

```
boolean enableVideo = true; // true: turn on, false: turn off
stringeeCall.enableVideo(enableVideo);
``` 

Step 16: Running the app

Now that your code is complete, you can run the app with your device. You can view a completed version of this sample app on GitHub: https://github.com/stringeecom/android-sdk-samples/tree/master/VideoCallSample