Suggestions

close search

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

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

Step 2: Adding the Stringee SDK

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('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: Answering a call

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