Getting started with Stringee Call API using Web SDK

This is a quick start guide for Stringee Web SDK. The guide will walk you through the necessary steps so you can make calls from Web to Web (Voice or Video), from Web to Phone, from Phone to Web.

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

Step 1: Prepare

Before using 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 a answer_url, to speed things up you can use the following Project's answer_url:

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 here: https://github.com/stringeecom/server-samples/blob/master/answer_url/php/project_answer_url.php)

But in a production 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 a answer_url, to speed things up you can use the following Number's answer_url:

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)

But in a production 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 a completed sample on Github: https://github.com/stringeecom/web-sdk-samples

Suggestions