Number Dialing
Downloads
Explained
This is a trivial example of dialing a number that does not attempt to show any call visibility or handle errors. It simply dials the call and connects it to the media handlers available in the browser.
The example uses keevio phone via the API as an interface to WebRTC in order to emulate a VoIP phone.
The HTML used for this project is as follows:
<!doctype html>
<html>
<head>
<title>IPC Dialer</title>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="https://pabx.hostname/api/wrapper_kphone.whtm"></script>
<style>
body {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
}
video {
display: none;
}
</style>
</head>
<body>
<video id="phone" autoplay></video>
<input type="text" id="number" size="20" placeholder="Number to dial"></input>
<button type="button" id="call">Call</button>
<button type="button" id="hangup">Hangup</button>
<script src="calling.js"></script>
</body>
</html>
Note the use of /api/wrapper_kphone.whtm
which automatically loads 3 libraries needed to use keevio phone. Also the use of a <video>
tag; The video tag is in fact a media tag and handles only audio streams in this example, so is hidden using a display: none;
CSS rule.
As per most of these samples, it is assumed that the initial
login()
and
startFeed()
calls have been run and this code is not included below (see
Common sample code).
First we use
document.getElementById()
to grab references to the various DOM elements that we need to use. This step can be done in numerous ways, using libraries such as
jQuery, but the native browser methods are shown here.
var videoTag = document.getElementById('phone');
var numberTag = document.getElementById('number');
var callTag = document.getElementById('call');
var hangupTag = document.getElementById('hangup');
Once the elements are loaded, we need to discover from the API what
Device objects are available to the logged in user. In this crude example, we will simply assume that the first of our owned devices from the
IPCortex.PBX.owned
array is our keevio phone line, and will call
Device.enableRTC()
on that line to cause it to register and be able to make/take calls.
Next this code block adds an event listener to our keevio phone
Device so we receive update information about what calls are in progress. This will include any calls that we dial so that we can attach the media to the
<video>
tag. For the purposes of keeping this simple, we are ignoring all
Call objects except the first one. This is done by providing a callback to run whenever the state of the Device changes (or is 'updated'). We must then filter the updates with an
if
statement to determine when a
mediaStream
is available and then try to attach it to the video tag using the
attachMediaStream
function from our modified version of
adapter.js
.
var myPhone = IPCortex.PBX.owned[0];
myPhone.enableRTC();
myPhone.addListener('update', function (device) {
if (device.calls.length > 0) {
if (device.calls[0].remoteMedia && device.calls[0].state !== 'dead')
attachMediaStream(videoTag, device.calls[0].remoteMedia[0]);
}
});
Now that the application attaches calls to the video tag, we need to provide a way for the user to actually dial/hangup a call. A small amount of input validation is done to allow only valid digits to be dialed. Again for simplicity, the hangup
button sends a hangup request to whatever appears to be the first call on the list. These methods use Device.dial()
and Call.hangup()
- Note that a call is started by dialing on a device, but that the call itself is used to hang-up.
numberTag.addEventListener('keyup', function(e) {
if ( numberTag.value.search(/[^0-9\*\#]/) != -1 )
numberTag.value = numberTag.value.replace(/[^0-9\*\#]/, '');
});
callTag.addEventListener('click', function(e) {
if ( !numberTag.value )
return;
myPhone.dial(numberTag.value);
numberTag.value = '';
e.preventDefault();
});
hangupTag.addEventListener('click', function(e) {
if (myPhone.calls.length > 0)
myPhone.calls[0].hangup();
});