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 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-ios-api

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

Step 1: Create a Stringee account

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: Add SDK to Project

Edit your project's Podfile

The simplest way to import the SDK into an iOS project is with CocoaPods. Open your project's Podfile and add this line to your app's target:

pod 'StringeeWidget'

Then from the command line run:

pod install --repo-update

If you're new to CocoaPods, see their official documentation for info on how to create and use Podfiles.

In the "Build Settings" tab -> "Other linker flags" add "$(inherited)" flag
In the "Build Settings" tab -> "Enable bitcode" select "NO"

Step 3: Edit Info.plist

Right-click the information property list file (Info.plist) and select Open As -> Source Code
Insert the following XML snippet into the body of your file just before the final element:

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) uses Camera</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) uses Microphone</string>

Step 4: Connect to Stringee Server

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 use the access token generated in Step 1 for now:

Add a line to import the StringeeWidget, Stringee frameworks:

import StringeeWidget
import Stringee

Implements the StringeeWidgetDelegate protocol

extension ViewController: StringeeWidgetDelegate {
    func onConnectionConnected(userId: String, isReconnecting: Bool) {
        print("onConnectionConnected")
    }

    func onConnectionDisconnected(isReconnecting: Bool) {
        print("onConnectionDisconnected")
    }

    func onConnectionError(code: Int, message: String) {
        print("onConnectionError: \(message)")
    }

    func onRequestNewToken() {
        print("onRequestNewToken")
        // let newToken = "YOUR_NEW_ACCESS_TOKEN"
        // stringeeWidget.connect(token: newToken)
    }

    func onDisplayCallingViewController(vc: UIViewController) {
        // vc.modalPresentationStyle = .fullScreen
        // present(vc, animated: true, completion: nil)
    }

    func onSignalingState(state: SignalingState) {
        print("onSignalingState: \(state.rawValue)")
        // if state == .ended || state == .busy {
        //    DispatchQueue.main.async {
        //        self.dismiss(animated: true, completion: nil)
        //    }
        // }
    }
}

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() method is called.
When the token is expired, the onRequestNewToken() method is called. You will need re-generate a new token and connect again.
When the client makes a call, the onDisplayCallingViewController() method is called. You will need to display the ViewController.
When the call's state changes, the onSignalingState() method is called. You will need to check if state is ended or busy then you need to dismiss the ViewController which is presented in onDisplayCallingViewController() method

Start connecting

let stringeeWidget = StringeeWidget.instance
let accessToken = "YOUR_ACCESS_TOKEN"

override func viewDidLoad() {
    super.viewDidLoad()
    stringeeWidget.delegate = self
    stringeeWidget.connect(token: accessToken)
}

Step 5: Make a call

Now you can make a call from your mobile

Initialize a call config:
```
var callConfig = StringeeCallConfig()
callConfig.from = stringeeWidget.stringeeClient.userId
callConfig.to = "testcall"
callConfig.isVideoCall = true
```
- 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(config: callConfig) { status, code, message, customData in
    print(message)
}

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 onSignalingState() method is invoked.

Step 6: 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: StringeeWidgetSample

Suggestions