API Version: Development

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.

/* Grab references to DOM elements */
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.

/* Grab the first owned device for the logged in user */
var myPhone = IPCortex.PBX.owned[0];
/* Assume the phone is a keevio phone and enable it for WebRTC */
myPhone.enableRTC();
/* Wait for new call events to arrive */
myPhone.addListener('update', function (device) {
    /* If there are multiple calls, ignore all except the first */
    if (device.calls.length > 0) {
        /* If the call is up and has media, attach it to the video tag */
        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) {
    /* Clean up input box content */
    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) {
    /* The hangup button hangs up the first call if it exists */
    if (myPhone.calls.length > 0)
        myPhone.calls[0].hangup();
});