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

  2. Create a Project on Stringee Dashboard Stringee create Project

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

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

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

Connect

Receive connection events:

Step 4: Make call

To make a call:

1. Instantiate a StringeeCall object:

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

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