0.1.0-rc • Published 1 year ago
cicada-sdk v0.1.0-rc
Click2Call Dynamic Platform SDK
Installation
npm install @finaccel/cicada-sdk --saveUsage
native javascript
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script crossorigin type="text/javascript" src="https://unpkg.com/cicada-sdk@0.1.0/dist/index.js"></script>
<link rel="stylesheet" href="jssip.css">
</head>
<body>
<div id="wrapper">
<h2>CICADA SDK DEMO</h2>
<div id="callStatus" style="display: none">
<div class="callInfo">
<h3 id="callInfoText">info text goes here</h3>
<p id="callInfoNumber">info number goes here</p>
</div>
<div id="hangUp"> <i class="fa fa-phone"></i>
</div>
</div>
<!---------TO FIELD---------------------------------------------------->
<!---------DIALPAD---------------------------------------------------->
<div id="inCallButtons" style="display: none">
<div id="dialPad">
<div class="dialpad-char" data-value="1" unselectable="on">1</div>
<div class="dialpad-char" data-value="2" unselectable="on">2</div>
<div class="dialpad-char" data-value="3" unselectable="on">3</div>
<div class="dialpad-char" data-value="4" unselectable="on">4</div>
<div class="dialpad-char" data-value="5" unselectable="on">5</div>
<div class="dialpad-char" data-value="6" unselectable="on">6</div>
<div class="dialpad-char" data-value="7" unselectable="on">7</div>
<div class="dialpad-char" data-value="8" unselectable="on">8</div>
<div class="dialpad-char" data-value="9" unselectable="on">9</div>
<div class="dialpad-char" data-value="*" unselectable="on">*</div>
<div class="dialpad-char" data-value="0" unselectable="on">0</div>
<div class="dialpad-char" data-value="#" unselectable="on">#</div>
</div>
</div>
<!---------DIAL CONTROLS-------------------------------------------->
<div id="callControl">
<div id="to">
<input id="applicationId" class="inputText" type="text" value="CUSTOM_APPLICATION_ID_1" placeholder="Enter Application ID here"/>
</div>
<div id="to">
<input id="userId" class="inputText" type="text" value="4546" placeholder="Enter User ID here"/>
</div>
<div id="to">
<!-- <input id="toField" type="text" class="inputText" value="6283870298813" placeholder="Enter number here"/> -->
<!-- pesan suara -->
<input id="toField" class="inputText" type="text" value="6285739211209" placeholder="Enter number here"/>
</div>
<button id="connectCall"> <i class="fa fa-phone"></i>
Call
</button>
</div>
</div>
<script>
(async() => {
try{
let userAgent;
let cicadaApp;
const applicationId = $('#applicationId').val();
const userId = $('#userId').val();
const dest = $('#toField').val();
const configuration = {
applicationId,
userId: Number(userId),
cicadaBaseUrl: 'http://localhost:3011',
debug: true
};
userAgent = new CICADA.UserAgent(configuration);
cicadaApp = await userAgent.createSession();
cicadaApp.on('cicada:call:status:changed', function(event) {
$('#callControl').hide();
if(event.status === 'started') {
$('#callInfoText').html('Starting...');
$('#callInfoNumber').html(dest);
$('#callStatus').show();
}
if(event.status === 'ringing') {
$('#callInfoText').html('Ringing...');
$('#callInfoNumber').html(dest);
$('#callStatus').show();
}
if(event.status === 'answered') {
$('#callInfoText').html('In Call');
$('#callInfoNumber').html(dest);
$('#inCallButtons').show();
const localStream = userAgent.callSession.connection.getLocalStreams()[0];
const dtmfSender = userAgent.callSession.connection.createDTMFSender(localStream.getAudioTracks()[0])
userAgent.callSession.sendDTMF = function(tone){
dtmfSender.insertDTMF(tone);
};
}
if(['completed', 'failed', 'unanswered'].includes(event.status)) {
$('#callControl').show();
$('#callStatus').hide();
$('#inCallButtons').hide();
}
if(event.status === 'failed') {
alert('call status failed: ' + JSON.stringify(event));
}
})
$('#connectCall').click(async function() {
const dest = $('#toField').val();
try{
await cicadaApp.makeOutgoingCall(dest);
}catch(error){
alert('failed to make outgoing call: ' + error);
$('#callControl').show();
$('#callStatus').hide();
$('#inCallButtons').hide();
}
});
let coolPhone;
if(configuration){
const hangup = async function(){
try {
await cicadaApp.hangUp();
}catch(error){
console.log('hangup failed', error);
alert('hangup failed: ' + error.message);
}
};
$('#hangUp').click(hangup);
$('#reject').click(hangup);
$('#toField').keypress(function(e){
if(e.which === 13){//enter
$('#connectCall').click();
}
});
$('#inCallButtons').on('click', '.dialpad-char', function (e) {
const $target = $(e.target);
const value = $target.data('value');
console.log('sendDTMF',value);
});
}
}catch(error) {
$('#callControl').show();
$('#callStatus').hide();
$('#inCallButtons').hide();
alert('Something went wrong ' + error);
}
})()
</script>
</body> react - WIP
WIPOptions
applicationId, userId: Number(userId), cicadaBaseUrl: 'http://localhost:3011', debug: true
Options
| Options | Example | Description |
|---|---|---|
| applicationId | ca2cd3d6-8e1a-4be7-b0a9-89691d64bf46 | Registered Application UUID on cicada platform |
| userId | 10002 | Registered UserId on cicada platform |
| cicadaBaseUrl | OPTIONAL (http://localhost:3011) | Optional, default value is https://cicada-staging.kredivo.com |
| debug | OPTIONAL (true/false) | Optional, if you want to debug event logs |
Development
Run demo locally
cd <sdk project directory>
rm -rf dist
npm run build:demo
cd demo && node index.js
open http://localhost:${port}/cicada to see demo applicationPublish
# create tag
- npm run version
- git commit -m "update CHANGELOG.md"
- npm version `major|minor|patch`
git push origin v2.0.0
# publish to npm
npm publish