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.
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
Create a Project on Stringee Dashboard
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.
Download Stringee SDK here: https://developer.stringee.com/download#contentSdkWebsite
Or add the SDK by using below CDN:
<script type="text/javascript" src="https://cdn.stringee.com/sdk/web/latest/stringee-web-sdk.min.js"></script>
Set working directory:
/test-stringee-sdk
/js
--- jquery-3.2.1.min.js
--- StringeeSDK.js
test_agent.html
test_customer.html
Add Stringee SDK in your web page:
<!DOCTYPE html>
<html>
<head>
<title>Stringee Video Test</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/latest.sdk.bundle.min.js"></script>
<script type="text/javascript" src="./call2_demo.js"></script>
</head>
<body>
<div id="local_videos" style="height: 200px">
Local videos:<br/>
</div>
<div id="remote_videos">
Remote videos:<br/>
</div>
</body>
</html>
In order to connect to Stringee Server, 3-party authentication is required as described here: Client authentication
Option 1: For testing purpose, go to Dashboard -> Tools -> Generate Access token and generate an access_token.
Option 2: Get an Access Token from Your Server: check out our sample source code on how to get a token: https://github.com/stringeecom/server-samples/tree/master/access_token
In order to connect to Stringee Server, create 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 StringeeCall2(stringeeClient, fromNumber, toNumber, true);
var call = new StringeeCall2(stringeeClient, fromNumber, toNumber, true);
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);
});
}
settingCallEvent(call);
call.makeCall(function (res) {
console.log('make call callback: ' + JSON.stringify(res));
});
Receive an incoming call:
client.on('incomingcall2', function (incomingcall) {
console.log('incomingcall2', incomingcall);
});
Answer the call:
call.answer(function (res) {
console.log('answer res', res);
});
Or decline the call:
call.reject(function (res) {
console.log('reject res', res);
});
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);
});
}
});
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/tree/master/VideoCall2Sample