How to build a web-to-web VoIP application for Android mobile phones

Posted By:Simon Robert VoIPPosted Date:February 14, 2014Points:25
Category: XMLURL:http://www.dotnetspark.comThis article explains how to develop a webphone in XML that works in web browsers and it can run in the browser of Android mobile phones, too. It is communicating through RTMP protocol, this way bypassing the fact that many mobile service providers block the usage of SIP protocol inhibiting VoIP communication. This guide presents how to build the flash-based client side and the server side of the VoIP application.

How to build a web-to-web VoIP application for Android mobile phones

Introduction

Today we
can't talk about the internet without mentioning the VoIP technology, because
it is widely used by many applications, for example Skype and Viber uses VoIP
for transmitting the voice between the communicating partners and many
corporate solutions use it too e.g.: PBX-es and webphones. Nowadays most mobile
phones have an internet connection and it is wise to use this for communication
because we can spare money with it. If you are speaking through the internet
you don't have to pay minute charges, just the price of the internet service.

So I have
created a webphone that works in web browsers and it can run in the browser of
Android mobile phones too. It is communicating through RTMP protocol, this way
bypassing the fact that many mobile service providers block the usage of SIP
protocol that is the basis of VoIP communications. My application stands of two
parts a flash based client and a server.

Background

For
building the server side of the application I have used Microsoft Visual Studio
2010 that needs at least the .NET Framework 3.5 version to work, along with the
Ozeki VoIP SIP SDK. As for the client side I have used the Adobe Flash Builder
together with Flex 4.5.1 SDK version and the Adobe
flashplayer_11_7_plugin_debug for debugging the project. I have written the
server side in C# and the client side in MXML language.

Building the
client

To start
building the client you will need the Adobe Flash builder installed on your
computer together with Flex 4.5.1 SDK which has to be extracted to the SDK
folder of Flash builder. You are going to need a debugger for the flash player
too as I mentioned earlier.

When you
have everything ready, start with creating a new Flex project in the Flash
Builder. You will have to add the 4.5.1 Flex SDK version at the first page of
the new Flex project creation by clicking on the "Configure Flex SDKs." button.
A new window will appear where you have to click on the "Add." button and in
the next window click on "Browse." and select the folder of the extracted Flex
4.5.1 SDK then tick in the checkbox before the Flex 4.5.1 and click on OK and
on Next. You don't have to make changes in the "Server Settings" tab, just
click on "Next". On the last page you have to click on "Add SWC." and navigate
to the SDK folder or Ozeki VoIP SIP SDK and select "FlashClientSDK.swc". With
this you can finish the creation of the project and you can start to write the
application.

First of
all I have created the flash Graphical User Interface (GUI) of the application.
You can build it by either putting it together with your mouse from the
components of the design tab or you can write it as code. You can see the code
of the GUI below.

You can see
that I have created a variable for the connection of the client, two variables
for sending and receiving the stream media of the clients, one variable for
identifying the client itself and one for identifying the caller. Lastly I have
created a variable to handle the microphone and one for handling the process of
the call.

You can see
the code responsible for connecting the clients to the server next.

After the
clients have connected to the server their states are going to change from
"Offline" to "Online" or in case the connection failed to "Connection failed".
You can see the code responsible for this below.

As soon as
the client is connected to the server it will search for another client whom it
can call. If there is no other client the "Waiting fo other client" message
will appear on the phone otherwise the "Ready to call" message will be seen.
Basically you won't see the "Online" message after the client connects to the
server because one of these two messages will be shown.

The server
part of the application is made as a project in Microsoft Visual Studio 2010.
It is mainly written in C# language and partly in XML as you will see in the
followings. The server is a consol application that can handle different client
types. In our case it's going to be a flash type client.

You can see
the setting of the client type in the following XML code which can be found in
the App.config file of the project.

You can see
that the server shows how many days are left from the trial of Ozeki VoIP SIP
SDK that I am using for this application, moreover you can see the maximum
number of SilverLight and Flash client and that the server was successfully
started.

The server
has to handle the connection of clients, for this purpose I have written the
following method which writes the IP address of the connected client to the
consol and notifies the other clients about the connected client.

I have
created a webphone which is useful for companies to get in contact with their
customers easily. The customer only has to open the webphone in a browser, let
it be a normal web browser for PC or one for android phones then she/he only
has to click on call and an agent will answer it. It was quite simple to create
this application thanks to the Ozeki VoIP SIP SDK, because it has implemented
every communication protocol I used and so I didn't have to implement them
myself. I could concentrate on the development on the application and it made
my work much faster. Thanks to this I can recommend Ozeki VoIP SIP SKD to
anyone who is wishing to create VoIP applications without the need of
implementing the communication protocols herself/himself.