Getting started with Stringee Widget to make a video call from Mobile App to StringeeX Contact Center

Stringee Widget is the easiest way to quickly add video call to your mobile app. Stringee Widget provides a basic and non-customizable UI to make a video call from the mobile app to StringeeX Contact Center. To customize your UI and utilize advanced Stringee API features, you need to follow the tutorial here: https://developer.stringee.com/docs/stringeex-api-getting-started-android-api

This tutorial walks you through the steps of using Stringee Widget.

Step 1:

Before you use Stringee Widget to make or receive a video call, you must sign up for a Stringee account. There're 2 ways to do it:

Option 1:

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

Option 2:

Sign up a StringeeX account on: https://stringeex.com/en/register
Create a portal
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 in 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. Leave the Activity Name set 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.

Navigate to your build.gradle at the project level and include the following:
```
buildscript {
    repositories {
        ...
        mavenCentral()
    }
}
```

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-widget:1.0.0'
    implementation 'com.android.volley:volley:1.2.0'
    implementation 'androidx.appcompat:appcompat:1.4.2'
}

Step 4: Permissions and proguard

The Stringee Android SDK requires 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" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
<uses-permission android:name="android.permission.VIBRATE" />

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

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

Step 5: Activities and services

You must declare some activities and services in your app's Manifest:

<activity
    android:name="com.stringee.widget.OutgoingCallActivity"
    android:configChanges="keyboardHidden|orientation|screenSize"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"></activity>
<activity
    android:name="com.stringee.widget.IncomingCallActivity"
    android:configChanges="keyboardHidden|orientation|screenSize"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"></activity>

<service android:name="com.stringee.widget.RejectCallService" />

Step 6: Setting up authentication

In order to connect to Stringee Server, you will need access to 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 just hard code the value for now:

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

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

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

Step 7: Connecting

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

Add a StringeeWidget property to the MainActivity class.
```
private StringeeWidget stringeeWidget;
```

Instantiate the StringeeWidget object and register a connection listener to interact with the Stringee server:

stringeeWidget.setListener(new StringeeListener() {
    @Override
    public void onConnectionConnected() {

    }

    @Override
    public void onConnectionDisconnected() {

    }

    @Override
    public void onConnectionError(StringeeError stringeeError) {

    }

    @Override
    public void onRequestNewToken() {

    }

    @Override
    public void onCallStateChange(StringeeCall stringeeCall, StringeeCall.SignalingState signalingState) {

    }

    @Override
    public void onCallStateChange2(StringeeCall2 stringeeCall2, StringeeCall2.SignalingState signalingState) {

    }
});

When the client connects to Stringee Server, the onConnectionConnected() method is called.
When the client disconnects to Stringee Server, the onConnectionDisconnected() method is called
When the client fails to connect to Stringee Server, the onConnectionError(StringeeError stringeeError) method is called.
When the token is expired, the onRequestNewToken() is called. You will need re-generate a new token and connect again.

Connect the Stringee server with an access token generated in Step 5:
```
stringeeWidget.connect(token);
```

Step 8: Making a call

Before making a call, you need to learn about the flow of a call from 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:

Initialize a call config:
```
CallConfig callConfig = new CallConfig(from, to);
callConfig.setVideoCall(true);
```
- from: is the user id which is used to generate access token in Step 1.
- to: is the Contact Center number, such as "testcall".

Make call:

stringeeWidget.makeCall(callConfig, new StatusListener() {
    @Override
    public void onSuccess() {
    }

    @Override
    public void onError(StringeeError error) {
    }
});

Monitor the call state: When the client makes a video call successfully, the call will walk through many states such as calling, ringing, answered, ended, busy… Each time the call’s state changes, the onCallStateChange2(StringeeCall2 stringeeCall2, StringeeCall2.SignalingState signalingState) method is invoked.

Step 9: Answering a call

After the client connects Stringee Server, incoming calls is automatically handled by Stringee Widget. You do not need do anything. When you have an incoming call, Stringee Widget will show a notifcation or an incoming screen with pre-defined UI for you to answer or reject the call. To make a testing 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 10: 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/WidgetSample

Suggestions