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

How to add a Silverlight SIP softphone to a web application

Explanation

Prerequisities

Download: 04_SIP_CMS.zip

This article is a brief introduction to the basics of integrating a Silverlight SIP softphone solution into your web page. After reading this manual, you will know all the necessary tools and JavaScript scripts that are used for this solution.

Introduction

Our communication culture has gone through a great development during the last decades. We arrived from the postal mail to the direct communication through the Internet. Today we assume that we can connect and communicate with anyone by only using a computer and an Internet connection.
(Figure 1)


Figure 1 - You can use JavaScript for adding a Silverlight SIP softphone to your web application

It is natural that in the century of social networks and instant messaging the computer users want to reach all services from their browsers. If you have a company you, of course, want to provide the best solutions to your customers. These two wishes can be easily fulfilled by one ultimate solution that is the webphone.

If you are familiar with the terms softphone and webphone, you already know why it can be the innovation your company needs. If you want to know more about these subjects, you are suggested to visit the following sites:

This article assumes that you are familiar with the basic terms of the webphone technology and it will use the sample webphone applications built in the above mentioned guides to show you how easy it can be to put your webphone in your site.

You will need some basic background support

Before you start to build your webphone solutions, you will need some programs and SDK support to make your work easy. The sample program, you will see is written in C# language with the use of Visual Studio 2010 integrated development environment.

The sample webphone server uses the Ozeki VoIP SIP SDK that is part of the Ozeki VoIP SIP SDK. The Silverlight webphone client is based on the reference Ozeki SLClientSDK.dll that is a .dll for Silverlight client application support.

If you do not have these programs and SDK installed it is highly recommended to download and install them on your computer as without these you will not be able to use the sample program.

The sample program you will see in this guide is basically the web to SIP Silverlight softphone that was introduced in Silverlight SIP softphone for web to SIP calls guide. There will be some significant changes in the client's side.

The main change in this project is the use of the JavaScript language that will provide the functions for the calls and even for recording the calls that is a new feature in this solution. So, first of all, you will need to know more about JavaScript itself.

What is JavaScript and why should you use it?

JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.

JavaScript is primarily used in the form of client-side JavaScript, implemented as part of a Web browser in order to provide enhanced user interfaces and dynamic websites. This enables programmatic access to computational objects within a host environment.

JavaScript uses syntax influenced by that of C. JavaScript copies many names and naming conventions from Java, but the two languages are otherwise unrelated and have very different semantics. The key design principles within JavaScript are taken from the Self and Scheme programming languages

JavaScript is the only language available for having your website communicates with the browser and watch for events: clicks, double clicks, mouse enters, mouse exits, key presses, browser window sizing... the list goes on. If you need access to those events, you are in JavaScript territory.

This last main feature will be used in the sample program of this guide. You will see how to use JavaScript to make your webphone work in your page with writing some simple scripts.

The client-side solution will need some changes

The client-side application will need some basic changes if you want to use the former sample as you can do that. If you want to create a brand new client-side solution, do not forget to register the Ozeki SLClientSDK.dll to the project and set the server data properly.

This guide will show what major changes you will need if you use the previously built Silverlight SIP softphone solution. If you want to build your own application, you will need to check the basic steps in the Silverlight SIP softphone for web to SIP calls page and return to this page when the basic steps are done in that project.

You can choose between the html and the aspx

The Visual Studio provides a test html and a test aspx page for every Silverlight project. You can choose which page you want to modify when you build the GUI and write the functionality.

This sample program has both pages modified the same way so you can use any of them to test the example. The only essential thing to consider is that you will need to write both the GUI and the functionality in the same (or both) page(s) in order to have a properly working application.

You will need a style sheet for your web page

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).

CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The phone.css file that should be added to your project on the Solution Explorer panel contains the basic settings of the webphone GUI elements.

Code 1 shows how you can define a GUI button in a .css file by setting the size, color and other main properties of it. This code segment defines a keypad button with the basic properties.

.phoneButton
{
width: 55px;
height: 22px;
margin: 5px;
outline: 0;
border: 1px solid grey;
border-radius: 5px;

box-shadow: 1px 1px black;
text-shadow: 1px 1px black;
}

Code 1 - The definition of a keypad button in a .css file

You can define all the necessary GUI elements or even the basic properties of your fonts and texts that are shown on your site. This phone.css only defines the webphone GUI itself.

The user interface will be a new invention in HTML

The first basic step in case of the client application is already changed in case of this solution as the GUI itself will be build with a completely other technique. Previously you used the Silverlight GUI tools for your application, now this guide will show you how to get a similar GUI with the use of the HTML tools.

The previously used GUI looked like the one in Figure 2. Now this guide will show what html code will ensure a really similar GUI layout for you. You can use the previously defined .css file for this purpose.


Figure 2 - The Silverlight GUI softphone looked like this in the previous project

As the Silverlight panel will not contain the buttons and textboxes that were defined in the previous projects you can remove them from the GUI (if you modify the former project) but make sure you do not delete any of the EventHandler methods as this new example will use them, only not from the Silverlight environment but by JavaScript calls.

If you are familiar with the basics of HTML programming, the following section will be a piece of cake for you, but if you didn't write much html code before you will not find it difficult either.

The webphone GUI definition will be put into the HTML body and will be defined by <div> tags. The code will define the buttons given the class attribute defined in the phone.css file and set the handler function of the button's click event too (Code 2).

Code 2 shows how to define row of three keypad buttons in the html code. This code segment defines the first keypad row with the '1', '2' and '3' buttons. You can see that the onclick event will invoke the Keypads_OnClick function that will be defined in JavaScript with the parameter of the button's text information.

Code 2 - The html definition of a row of keypad buttons for the webphone GUI

Code 3 shows how to define the necessary labels that will show the notification and dialing information on the GUI.

Code 3 - The definition of a label on the webphone GUI in html

Code 4 is an example for defining the main function buttons (Call nad End Call) in the html code. These are also keypad buttons but they have a special ID that is also defined in the phone.css file.


Code 4 - The html definition of the Call button

As the html language is interpreted sequentially, you will need to define the GUI in the right order in order to get the layout you want. Figure 3 shows how the GUI elements should be defined in order to get the proper GUI shown in Figure 4.


Figure 3 - The html structure for the GUI elements

If you want to get a similar GUI layout like the one in Figure 4, you will need to define the phone itself first. The "phone" is a div id defined in the phone.css. This will be the main panel of the webphone GUI.

You will need to separate two main parts of the phone by defining two other div tags "display" and "keypad". These are also predefined div ids in phone.css.

The display will need to contain the labels you will use for notification and for displaying the dialed number. These will be needed to define next.

The "keypad" div will contain all the keypad buttons that you will need to define in the right order using the "row" div tag class. In case of the first keypad row, as it only contains two buttons the phone.css also defines a new id "firstRow" that will set the Call and end call buttons on the right place.


Figure 4 - The new html GUI looks similar to the Silverlight solution

After defining the GUI, you will need to write the JavaScript functions for the event handling as the GUI has set the onclick handlers before.

The JavaScript code that will make the GUI work

You can write a javscript script with the basic functions that will make the GUI work properly. These functions will call the methods that you defined as EventHandlers for the previous Silverlight softphone projects.

You will basically need the same methods that you had as EventHandlers in the previous projects. The connection information can be gotten from the labels of the GUI. The EventHandler functions will use these (Code 5)

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

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


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

Code 5 - The event handler JavaScript functions that use the labels on the display

The onclick events of the buttons were attached to some other event handler functions shown in Code 6. These functions use the formerly written methods you have in your application.

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

function Call_Click() {
    var control = document.getElementById("silverlightControl");
    control.Content.MainPage.btnCall_Click(document.getElementById("lblNumber").innerHTML);
}

function CallStop_Click() {
    var control = document.getElementById("silverlightControl");
    control.Content.MainPage.btnStopCall_Click();
}

Code 6 - Event handling for the keypad buttons

Event handling via JavaScript works similar to the previous solutions. In this case a user interaction on the GUI will invoke a javascript function that will send the proper message to the server that will invoke the client-side methods you have written before.

As the GUI itself is defined in html, the client-side methods need some basic changes in connection with the GUI elements. This mainly means that the part where you modified the GUI elements like textboxes on the GUI should be changed.

The main changes in the client-side functionality

The first main additions to the client main class are two using lines that are for the browser access. These are shown in Code 7.

using System.Windows.Browser;
using System.Windows.Media;

Code 7 - The client application needs two additional using lines

The dialing works a bit different from the previous solutions and the EventHandler methods will have different parameter lists. There is a new private property in the main client class that will store the dialed number (dialNumber) in a string. This will be the parameter for some EventHandlers.

If you take a look at Codes 8 and 9 you will see the significant but at the same time really basic changes that should be done in the code for having the proper functionality.

The two codes are different in the GUI element modification lines that enable and disable the function buttons on the GUI.

The SetActionButtonState JavaScript function provides the same modifications in enabling and disabling the buttons as in case of the former method but it works for the two buttons at the same time. That's why the first case in Code 9 only contains one SetActionButtonState call instead of the two set instructions in Code 8.

                 case PhoneState.Ready:
                    btnCall.IsEnabled = true;
                    btnStopCall.IsEnabled = true;
                    break;
                case PhoneState.InRinging:
                    btnCall.IsEnabled = true;
                    break;
                case PhoneState.OutRinging:
                    btnCall.IsEnabled = false;
                    break;
                case PhoneState.InCall:
                    btnCall.IsEnabled = false;
                    break;

Code 8 - The original code for call state changes

                case PhoneState.Ready:
                    HtmlPage.Window.Invoke("SetActionButtonState", 0, true, true);

                    break;
                case PhoneState.InRinging:
                    HtmlPage.Window.Invoke("SetActionButtonState", 1, true, true);
                    break;
                case PhoneState.OutRinging:
                    HtmlPage.Window.Invoke("SetActionButtonState", 1, false, true);
                    break;
                case PhoneState.InCall:
                    HtmlPage.Window.Invoke("SetActionButtonState", 1, false, true);
                    break;

Code 9 - The modified code for call state changes

This solution will be used in case of the textboxes too. When, for example, the former application has set the textbox Text for connection status to "Online", the new application will do it with the code line shown in Code 10.

HtmlPage.Window.Invoke("ConnectionStateChanged", "Online");

Code 10 - The simple textbox modification is a bit different from the previous examples

Do not forget to change every GUI element modifications according to this pattern or else your application will not work properly. However, if you deleted all the former GUI elements from the Silverlight panel, the former GUI element references will not be recognized by the Visual Studio, so you will see if you haven't modified some of these settings.

The greatest difference between this solution and the former applications is the handling of the numeric keypad. This new webphone client will not contain an EventHandler for the numeric keypad as it is handled in JavaScript.

The JavaScript function for numeric buttons puts the pressed number onto the display and when the Call button is pressed, the dialed number will be sent to the server. Therefore there is no need to handle the numeric keypad form the client main class, but the EventHandler for the Call and Stop Call events will be different.

In the previous solutions the Call and Stop Call EventHandlers got the sender and the event itself as a parameter. In this solution the Stop Call event can work without any parameters, and the Call event will be handled with a method that only gets one parameter, the dialed number that comes from the JavaScript function call as a string.

The JavaScript code for the Call button click is shown in Code 11. As it is seen the function will set the dialed number as a parameter in the call the proper client-side method (btnCall_Click) will be called with this parameter.

function Call_Click() {
    var control = document.getElementById("silverlightControl");
    control.Content.MainPage.btnCall_Click(document.getElementById("lblNumber").innerHTML);
}

Code 11 - The JavaScript function for handling the Call button click event

There is only one step before finishing this webphone solution that is the Silverlight microphone handling.

Solution for the greatest Silverlight problem

Microsoft Silverlight has a built-in security policy that requires a direct user interaction in order to have the multimedia peripherals that are the microphone and the camera enabled.

This policy can be explained with the protection Silverlight provides the user that nobody could start the camera or the microphone without the user's knowledge. This is an understandable but sometimes problematic solution.

In the case of this sample application the problem of microphone access will occur as there is no direct contact between the user and the Silverlight environment. As this sample uses the trial version of the Ozeki SDK, the sample solves this problem to set the Silverlight panel below the pop-up message about the trial version and licensing information and when the user clicks on the OK button, the Silverlight will detect it as a user interaction.

If you will use the full version of the Ozeki VoIP SIP SDK, you will be able to avoid this pop-up message and you will need to use some other solution in order to make the microphone enabled.

You can put a button on the Silverlight panel that indicates the microphone access, for example. The Silverlight environment can also store the information about the settings of a program, so if the user enabled the microphone once, the browser will most likely store this information and next time the microphone will start instantly.

Now you are fully trained and completely capable of creating your own softphone solution that is put on your web site. It is time to take a step forward and find out, what other extraordinary features Ozeki VoIP SIP SDK can provide to you.

This article has introduced you how to add a Silverlight SIP softphone solution to your web page. It has shown the basic differences between the former webphone solutions and the methods that were needed in this application.

This page was also a guide for building a webphone GUI in html code, using .css files and programming JavaScript functions that were the basic tools for adding the webphone to the web page.

If you have read through this article carefully, you are now familiar with all the necessary tools and methods for having your own webphone solution. Now it is time to explore your further possibilities with Ozeki VoIP SIP SDK and write the solutions that fulfill all your 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
Development environment: Visual Studio 2012, Visual Studio 2010, Visual Studio 2008, Visual Studio 2005
Programming language: C#.NET
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
System memory: 512 MB+
Free disk space: 100 MB+

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.