Suggestions

close search

Getting started with Stringee Call API using Web SDK

Step 1: Prepare

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

  2. Create a Project on Stringee Dashboard Stringee create Project

  3. 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. Stringee buy Number

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

If you do not have a answer_url, to speed things up you can use the following answer_url:

https://v1.stringee.com/dev_urls/answer_url/from_internal-test.php

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

But in a production application, you should use your own answer_url.

If you do not have a answer_url, to speed things up you can use the following answer_url:

https://v1.stringee.com/dev_urls/answer_url/from_external-test.php?userId=USER_ID

The call is routed to Your App which authenticated by USER_ID

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

But in a production application, you should use your own answer_url.

Step 2: Adding the Stringee SDK

socket.io-2.x and Stringee_SDK are two required libraries.

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

Connect

Receiving connection events:

Step 4: Making a call

To make a call:

1. Instantiate a StringeeCall instance:

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

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