Suggestions

close search

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

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

  1. 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.

  1. In the "Build Settings" tab -> "Other linker flags" add "$(inherited)" flag

  2. In the "Build Settings" tab -> "Enable bitcode" select "NO"

Step 3: Edit Info.plist

  1. Right-click the information property list file (Info.plist) and select Open As -> Source Code
  2. 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:

  1. Add a line to import the StringeeWidget, Stringee frameworks:
import StringeeWidget
import Stringee
  1. 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)
        //    }
        // }
    }
}
  1. 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

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:

  1. Initialize a call config:

    var callConfig = StringeeCallConfig()
callConfig.from = ""
callConfig.to = "testcall"
callConfig.isVideoCall = true
    • from: is the user id which is used to generate access token in Step 1.
    • to: is the Contact Center number.

  2. Make call

    stringeeWidget.makeCall(config: callConfig) { status, code, message, customData in
    print(message)
}

  3. 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: Answering a call

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 4.

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