Getting started with Stringee Call API using Web SDK

This is a quick start guide for the Stringee Web SDK. The guide will walk you through the necessary steps to make web-to-web (voice or video), web-to-phone, and phone-to-web calls.

We prepared the demos so that you can immediately try making a voice call: voice call app-to-app/app-to-phone or video call: video call. We also have a WebPhone with a complete UI:: WebPhone.

Step 1: Prepare

Before using the Stringee Call API for the first time, you must have a Stringee account If you do not have a Stringee account, sign up for free here: https://developer.stringee.com/account/register
Create a Project on Stringee Dashboard
Buy a Number (optional) For app-to-phone, phone-to-app calling, buy a Number from Dashboard. If you only need app-to-app calling, skip this step.
Configure answer_url

For more information on answer_url, read Stringee Call API Overview. You can view answer_url sample code here: https://github.com/stringeecom/server-samples/tree/master/answer_url

Configure Project's answer_url: To make an app-to-app, app-to-phone call, configure your Project's answer_url

If you do not have answer_url, you can use the following Project's answer_url to accelerate the process:

Project's answer_url for App-to-App call:

https://developer.stringee.com/scco_helper/simple_project_answer_url?record=false&appToPhone=false

Project's answer_url for App-to-Phone call:

https://developer.stringee.com/scco_helper/simple_project_answer_url?record=false&appToPhone=true

(Source code: https://github.com/stringeecom/server-samples/blob/master/answer_url/php/project_answer_url.php)

When building an application, you should use your own answer_url.

Configure Number's answer_url: To receive a phone-to-app call, configure your Number's answer_url

If you do not have answer_url, you can use the following Number's answer_url to accelerate the process:

Number's answer_url for Phone-to-App call (The call is routed to Your App which authenticated by USER_ID):

https://developer.stringee.com/scco_helper/simple_number_answer_url?record=true&phoneToPhone=false&to_number=USER_ID

Number's answer_url for Phone-to-Phone call (The call is routed to TO_NUMBER):

https://developer.stringee.com/scco_helper/simple_number_answer_url?record=true&phoneToPhone=true&stringeeNumber=STRINGEE_NUMBER&to_number=TO_NUMBER

(Source code here: https://github.com/stringeecom/server-samples/blob/master/answer_url/php/number_answer_url.php)

When building an application, you should use your own answer_url.

Step 2: Adding the Stringee SDK

Download the Stringee SDK here: https://developer.stringee.com/download#contentSdkWebsite

Or you can add the SDK by using the CDN:

<script type="text/javascript" src="https://cdn.stringee.com/sdk/web/latest/stringee-web-sdk.min.js"></script>

Create the working directory:

/test-stringee-sdk
    /js
        --- jquery-3.2.1.min.js
        --- StringeeSDK.js
video_call.html
video_call_2.html

Including the Stringee SDK in your web page:

<html>
    <head>
        <title> Stringee Getting Started </title>
        <script type="text/javascript" src="js/lib/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="https://cdn.stringee.com/sdk/web/latest/stringee-web-sdk.min.js"></script>
    </head>
    <body>
        <div>
            <video id="localVideo" autoplay muted style="width: 150px;"></video>
            <video id="remoteVideo" autoplay style="width: 150px;"></video>
        </div>
    </body>
</html>

Step 3: Connecting to Stringee Server

In order to connect to Stringee Server, 3-parties authentication is required as described here: Client authentication

Generate Access Token

Option 1: For testing purpose, go to Dashboard -> Tools -> Generate Access token and generates an access_token.
Option 2: Get an Access Token from Your Server: checkout our sample source code to learn how to get a token: https://github.com/stringeecom/server-samples/tree/master/access_token

Connect

In order to connect to Stringee Server, instantiate a StringeeClient instance:

//check isWebRTCSupported
console.log('StringeeUtil.isWebRTCSupported: ' + StringeeUtil.isWebRTCSupported());

var client = new StringeeClient();

Connect to Stringee server using access_token:
```
client.connect(access_token);
```

Receiving connection events:

When the client connects to Stringee Server:

client.on('connect', function () {
    console.log('connected');
});

When the client is authenticated:

client.on('authen', function (res) {
    console.log('authen', res);
    $('#loggedUserId').html(res.userId);
});

When the client disconnects from Stringee Server:

client.on('disconnect', function () {
    console.log('disconnected');
});

When the access_token expires:

client.on('requestnewtoken', function () {
    console.log('++++++++++++++ requestnewtoken; please get new access_token from YourServer and call client.connect(new_access_token)+++++++++');
    //please get new access_token from YourServer and call: 
    //client.connect(new_access_token);
});

Step 4: Making a call

To make a call:

1. Instantiate a StringeeCall instance:

For a video call:

var call = new StringeeCall(client, fromNumber, toNumber, true);

For a voice call

var call = new StringeeCall(client, fromNumber, toNumber, false);

2. Receiving call events:

function settingCallEvent(call1) {
    call1.on('addremotestream', function (stream) {
        // reset srcObject to work around minor bugs in Chrome and Edge.
        console.log('addremotestream');
        remoteVideo.srcObject = null;
        remoteVideo.srcObject = stream;
    });

    call1.on('addlocalstream', function (stream) {
        // reset srcObject to work around minor bugs in Chrome and Edge.
        console.log('addlocalstream');
        localVideo.srcObject = null;
        localVideo.srcObject = stream;
    });

    call1.on('signalingstate', function (state) {
        console.log('signalingstate ', state);
        var reason = state.reason;
        $('#callStatus').html(reason);
    });

    call1.on('mediastate', function (state) {
        console.log('mediastate ', state);
    });

    call1.on('info', function (info) {
        console.log('on info:' + JSON.stringify(info));
    });
}

3. Make call:

settingCallEvent(call);
call.makeCall(function (res) {
    console.log('make call callback: ' + JSON.stringify(res));
});

Step 5: Answering a call

Receives an incoming call:

client.on('incomingcall', function (incomingcall) {
    console.log('incomingcall', incomingcall);
});

Answer the call:

call.answer(function (res) {
    console.log('answer res', res);
});

Or reject the call:

call.reject(function (res) {
    console.log('reject res', res);
});

The following code example shows how to answer a call:

client.on('incomingcall', function (incomingcall) {
    console.log('incomingcall', incomingcall);
    call = incomingcall;
    settingCallEvent(incomingcall);
    var answer = confirm('Incoming call from: ' + incomingcall.fromNumber + ', do you want to answer?');
    if (answer) {
        call.answer(function (res) {
            console.log('answer res', res);
        });
    } else {
        call.reject(function (res) {
            console.log('reject res', res);
        });
    }
});

Step 6: Hanging up

call.hangup(function (res) {
    console.log('hangup res', res);
});

Step 7: Upgrade from an audio call to a video call:

call.upgradeToVideoCall();

Step 8: Samples

You can view the full version of this sample app on GitHub: https://github.com/stringeecom/web-sdk-samples

Suggestions