JavaScript VoIP developers 101

Part 1: JavaScript example on making and accepting VoIP calls

Study the following article to get more information about doing basic tasks in the Ozeki Phone System by using your JavaScript application. This guide presents how to receive and initiate voice calls and helps you to build more advanced projects.

Part 2: Voice call between a webbrowser and a VoIP phone
Part 3: Voice call between two webbrowsers
Part 4: Video call between two webbrowsers
Part 5: How to build a web based voice conference system
Part 6: Build a live chat application
Part 7: Create a heads up display screen (Part 1)
Part 8: Create a heads up display screen (Part 2)

1. What you need

2. Get started

  • Create a Webphone outside line in Ozeki Phone System
  • Get IP address and port of your PBX (e.g. http://ozekixepbx.ip:7777/)
  • Create a html document
  • Add reference to WebphoneAPI
    (e.g. <script type="text/javascript" src="http://ozekixepbx.ip:7777/WebphoneAPI"></script>)

User manual

The Ozeki Phone System makes it possible to connect the customers and the appropriate extensions together through a fully customizable WebPhone. It can be done by using your PBX and the configurable dial plan rules. For this purpose you only need to install a Webphone outside line in the Ozeki Phone Sytem XE and add the required routing rule. If the default dial plan rule has been added, no need to specify the called number before making a call. In addition, it is also possible to dial a previously installed extension or an outside line number directly by entering its telephone number. How to setup a Webphone outside line

For using WebPhoneAPI a webserver is essentially needed on which your written code will be executable. Any webserver can be used, just select one and download it. In this example Wampserver and Apache was used. After installing WampServer, you need to modify the 'Listen 80' value in the httpd.conf file belonging to Apache in order to avoid port collision. Rewrite it to 'Listen 8080' (or to any other number that is not used by other applications). Do the modification then restart the service. After that open the folder where you have installed Wamp then select the 'www' folder. Here create a 'WebPhoneAPIExample.html' file with the following content: 

	<!DOCTYPE html>
	<!-- Important: This file is have to be hosted on a web server (e.g. Apache,IIS etc.)-->
	<html>
	<head>
		<script type="text/javascript">
	
		</script>
	</head>
	<body>
	</body>
	</html>
Code example 1 - XML codes to using Wampserver

The JavaScript code which you will write needs to be placed between <script> </script> tags.

Implementation

Before developing JavaScript, reference the WebphoneAPI JavaScript file into your source. Place the following row directly after the opening <head> tag: 

<script type="text/javascript" 

src="http://ozekixepbx.ip:PBX_ServerPort/WebphoneAPI"></script>
Code example 2 - XML codes to complete <head> tag

In this script the 'ozekixepbx.ip' and the 'PBX_ServerPort' needs to be the server address and port number of the Ozeki Phone System configured previously. The default port number is 7777.

First check if an online extension is available on the other side of the line. For this purpose, call the following function ensured by OzWebClient. 

OzWebClient.checkWebphoneState(serverAddress, webphoneId, webphoneStateReceived);
Code example 3 - Function to check extensions

Here you need to specify the IP address of the Ozeki Phone System and the ID of a Webphone Outside Line installed previously. The third parameter of the function is the name of a subscriber function that looks like this: 

function webphoneStateReceived(info) {
   if (!info.isAvailable)
		return;

   OzWebClient.onConnectionStateChanged(connectionStateChanged);
   OzWebClient.connect(serverAddress, webphoneId);
}
Code example 4 - Javascript codes to Function which subscribe to check the state

The function above shows if an extension is available. Before connecting, you need to subscribe to the events of onConnectionStateChanged then call the OzWebClient.connect method. The subscriber connectionStateChanged function can be seen below: 

function connectionStateChanged(info) {
   if (info.State == ConnectionState.ACCESS_GRANTED)
       isConnected = true;
   else
       isConnected = false;
}
Code example 5 - Function which subscribe to the connection state change event

After you have done the preparations, see how to receive an incoming call and make an outgoing call.

3. Make outgoing voice calls

After connecting to the server, call the pickup() function in order to initiate a call. 

function pickUp() {
	if (isConnected) {
		call = OzWebClient.createCall(calledNumber);
		call.onCallStateChanged(callStateChanged);
		call.start();
	}
}
Code example 6 - Function to pick up calls

Define the already existing call object with the new object which was given by OzWebClient.createCall(calledNumber). After dialling, the called number or the number which was associated to the webphone (if you used default routing rule) will ring.
You can get information about your call in callStateChanged. 

function callStateChanged(state){
	console.log("Actual call state is:" + state);
}
Code example 7 - Function to get information about actual state of the call

The hangUp method is to reset the call, so it quits the voice call, deletes call object and changes the necessary flags. 

function hangUp() {
    if (call) {
        call.hangUp();
        call = null;
    }
    isInCall = false;
}
Code example 8 - Function to hang up the call

4. Receive incoming voice calls

Answering an incoming call is so much easier. You only need to insert a row at the end of webphoneStateReceived method. 

OzWebClient.onIncomingCall(onIncomingCall);
Code example 9 - Javascript codes to the incoming calls commands

Finally, write onIncomingCall function so you can decide what to do with incoming calls. 

function onIncomingCall(incomingCall) {
    incomingCall.accept();
    //incomingCall.reject();
}
Code example 10 - Function for handling of incoming call

5. Create a more advanced project

The Ozeki Phone System offers much more options for JavaScript developers. You can interact with existing calls, control and configure the PBX, you can introduce new communication techniques and media formats.
For a complete list of JavaScript commands, check out: JavaScript API reference book

If you have any questions or need assistance, please contact us at  info@ozekiphone.com

More information