Getting started with Stringee Widget to make a voice/video call

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 21 (Android 5 Lollipop).
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.1.6'
    implementation 'com.stringee.sdk.android:stringee-android-sdk:2.1.13'
    implementation 'io.github.webrtc-sdk:android:144.7559.09'
    implementation 'androidx.appcompat:appcompat:1.7.1'
}

Step 4: Permissions and proguard

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

<!-- Internet -->
<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" />
<!-- Record -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<!-- Audio -->
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<!-- Camera -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature
    android:name="android.hardware.camera"
    android:required="false" />
<uses-feature
    android:name="android.hardware.camera.autofocus"
    android:required="false" />
<!-- Bluetooth -->
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" /> <!-- Require for android 12 or higher -->
<uses-feature
    android:name="android.hardware.bluetooth"
    android:required="false" />
<uses-feature
    android:name="android.hardware.bluetooth_le"
    android:required="false" />
<!-- Graphic -->
<uses-feature
    android:glEsVersion="0x00020000"
    android:required="false" />
<!-- Wake lock -->
<uses-permission android:name="android.permission.WAKE_LOCK" />
<!--Vibrate-->
<uses-permission android:name="android.permission.VIBRATE" />
<!--Notification-->
<uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT"/> <!--For show notification in full screen-->
<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/> <!--Require for android 13 or higher-->
<!--Foreground service-->
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_PHONE_CALL" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MICROPHONE" />
<uses-permission android:name="android.permission.MANAGE_OWN_CALLS" />
<!--Telephony-->
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>

Request RECORD_AUDIO, CAMERA, READ_PHONE_STATE, BLUETOOTH_CONNECT, and POST_NOTIFICATIONS at runtime on Android versions where they are dangerous permissions.

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

# WebRTC
-keep class org.webrtc.** { *; }
-dontwarn org.webrtc.**
-keepclassmembers class org.webrtc.** { *; }

# JNI
-keepclasseswithmembernames class * {
    native <methods>;
}
-keep class org.jni_zero.** { *; }

# Stringee
-dontwarn com.stringee.**
-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.call.StringeeCallActivity"
   android:configChanges="keyboardHidden|orientation|screenSize"
   android:exported="false"
   android:launchMode="singleTask"
   android:showOnLockScreen="true"
   android:showWhenLocked="true"
   android:theme="@style/Theme.AppCompat.Light.NoActionBar"
   android:turnScreenOn="true"
   android:windowSoftInputMode="stateAlwaysHidden" />

<receiver
   android:name="com.stringee.widget.call.receiver.CallActionReceiver"
   android:exported="false" />

<receiver
   android:name="com.stringee.widget.call.receiver.GSMCallStateReceiver"
   android:exported="false">
   <intent-filter>
      <action android:name="android.intent.action.PHONE_STATE" />
   </intent-filter>
</receiver>

<service
   android:name="com.stringee.widget.common.CallForegroundService"
   android:exported="false"
   android:foregroundServiceType="phoneCall|microphone" />

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 = StringeeWidget.getInstance(getApplicationContext());
stringeeWidget.setListener(new StringeeListener() {
    @Override
    public void onConnectionConnected(StringeeWidget widget) {

    }

    @Override
    public void onConnectionDisconnected(StringeeWidget widget) {

    }

    @Override
    public void onConnectionError(StringeeWidget widget, StringeeError error) {

    }

    @Override
    public void onRequestNewToken(StringeeWidget widget) {

    }

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

    }

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

    }

    @Override
    public void onDisplayCallingActivity(StringeeWidget widget, CallType callType) {
        widget.openCallActivity();
    }

    @Override
    public void onCallError(StringeeWidget widget, StringeeError error) {

    }
});

When the client connects to Stringee Server, the onConnectionConnected(StringeeWidget widget) method is called.
When the client disconnects from Stringee Server, the onConnectionDisconnected(StringeeWidget widget) method is called.
When the client fails to connect to Stringee Server, the onConnectionError(StringeeWidget widget, StringeeError error) method is called.
When the token is expired, the onRequestNewToken(StringeeWidget widget) method is called. You will need to generate a new token and connect again.
When the Widget needs to display its call UI, the onDisplayCallingActivity(StringeeWidget widget, CallType callType) method is called.

If you use an on-premises Server, set the list socket address with your host and port before connecting:

List<SocketAddress> socketAddressList = new ArrayList<>();
socketAddressList.add(new SocketAddress("your host", your_port));
stringeeWidget.setHost(socketAddressList);

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

Step 8: Making a call

Initialize a call config:
```
boolean isVideoCall = true;   
...
CallConfig callConfig = new CallConfig(from, to);
callConfig.setVideoCall(isVideoCall);
```
- from: is the user id which is used to generate access token in Step 1 or the hotline number.
- to: is the user id of the callee or the hotline number, such as "testcall".
- isVideoCall: true - a video call, false - a voice call;

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 Call2 state changes, the onCallStateChange2(StringeeWidget widget, 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.

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: WidgetSample

Suggestions