info@voip-sip-sdk.com Tel: +36 1 371 0150

How to add a Flash SIP softphone to a web application

Explanation

Prerequisities

Download: 04_CMS_SIP.zip

This article is a guide that shows you how you can add a Flash SIP softphone solution to your web application with the background support of Ozeki VoIP SIP SDK. The example program will show how you can connect JavaScript and Flash function calls together.

Introduction

Did you know that there is simple way to increase the effectiveness of your company and decrease both your and your customers' costs at the same time? Do you think that your customers would appreciate if they could call you directly from their web browser and did not even have to pay for the call? Do you think that your company could be able to outpace the competitors with such service? Then you are exactly at the right place.

Ozeki provides you the solution for all above mentioned questions. It is called Ozeki MediaGateway SDK. This SDK provides all the support you need to improve your company with the most effective, most comfortable and most innovative communicational system, webphone technology (Figure 1).


Figure 1 - Flash softphone integration with JavaScript

The webphone technology is a software solution that is embedded in a web site and can be used for basic communicational purposes. It can be a click-to-call solution that allows the web site visitor to call a preset number directly from the web browser. The phone will, of course, ring in your service desk office (or in any place you want).

But the webphone provides more that only click-to-call voice communication. It can also be used for video phoning and it can be a fully featured softphone too that means the customer can dial more than one numbers from the web site (you can, of course limit the numbers that can be called).

Now, you surely want to know what you need to do if you want to have one of these extraordinary communication softwares. Well, you will need to get Ozeki VoIP SIP SDK, make some basic settings, call some provided methods and voila, you will have your own webphone solution.

You don't believe that it can be that simple? Read through the programming guides and believe your own eyes. This guide will show you how you can add your softphone to a web application, but if you want to know more about the possible solutions you can build with Ozeki VoIP SIP SDK, scroll down and check your possibilities at the Related Pages section.

This guide assumes that you are familiar with the basic terms concerning webphone and softphone technology. If you have doubts about these topics, please check the sites listed in the Related Pages section before you read this article further.

In order to make your programming work as simple as it can be, the example program of this article uses Ozeki VoIP SIP SDK, so if you do not want to write all the background methods that means codec support, transfer protocols, device drivers, etc. it is strongly recommended to get Ozeki VoIP SIP SDK before you start programming.

The background support will be provided by Ozeki VoIP SIP SDK

The example program this guide introduces uses the extraordinary background support and tools provided by the Ozeki VoIP SIP SDK that is part of Ozeki VoIP SIP SDK. If you want to have a webphone or softphone solution that can be written this simply and can mean an innovative improvement for your company, you only need to get Ozeki VoIP SIP SDK now.

Ozeki VoIP SIP SDK provides support for both client- and server-side webphone applications and as for the client-side it supports Silverlight and Flash solutions too. This guide will use the server-side SDK and the Flash client-side support, but the server can handle both Silverlight and Flash clients without any change in the code.

In order to make your work even easier, you can use the same server you have written for the web to SIP communication earlier. This server is introduced in the Flash SIP softphone for web to SIP calls article.

The essential settings for the JavaScript-Flash communication

The JavaScript functions can be defined within a html page or can be put into separate .js files. If you want to write understandable code, you will at some point consider the usage of separate .js files for the function groups that belong together.

In the case of this example, the softphone.js will contain the JavaScript code for the client solution. The Adobe Flash Builder provides an index.template.html file that is for testing your application and this will be the one where you will need to define the new GUI.

As the index.template.html file will not contain the JavaScript functions for the softphone functionality, you have to make sure that the functions will be available for your Flash client. The line that is shown in Code 1 will do this trick for you. You will need to add this line in your html file and it will ensure4 that you will be able to use all the functions you need from softphone.js (or from other .js files for that matter).

params.allowscriptaccess = "always";

Code 1 - This line allows your client to call functions from separate .js files

When you want to use Flash technology and JavaScript at the same time, you have to ensure that the JavaScript functions can call the functions you have written in your Flash program. Code 2 shows the code line that should be added to your Flash program to allow the Flash the definition of the methods, the JavaScript code will call.

This code line imports the namespace that contains the tools for defining the callback methods for JavaScript in Flash.

import flash.external.ExternalInterface;

Code 2 - This is an essential namespace import for allowing the JavaScript to call your Flash functions

The ExternalInterface.addCallback function call defines, what Flash functions will be available for the JavaScript functions to call in what names. The JavaScript functions will only be able to call those functions you defined as a callback function like Code 3 shows.

ExternalInterface.addCallback("btnCall_Click", btnCall_Click);
ExternalInterface.addCallback("btnStopCall_Click", btnStopCall_Click);

Code 3 - You have to specify in your Flash code what functions can be called from the JavaScript functions

These above mentioned settings are essential to make before you start to build your client application. The Flash functions will be exactly the same as in case of the simple Flash softphone from the Flash SIP softphone for web to SIP calls article.

The only difference in this client will be that the GUI will not be defined in Flash but in HTML code (though it will look similar) and the EventHandler functions will not be called directly but by JavaScript functions.

The softphone GUI can be built in HTML

The HTML is an easy-to-use language that you can use for GUI building too. Actually, you can build similar GUI solutions in HTML that you have created in Flash. If you read the next paragraphs carefully you will surely be able to build a softphone GUI similar to the one in Figure 2.


Figure 2 - A simple HTML-defined softphone GUI can look like this one

A first, you will need to examine the GUI carefully and then you will see what structure you will need to build. The HTML will be interpreted in line order, so you need to define the GUI elements in the right order if you do not want to get some mixed-up layout.

Figure 3 shows the basic structure of the softphone GUI. The HTML page you use here will use the same style sheet file (phone.css) as the one that was defined in the How to add a Silverlight SIP softphone to a web application article.

You can define your own .css file with the settings you need. For example, if you do not like the color of the buttons on the softphone in Figure 2 you can set the background-color attribute of the .phoneButton element to the color you like.

The structure Figure 3 shows can be directly written in HTML code. You will need to use nested HTML tags to define the containing connection between the GUI elements. Each boxes in Figure 3 represent a GUI element and the lines represent the connection between them.

When a GUI element is connected to another that is left to it, it means that the GUI element should be defined in a nested HTML tag of the left one.


Figure 3 - The structure of the HTML softphone GUI definition

The HTML code uses <div> tags for defining the GUI. The div classes and ids are got from the phone.css style sheet file. Code 4 contains the HTML code fort the softphone display that consists of three labels. You can see the nesting relation of the display and the labels.

You can see that the text attributes can be modified within the label tag and the text itself will be written between the start and end tags.

Code 4 - The HTML definition of the softphone display

The softphone keypad contains the two function buttons for starting and ending a call and the numeric keypad with the numbers 0-9 and the * and # buttons.

As you can read from the structure in Figure 3, the HTML code you should write will distinguish between the first keypad row that only contains two buttons and the next four rows that contain the numeric buttons.

Code 5 shows the HTML definition of the first keypad row with the Call and End call buttons. Some attributes are set according to the phone.css but the definition also contains information about the EventHandler functions of the onclick event of the buttons.

The EventHandler functions for the buttons are defined in the softphone.js JavaScript file that will be described later in this article.

Code 5 - The HTML definition of the Call and End call buttons of the keypad

The numeric keypad contains four rows each with three buttons on it. Code 6 shows how a numeric keypad row can be defined in HTML. You can see that all buttons use the same EventHandler function with different parameters. The parameter is the number the button holds.

The keypad buttons' attributes all come from the phone.css, in this case all buttons are enabled so there is no need to set that attribute as enabled is the default value for the HTML buttons.

Code 6 - The HTML code that defines a row of the numeric keypad

Knowing all the above mentioned information you can easily create your own softphone GUI (or any other GUI for that matter) in HTML code. If you are finished with GUI building, you can start the JavaScript code that will implement the main webphone activities.

The JavaScript code for the webphone

If you want to use the functions of a separate JavaScript file from a HTML code, you will need to define the .js file in the code with the line that is shown in Code 7. You can use more than one .js references in your HTML file, but you need to add all of them to your code the same way.

<script type="text/javascript" src="softphone.js"></script>

Code 7 - You need to specify the JavaScript files you want to use in your HTML code

The next sections will show the functions that are implemented in the softphone.js file. These JavaScript functions will hold the webphone functionality and they will communicate with the Flash environment as well as with the server.

Some of the JavaScript functions only set the GUI labels for example according to the connection state like the function in Code 8.

function ConnectionStateChanged(data) {
    document.getElementById("lblinfo").innerHTML = data;
}

Code 8 - This JavaScript method changes the info label according to the connection state

The SetReadyStatus function (Code 9) modifies two labels on the GUI according to the information about the client that is ready for calls or not. It sets the info label and the client ID on the display.

function SetReadyStatus(info, clientID) {
    document.getElementById("lblinfo").innerHTML = info;
    document.getElementById("lblclientId").innerHTML = clientID;
}

Code 9 - This function modifies the info and the client ID labels is the client is ready for calls

The UpdateInfo function modifies the info label on the softphone display according to the data it gets from the caller environment (Code 10).

function UpdateInfo(data) {
    document.getElementById("lblinfo").innerHTML = data;
}

Code 10 - This JavaScript function updates the info label on the softphone display

As you have seen in the HTML definition of the buttons, the numeric keypad buttons (including the * and # buttons) use the same EventHandler function. This function gets its parameter from the button's onclick event and only appends the pressed button's number to the dialed number that is shown on the display (Code 11).

function Keypads_OnClick(data) {
    document.getElementById("lblNumber").innerHTML += data;
}

Code 11 - This is the EventHandler function for the numeric keypad buttons

The dialed number label should be sometimes erased from the program. You could also put a new button onto the softphone GUI that erases this label but in this example the label will be set to empty in the background.

function ResetDialNumber() {
    document.getElementById("lblNumber").innerHTML = "";
}

Code 12 - This JavaScript function empties the dialed number on the display

The EventHandler for the Call button is shown in Code 13. This function calls the btnCall_Click function of the Flash program with the dialed number parameter that it got from the display.

function Call_Click() {
        var control = document["Main"];
        control.btnCall_Click(document.getElementById("lblNumber").innerHTML);
}

Code 13 - This is the JavaScript EventHandler for the Call button

The End call button also needs and EventHandler. This function only calls the previously set EventHandler function of the Flash code (Code 14).

function CallStop_Click() {
    var control = document.getElementById("Main");
    control.btnStopCall_Click();
}

Code 14 - The End call button press will be redirected to the Flash code

The last function in the JavaScript file is the one that modifies the state of the Call and End call buttons. It decides on enabling or disabling these buttons according to the actual state of the environment. For example the Call button can only be enabled if there is a number to dial or there is an incoming call.

function SetActionButtonState(modify, btnCallIsEnable, btnCallStopIsEnable) {

    var callControl = document.getElementById("callButton");
    var stopControl = document.getElementById("endCallButton");

    if (modify == 0) {

        callControl.disabled = !btnCallIsEnable;
        stopControl.disabled = !btnCallStopIsEnable;
    }
    else if (modify == 1) {
        callControl.disabled = !btnCallIsEnable;
    }
}

Code 15 - This function changes the state of the action buttons

Now, you are completely familiar with all the functions that are needed for the JavaScript activities. The last step should be modifying the Flash code in order to be able to have a properly working webphone.

Some basic changes are needed in the Flash code too

In this example the GUI was built in HTML code instead of Flash so the functions of the previous Flash softphone have to be modified in some places. The modification will be needed where the Flash code referred to a GUI element.

As the Flash cannot modify the GUI elements defined in HTML directly, it will need to call the JavaScript functions to do it instead. Code 16 shows the exact instruction that will be needed.

For every label modification on the GUI you will need to write an ExternalInterface.call instruction. The first parameter of the call function is the name of the JavaScript function you want to call (you can check the available functions above). The next optional parameters specify the parameters for the called JavaScript functions if it has any.

The easiest way to ensure that all the label modifications are changed in your Flash code is that you delete the GUI definition from the previously used Flash code. The only modifications you need to do is the label modifying calls and the settings for the callback functions that was mentioned before.

ExternalInterface.call("SetActionButtonState",0,isReady,isReady);

Code 16 - This code line will call the SetActionState function in the softphone.js script file

If you have changed all the label modifying calls, your webphone is ready to use. Now, you are fully capable of writing a Flash softphone and adding it to a web application.

This guide showed you the basics of adding a Flash SIP softphone to a web application. It showed in details how Flash and JavaScript programs can communicate and what basic settings have to be made in order to have your softphone work properly.

Now, as you are fully familiar with all terms concerning webphones and softphones, you can explore the further extraordinary features of Ozeki VoIP SIP SDK to find the best solution for your communication related wishes.

If you have any questions or need assistance, please contact us at info@voip-sip-sdk.com

You can select a suitable Ozeki VoIP SIP SDK license for your project on licensing page

Related Pages

Operating system: Windows 10 Windows 8, Windows 7, Vista, 200x, XP
System memory: 512 MB+
Free disk space: 100 MB+
Development environment: Visual Studio 2012, Visual Studio 2010, Visual Studio 2008, Visual Studio 2005, Adobe Flash Builder 4.5
Programming language: C#.NET, Adobe Flash
Supported .NET framework: .NET Framework 4.5, .NET Framework 4.0, .NET Framework 3.5 SP1
Software development kit: OZEKI VoIP SIP SDK(Download)
VoIP connection: 1 SIP account

Ozeki Cookie Policy
Ozeki Informatics Ltd uses cookies to provide you the best experience on this website. The further use of the website will be considered as an agreement to the use of cookies. For more information read this website.

Cookies are enabled You are browsing the optimized version of this website. For more information read this website.