Skip to content

Commit

Permalink
fix(calling): call-control-inconsistency-in-samples-page (#3165)
Browse files Browse the repository at this point in the history 
Co-authored-by: Shreyas Sharma <[email protected]>
  • Loading branch information
@Shreyas281299 @ShreyasSharma28
Shreyas281299 and ShreyasSharma28 authored Nov 8, 2023
1 parent 8b1b756 commit 59fcce6
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 44 deletions.
113 changes: 71 additions & 42 deletions docs/samples/calling/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ const muteElm = document.getElementById('mute_button');
let base64;
let audio64;
let call;
let callTranferObj;
let callTransferObj;
let broadworksCorrelationInfo;
let localAudioStream;
let effect;
Expand Down Expand Up @@ -124,6 +124,11 @@ function getMediaSettings() {
return settings;
}

function updateCallControlButtons(callObject){
holdResumeElm.value = callObject.held ? 'Resume':'Hold'
muteElm.value = callObject.muted ? 'Unmute':'Mute'
}

function getAudioVideoInput() {
const deviceId = (id) => devicesById[id];
const audioInput = getOptionValue(audioInputDevicesElem) || 'default';
Expand Down Expand Up @@ -247,11 +252,9 @@ async function initCalling(e) {

calling.on('ready', () => {
console.log('Authentication :: Calling Ready');
registerElm.disabled = false;
callHistoryElm.disabled = false;
voicemailElm.disabled = false;
authStatusElm.innerText = 'Saved access token!';
registerElm.classList.add('btn--green');
callHistoryElm.classList.add('btn--green');
voicemailElm.classList.add('btn--green');
dndButton.classList.add('btn--red');
Expand All @@ -263,6 +266,7 @@ async function initCalling(e) {

calling.register().then(async () => {
unregisterElm.classList.add('btn--red');
registerElm.classList.add('btn--green');
registerElm.disabled = false;

callingClient = window.callingClient = calling.callingClient;
Expand Down Expand Up @@ -342,7 +346,7 @@ function createDevice() {
calling.webex.internal.device.url !== ''
? `Registered, deviceId: ${deviceInfo.mobiusDeviceId}`
: 'Not Registered';
// unregisterElm.disabled = false;
unregisterElm.disabled = false;
});

// Start listening for incoming calls
Expand All @@ -364,6 +368,7 @@ function createDevice() {
makeCallBtn.disabled = false;
endElm.disabled = true;
muteElm.value = 'Mute';
holdResumeElm.value = 'Hold';
answerElm.disabled = true;
});

Expand All @@ -388,50 +393,76 @@ function endCall() {
makeCallBtn.disabled = false;
endElm.disabled = true;
muteElm.value = 'Mute';
holdResumeElm.value = 'Hold'
imageElm.removeChild(img);
}

function endSecondCall() {
callTranferObj.end();
transferDetailsElm.innerText = `${callTranferObj.getCorrelationId()}: Call Disconnected`;
callTransferObj.end();
transferDetailsElm.innerText = `${callTransferObj.getCorrelationId()}: Call Disconnected`;
callTransferObj = null
endSecondElm.disabled = true;
muteElm.value = 'Mute';
transferElm.innerHTML = 'Transfer';
updateCallControlButtons(call)
if (call.muted){
localAudioStream.outputStream.getAudioTracks()[0].enabled = false
}
imageElm.removeChild(img);
}

function muteUnmute() {
muteElm.value = muteElm.value === 'Mute' ? 'Unmute' : 'Mute';

call.mute(localAudioStream);
if (callTransferObj){
callTransferObj.mute(localAudioStream)
}
else {
call.mute(localAudioStream);
}
}

function holdResume() {
const elem = document.getElementById('hold_button');

call.on('held', (correlationId) => {
if (elem.value === 'Hold') {
callDetailsElm.innerText = 'Call is held';
elem.value = 'Resume';
}
});

call.on('resumed', (correlationId) => {
if (elem.value === 'Resume') {
callDetailsElm.innerText = 'Call is Resumed';
elem.value = 'Hold';
}
});

call.doHoldResume();
if (callTransferObj){
callTransferObj.on('held', (correlationId) => {
if (holdResumeElm.value === 'Hold') {
callDetailsElm.innerText = 'Call is held';
holdResumeElm.value = 'Resume';
}
});

callTransferObj.on('resumed', (correlationId) => {
if (holdResumeElm.value === 'Resume') {
callDetailsElm.innerText = 'Call is Resumed';
holdResumeElm.value = 'Hold';
}
});
callTransferObj.doHoldResume()
}
else{
call.on('held', (correlationId) => {
if (holdResumeElm.value === 'Hold') {
callDetailsElm.innerText = 'Call is held';
holdResumeElm.value = 'Resume';
}
});

call.on('resumed', (correlationId) => {
if (holdResumeElm.value === 'Resume') {
callDetailsElm.innerText = 'Call is Resumed';
holdResumeElm.value = 'Hold';
}
});
call.doHoldResume();
}
}

function deleteDevice() {
line.deregister();
line.on('unregistered', () => {
console.log("unregistered success");
registrationStatusElm.innerText = 'Unregistered';
})
registerElm.disabled = false;
// unregisterElm.disabled = true;
unregisterElm.disabled = true;
}

function populateSourceDevices(mediaDevice) {
Expand Down Expand Up @@ -551,37 +582,40 @@ async function getCallQuality() {
}

function commitTransfer() {

const digit = transferTarget.value;

transferElm.disabled = true;

if (transferOptionsElm.options[transferOptionsElm.selectedIndex].text === 'Consult Transfer') {
callTranferObj = line.makeCall({
call.doHoldResume();
transferDetailsElm.innerText = `Placed call: ${call.getCorrelationId()} on hold and dialing Transfer target`;

callTransferObj = line.makeCall({
type: 'uri',
address: digit,
});

callTranferObj.on('remote_media', (track) => {
updateCallControlButtons(callTransferObj)
callTransferObj.on('remote_media', (track) => {
document.getElementById('remote-audio').srcObject = new MediaStream([track]);

transferDetailsElm.innerText = `Got remote audio`;
});

callTranferObj.on('established', (correlationId) => {
callTransferObj.on('established', (correlationId) => {
transferDetailsElm.innerText = `${correlationId}: Transfer target connected`;
endSecondElm.disabled = false;
transferElm.innerHTML = 'Commit';
transferElm.disabled = false;
});

callTranferObj.on('disconnect', (correlationId) => {
callTransferObj.on('disconnect', (correlationId) => {
endSecondElm.disabled = true;
callTranferObj = null;
callTransferObj = null;
});

callTranferObj.dial(localAudioStream);
callTransferObj.dial(localAudioStream);

transferDetailsElm.innerText = `Dialing Transfer target`;
} else {
console.log(`Initiating blind transfer with ${digit}`);
call.completeTransfer('BLIND', undefined, digit);
Expand All @@ -593,17 +627,12 @@ function initiateTransfer() {

transferInitiated = true;
if (!call.isHeld()) {
call.doHoldResume();

call.on('held', (correlationId) => {
transferDetailsElm.innerText = `Placed call: ${call.getCorrelationId()} on hold`;
commitTransfer();
});
} else {
transferDetailsElm.innerText = `Transferring call..`;
if (callTranferObj) {
if (callTransferObj) {
console.log(`Completing consult transfer with ${digit}`);
call.completeTransfer('CONSULT', callTranferObj.getCallId(), undefined);
call.completeTransfer('CONSULT', callTransferObj.getCallId(), undefined);
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions docs/samples/calling/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,8 @@ <h2 class="collapsible">Authentication</h2>
</p>
<div class="u-mv">
<div>
<button id="registration-register" type="button" onclick="createDevice()" class="btn-code">register</button>
<button id="registration-unregister" type="button" onclick="unregister()" class="btn-code">unregister</button>
<button id="registration-register" type="button" onclick="createDevice()" class="btn-code" disabled>register</button>
<button id="registration-unregister" type="button" onclick="unregister()" class="btn-code" disabled>unregister</button>
</div>
<pre id="registration-status">Not Registered</pre>
</div>
Expand Down

0 comments on commit 59fcce6

Please sign in to comment.