Permalink
Fetching contributors…
Cannot retrieve contributors at this time
256 lines (234 sloc) 8.76 KB
<!DOCTYPE html>
<!--
* Copyright 2017 Unify Software and Solutions GmbH & Co.KG.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
-->
<html lang="en">
<head>
<title>Circuit JS-SDK</title>
<style>
body {
font-family: sans-serif;
font-size: 14px;
}
section { padding-top: 20px; }
input { margin-right: 10px; }
button {
margin-right: 10px;
}
pre {padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
.error { color: red; }
#output span { color: blue; }
#errorMessage {
margin-top: 10px;
color: red;
}
#dtmf button {
background: white;
width: 40px;
height: 30px;
margin-right: 0px;
border-style: solid;
}
#dtmf button:hover {background: #eee;}
#dtmf button:active {background: #ddd;}
#dtmf button:focus {outline:0;}
</style>
<!-- Temporary use a private circuit.js with a fix for telephony until 1.2.4501 is released -->
<script src="https://dl.dropbox.com/s/x23gh6n22ng2x0l/circuit.js?dl=0"></script>
</head>
<body>
<h3>Telephony call</h3>
<div>
Make outgoing phone calls to any regular telephone. Telephony Connector needs to be setup for your tenant.<br>
Use this page with https to allow access to your microphone.
</div>
<div id="mainWrapper" style="display: none">
<section id="domainSection">
<span>Connect to:</span>
<select id="domain">
<option value="circuitsandbox.net">circuitsandbox.net</option>
</select>
</section>
<section id="connectSection">
<button id="logon" onclick="logon()" style="">Logon</button>
<button id="logout" onclick="logout()" style="display: none">Logout</button>
</section>
<section>
<input type="text" id="number" value="81 (804)222-1111"/>
<button onclick="call()" id="callButton">Call</button>
<button onclick="endCall()" id="endCallButton" style="display: none">End call</button>
</section>
<section>
<div id="dtmf">
<div>Send DTMF Tones:</div>
<div><button onclick="dtmf('1')">1</button><button onclick="dtmf('2')">2</button><button onclick="dtmf('3')">3</button></div>
<div><button onclick="dtmf('4')">4</button><button onclick="dtmf('5')">5</button><button onclick="dtmf('6')">6</button></div>
<div><button onclick="dtmf('7')">7</button><button onclick="dtmf('8')">8</button><button onclick="dtmf('9')">9</button></div>
<div><button onclick="dtmf('*')">*</button><button onclick="dtmf('0')">0</button><button onclick="dtmf('#')">#</button></div>
</div>
</section>
<section id="output">
<div>Connection state: <span id="logonState">Disconnected</span></div>
<div>Call state: <span id="callState"></span></div>
<div>Conversation ID: <span id="convId"></span></div>
<div>Call ID: <span id="callId"></span></div>
</section>
</div>
<span id="errorMessage" style="display: none"></span>
<audio id="remoteAudio" autoplay="autoplay"></audio>
<script>
var _client;
var _localUser;
var _conversation;
var _call;
var $domain = document.getElementById('domain');
var $number = document.getElementById('number');
var $logonButton = document.getElementById('logon');
var $logoutButton = document.getElementById('logout');
var $logonState = document.getElementById('logonState');
var $remoteAudio = document.getElementById('remoteAudio');
var $callButton = document.getElementById('callButton');
var $endCallButton = document.getElementById('endCallButton');
var $callState = document.getElementById('callState');
var $convId = document.getElementById('convId');
var $callId = document.getElementById('callId');
var $errorMessage = document.getElementById('errorMessage');
if (typeof Circuit === 'undefined') {
$errorMessage.textContent = "Could not load SDK (circuit.js)";
$errorMessage.style.display = 'block';
} else if (!Circuit.isCompatible()) {
$errorMessage.textContent = "Sorry, your browser is not supported. Chrome works :)";
$errorMessage.style.display = 'block';
} else {
document.getElementById('mainWrapper').style.display = 'block';
}
function resetCallUI() {
$callState.textContent = '';
$callId.textContent = '';
$convId.textContent = '';
$callButton.style.display = '';
$endCallButton.style.display = 'none';
$remoteAudio.src = '';
}
function setCallUI(call) {
_call = call;
$convId.textContent = _call.convId;
$callState.textContent = _call.state;
$callId.textContent = _call.callId;
$callButton.style.display = 'none';
$endCallButton.style.display = '';
if (_call.isEstablished) {
$remoteAudio.src = _call.remoteAudioUrl;
}
}
function addClientEventListeners() {
if (_client) {
_client.addEventListener('connectionStateChanged', function onConnectionStateChanged(evt) {
console.log('Received connectionStateChanged event - state = ', evt.state)
$logonState.textContent = evt.state;
});
_client.addEventListener('callStatus', function (evt) {
if (_call && _call.callId === evt.call.callId) {
console.log('Received callStatus event - call = ', evt.call)
setCallUI(evt.call);
}
});
_client.addEventListener('callEnded', function (evt) {
if (_call && _call.callId === evt.call.callId) {
console.log('Received callEnded event - call = ', evt.call)
_call = null;
resetCallUI();
}
});
}
}
function logon() {
if (_client) {
return;
}
_client = new Circuit.Client({
domain: $domain.value,
client_id: '78cafde2f6854ad5ad80a67c532687bc',
scope: 'ALL' // Asking for ALL permissions because all these examples use the same domain
});
addClientEventListeners();
_client.logon().then(function (user) {
_localUser = user;
$domain.disabled = true;
$logonButton.style.display = 'none';
$logoutButton.style.display = '';
}).catch(function (e) {
console.error(e);
alert('Unable to logon. Error: ' + e);
_client.removeAllListeners();
_client = null;
});
}
function logout() {
if (!_client) {
return;
}
_localUser = null;
_client.logout();
_client.removeAllListeners();
_client = null;
$domain.disabled = false;
$logonButton.style.display = '';
$logoutButton.style.display = 'none';
$logonState.textContent = 'Disconnected';
}
function call() {
if (_call) {
return;
}
if (!_client || !_localUser) { return alert('Caller is not logged in'); }
if (!$number.value) { return alert('Number missing'); }
var mediaType = {audio: true, video: false};
_client.dialNumber($number.value, null, mediaType)
.then(setCallUI)
.catch(function (err) {
alert('Error initiating a call with ' + $number.value + '. ' + err);
console.error(err);
});
}
function dtmf(digit) {
if (!_client || !_localUser) { return alert('Caller is not logged in'); }
if (!_call) { return alert('No call in progress'); }
var mediaType = {audio: true, video: false};
_client.sendDigits(_call.callId, digit)
.catch(function (err) {
alert('Error sending DTMF digits. ' + err);
console.error(err);
});
}
function endCall() {
if (_call) {
_client.endCall(_call.callId).then(function () {
console.log('Successfully ended call');
_call = null;
resetCallUI();
});
}
}
resetCallUI();
</script>
</body>
</html>