This is a quick start guide for Stringee Web SDK. The guide will walk you through the necessary steps so you can make calls from Web to Web (Voice or Video), from Web to Phone, from Phone to Web.
We also prepared the demos where you can immediately try making voice call: voice call app-to-app/app-to-phone or video call: video call. We even have a WebPhone with completed UI: WebPhone.
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
Create a Project on Stringee Dashboard
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.
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
Project's answer_url for App-to-Phone call:
https://developer.stringee.com/scco_helper/simple_project_answer_url?record=false&appToPhone=true
(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.
If you do not have a answer_url, to speed things up you can use the following Number's answer_url:
Number's answer_url for Phone-to-App call (The call is routed to Your App which authenticated by USER_ID):
https://developer.stringee.com/scco_helper/simple_number_answer_url?record=true&phoneToPhone=false&to_number=USER_ID
Number's answer_url for Phone-to-Phone call (The call is routed to TO_NUMBER):
https://developer.stringee.com/scco_helper/simple_number_answer_url?record=true&phoneToPhone=true&stringeeNumber=STRINGEE_NUMBER&to_number=TO_NUMBER
(Source code here: https://github.com/stringeecom/server-samples/blob/master/answer_url/php/number_answer_url.php)
But in a production application, you should use your own answer_url.
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
--- jquery-3.2.1.min.js
--- StringeeSDK.js
video_call.html
video_call_2.html
Including the Stringee SDK in your web page:
<html>
<head>
<title> Stringee Getting Started </title>
<script type="text/javascript" src="js/lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.stringee.com/sdk/web/latest/stringee-web-sdk.min.js"></script>
</head>
<body>
<div>
<video id="localVideo" autoplay muted style="width: 150px;"></video>
<video id="remoteVideo" autoplay style="width: 150px;"></video>
</div>
</body>
</html>
In order to connect to Stringee Server, 3-parties authentication is required as described here: Client authentication
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
In order to connect to Stringee Server, instantiate a StringeeClient instance:
//check isWebRTCSupported
console.log('StringeeUtil.isWebRTCSupported: ' + StringeeUtil.isWebRTCSupported());
var client = new StringeeClient();
client.connect(access_token);
client.on('connect', function () {
console.log('connected');
});
client.on('authen', function (res) {
console.log('authen', res);
$('#loggedUserId').html(res.userId);
});
client.on('disconnect', function () {
console.log('disconnected');
});
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);
});
To make a call:
var call = new StringeeCall(client, fromNumber, toNumber, true);
var call = new StringeeCall(client, fromNumber, toNumber, false);
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));
});
}
settingCallEvent(call);
call.makeCall(function (res) {
console.log('make call callback: ' + JSON.stringify(res));
});
Receives an incoming call:
client.on('incomingcall', function (incomingcall) {
console.log('incomingcall', incomingcall);
});
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);
});
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);
});
}
});
call.hangup(function (res) {
console.log('hangup res', res);
});
call.upgradeToVideoCall();
You can view a completed sample on Github: https://github.com/stringeecom/web-sdk-samples