Get started with Stringee Call API to make a video call from Web to StringeeX Contact Center

This tutorial will walk you through the steps to make or reveive a call on Web to StringeeX Contact Center.

Step 1:

Before you use Stringee Video Call API to make or receive a video call, you must sign up for a Stringee account. Here are 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: 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
        --- StringeeSDK.js
video_call.html

Including the Stringee SDK in your web page:

<html>
    <head>
        <title> Stringee Getting Started </title>
        <script type="text/javascript" src="https://cdn.stringee.com/sdk/web/latest/stringee-web-sdk.min.js"></script>
    </head>
    <body>
        <div>
            <div id="local_videos" style="height: 200px">
                Local videos:
                <br/>
            </div>

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

        <script>
            //check isWebRTCSupported
            console.log('StringeeUtil.isWebRTCSupported: ' + StringeeUtil.isWebRTCSupported());
        </script>
    </body>
</html>

Step 3: Connect 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:

var access_token = "YOUR_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);
    if (res.r === 0) {
        console.log('authenticated: userID=', res.userId);
    } else {
        console.log('authenticate failed: message=' + res.message + ', code=' + res.r);
    }
});

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

Before making a call, you need to learn about the flow of a call from Web/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 Web to the Contact Center:

To make a call:

1. Instantiate a StringeeCall instance:

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

client: the StringeeClient object that has been initiated in previous step.
fromNumber: is the caller's id.
toNumber: is the Contact Center number, such as: "testcall".

2. Receiving call events:

function settingCallEvent(call1) {
    call1.on('addlocalstream', function (stream) {
        console.log('addlocalstream, 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);

        var audioElement = track.attach(true);
        audioElement.setAttribute("style", "width: 250px;background: #424141;padding: 5px;height: 140px;margin: 5px");
        audioElement.setAttribute("controls", "true");
        document.getElementById("remote_videos").appendChild(audioElement);

        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);
    });
    call1.on('mediastate', function (state) {
        console.log('mediastate ', state);
    });
    call1.on('otherdevice', function (msg) {
        console.log('otherdevice ', msg);
    });
    call1.on('info', function (info) {
        console.log('++++info ', info);
    });
}

3. Make call:

settingCallEvent(call);
call.makeCall(function (res) {
    if (res.r == 0) {
        console.log('make call success');
    }
});

Step 5: Answering a call

To make a test call from the Contact Center to your Web, 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 3.

Receives an incoming call:

var call;
client.on('incomingcall2', function (call2) {
    call = call2;
    settingCallEvent(call);
});

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);
});

Step 6: Hanging up a call

Call the following method to Hang up a call.

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

Step 7: Sample

You can view a completed version of this sample app on GitHub: https://github.com/stringeecom/web-sdk-samples/tree/master/VideoCall2Sample

Suggestions