Getting started with Stringee Call2 API using Web SDK

This is a quick start guide for Stringee Call2 API use Stringee Web SDK. The guide will walk you through the necessary steps so you can make video calls.

We also prepared the demos where you can immediately try making Demo Video Call With Stringee Call2: Link Caller and Link Callee.

Step 1: Prepare

To begin using Stringee Video Conferencing API, you need to 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
Configure answer_url

For more information about answer_url, read Stringee Call API Overview. You can also 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 or app-to-phone call, configure your Project's answer_url

If you do not have an 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

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

Note: In a production application, you should configure and use your own answer_url.

Step 2: Add Stringee SDK

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

Or add the SDK by using below CDN:

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

Set working directory:

/test-stringee-sdk
    /js
        --- jquery-3.2.1.min.js
        --- StringeeSDK.js
test_agent.html
test_customer.html

Add Stringee SDK in your web page:

<!DOCTYPE html>
    <html>
        <head>
            <title>Stringee Video Test</title>
            <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
            <script type="text/javascript" src="js/latest.sdk.bundle.min.js"></script>
            <script type="text/javascript" src="./call2_demo.js"></script>
        </head>

        <body>
            <div id="local_videos" style="height: 200px">
                Local videos:<br/>
            </div>

            <div id="remote_videos">
                Remote videos:<br/>
            </div>
        </body>
    </html>

Step 3: Connect to Stringee Server

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

Generate Access Token

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

Connect

In order to connect to Stringee Server, create 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);
```

Receive connection events:

When Client connects to Stringee Server:

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

When Client is authenticated:

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

When 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: Make call

To make a call:

1. Instantiate a StringeeCall object:

For video call:

var call = new StringeeCall2(stringeeClient, fromNumber, toNumber, true);

For voice call:

var call = new StringeeCall2(stringeeClient, fromNumber, toNumber, true);

2. Receive call events:

function settingCallEvent(call1) {
    call1.on('addlocalstream', function (stream) {
        console.log('addlocalstream, khong xu ly event nay, xu ly o event: addlocaltrack');
    });

    call1.on('addlocaltrack', function (localtrack1) {
        console.log('addlocaltrack', localtrack1);

        var element = localtrack1.attach();
        document.getElementById("local_videos").appendChild(element);
        element.style.height = "150px";
        element.style.color = "red";
    });

    call1.on('addremotetrack', function (track) {
        var element = track.attach();
        document.getElementById("remote_videos").appendChild(element);
        element.style.height = "150px";
    });

    call1.on('removeremotetrack', function (track) {
        track.detachAndRemove();
    });

    call1.on('removelocaltrack', function (track) {
        track.detachAndRemove();
    });

    call1.on('signalingstate', function (state) {
        console.log('signalingstate ', state);
        if (state.code === 6) {
            $('#incomingcallBox').hide();
        }

        if (state.code === 6) {
            setCallStatus('Ended');
            onstop();
        } else if (state.code === 3) {
            setCallStatus('Answered');
            test_stats();
        } else if (state.code === 5) {
            setCallStatus('User busy');
            onstop();
        }
    });
    call1.on('mediastate', function (state) {
        console.log('mediastate ', state);
    });
    call1.on('otherdevice', function (msg) {
        console.log('otherdevice ', msg);
        if (msg.type == 'CALL2_STATE') {
            if (msg.code == 200 || msg.code == 486) {
                $('#incomingcallBox').hide();
            }
        }
    });
    call1.on('info', function (info) {
        console.log('++++info ', info);
    });
}

3. Make call:

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

Step 5: Answer the call

Receive an incoming call:

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

Answer the call:

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

Or decline the call:

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

The following code example shows how to answer a call:

client.on('incomingcall2', 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: End call

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/tree/master/VideoCall2Sample

Suggestions