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

How to implement web to web voice calls using Flash microphone access

Explanation

Prerequisities

Download: 01_Web2Web_voice.zip

With Ozeki SIP SDK you can effectively build a click-to-call Flash webphone for voice calls in order to improve corporate communication by boosting Flash technology. This guide explains with source codes how you can implement web to web voice calls using Flash microphone access with Ozeki SIP SDK. After reading this material you will be able to build your own Flash webphone solution that is based on the background support of Ozeki VoIP SIP SDK.

Introduction

If you want to refer to effective communication as a term, the first thing that comes to anybody's mind is the Internet. We live in the age of VoIP communication, social networks and instant messaging and the only question is how successfully we can use these opportunities to make our company the best.

If you have ever run into the problem of lack of communication or connection you know that this can mean the end of a successful business or at least cause a lot of other problems.

Every company leader knows that the difference between success and failure can be only one minute loss of connection, if your greatest customer has a problem and cannot get an answer immediately. This is why every company tries to have the most reliable, most comfortable and most easy-to-use tools for communication (Figure 1).


Figure 1 - Web to web voice communication with Flash webphone clients

It is a fact that everybody wants to get solution for their problems immediately, possibly without cost or uncomfortability. As nearly everybody uses web browsers the solution can be a tool that fulfills all the wishes within a browser.

Webphone technology is a highly innovative tool that allows your customers to make contact to you with using a telephone program that is embedded into your web site.

These webphones either can be click-to-call solutions when the website visitor only has to press Call button and the phone rings at your customer service; or fully featured softphones when the customer can specify the phone number they want to call.

How does a webphone work and what innovation can it provide to you?

The webphone is a client-server application that works similarly to telephones. The client application is embedded in a web site and when a user calls a number the client that is connected to the server over some standard protocols sends the call message to the server that transfers it to a remote client or a SIP softphone.

The client can connect to the server with NET.TCP, HTTP, RTMP, etc. protocols that depends on the client-side technology you use. The mostly spread and well-known client-side technologies are Microsoft Silverlight and Flash.

This article is about click-to-call webphone technology that uses Flash for the client-side application. It assumes that you are familiar with the basic terms of webphones and you have read some of the previous articles in the topic.

To get more information about webphone technology, please check the following articles:

This article will use the server-side application that was written for the Silverlight click-to-call webphone solution mostly unchanged. You will find a brief introduction of this server but if you want to know in details how you can write that server, you can check it in the Web to web voice calls using Silverlight article.

Requirements before you start

Voice calling, making connections and working with package transferring through the Internet needs the use of a lot of tools like standard transfer protocols, voice compression, audio codecs, etc. If you want to use these tools, you will need to do a lot of coding or you can use an SDK that provides you the necessary support for all these tools.

Ozeki VoIP SIP SDK provides you all the background support you need for voice or video calls over the Internet and more. It supports a lot of audio and video codecs, it makes possible for you to build softphone or webphone solution with only setting some parameters and calling some provided methods.

If you do not want to worry about the background but want your applications work properly, all you need is Ozeki VoIP SIP SDK. It has support for both server- and client-side applications. It supports both Silverlight and Flash technology so you can choose the one you like the most.

The server-side application for your webphone uses C# programming language. You will need Visual Studio 2010 and Ozeki VoIP SIP SDK for your work and a really basic C# programming knowledge. You will find it really easy to write the server with the help of Ozeki VoIP SIP SDK.

You can use the same webphone server as in case of the Silverlight solution

The server-side application has exactly the same functionality that is independent from the client-side solution. It means that you can use exactly the same server application that you have written for the Silverlight webphone.

This example webphone will use the same server application that was introduced in Web to web voice calls using Silverlight application. It is suggested to read that article to fully understand the server itself.

The only change in the server will be an additional line into the App.config.xml file that defines the basic data of the server. You specify in this file what client-side solutions can connect to your server.

In case you want to have both Silverlight and Flash clients to be able to connect to your server, you can use two lines for specifying both technologies.

You have to make sure that the App.config file contains the line that specifies Flash client support (Code 1).

Note that you need to specify the port number and the server name according to your own settings in order to have your webphone work properly. The client and the server have to use the same settings to be able to reach each other.

<add type="flash" listenedPort="1937" serviceName="Web2WebServer"/>

Code 1 - The server configuration file has to contain this line in order to receive Flash client connections

If you want to read a detailed introduction to the server-side application, please visit Web to web voice calls using Silverlight page.

If you have a fully functional recycled server application with that one-line improvement in the configuration file, you can start to write the Flash client.

You will need Adobe Flash Builder and Flex 4.5.1 SDK

If you want to write a Flash application, you will need to have Adobe Flash Builder. You will need to install Flash Builder on your computer and then you can make your client-side webphone application with it.

Flash programming also requires the Flex SDK that will have to be installed on your computer too. For your webphone client you will need Flex 4.5.1. You can download it from the Adobe web site and you will need to unpack it into the SDK folder of the Flash Builder.

Flash programs do not use .dll files for resources but they can also get background support from third-party SDK solutions. These SDKs must be .swc files that are the Flash' own version for .dll files.

For your webphone Flash client you will need to have the Ozeki VoIP SIP SDK for Flash attached to your Flash project. Now it is time to know how you can create your first Flash webphone.

How to create a new Flex project

Adobe Flash Builder is a variation of the Eclipse integrated development environment (IDE) that works similar to the Visual Studio. You can create projects, add files to projects and you can even use the Design tab for building the GUI of your application.

The first step of your programming should be creating a new Flex project. You can use File->New->Flex Project menu for this purpose (Figure 2).


Figure 2 - You can create a new Flex project from the menu

When you click on the Flex Project menu, the New Flex Project window will appear where you can make the first and most essential settings of your project (Figure 3).

The new flex project settings are divided into three steps that are shown as labeled tabs on the New Flex Project window. The first tab is Project Location where you can set the name of the project, you can specify the project location folder (or use the default folder if you want), you can specify the application type that is in this case a Web application and you can specify the SDK to use.


Figure 3 - The New Flex Project window

The webphone Flex project will need the Flex 4.5.1 SDK. If you have started the Flash Builder for the first time after installing the Flex 4.5.1 SDK, you will need to add the SDK to the project manually. This way, for later projects, you will only need to choose the SDK from the provided list.

If you want to add a new Flex SDK to your project, you need to click on the Configure Flex SDKs... link on the New Flex Project window and a new window will appear that is shown in Figure 4.

You can choose from the existing SDKs for your project or you can add new SDK with the Add... button on the right side. You can also download the newest SDK from the Internet using the Find and download other versions of Flex SDK... link.


Figure 4 - You can add new SDK to use to your Flex project

If you use the Add... button, you can find the unpacked Flex 4.5.1 SDK on your hard drive using the Add Flex SDK window that appears when you press the Add button. You can use the Browse button and find the location of the SDK and after choosing it you can press OK(Figure 5). You will need to check the check box before the Flex 4.5.1 SDK on the Configure Flex SDK window and this will specify that your project will use this SDK.


Figure 5 - You can browse your file system for the necessary SDK

After you have chosen the right SDK you can press Next on the New Flex Project window an you can continue settings on the Server Settings tab (Figure 6). In this case you will not need to modify anything on this tab, so you can simply press Next and get to the last, Build Paths tab.


Figure 6 - You will not need to change the data on this tab now

The Build Paths tab lets you specify the outer SDK files you will want to use. You can add Ozeki VoIP SIP SDK to your project here on the Library path tab (Figure 7).

As the Ozeki VoIP SIP SDK for Flash clients is a .swc file, you will need to press Add SWC button for attaching it to your project.


Figure 7 - You can add third-party SDK files to your projects on this tab

When you press Add SWC... button, a new window (Add SWC) will appear that lets you browse your file system for the Ozeki VoIP SIP SDK .swc file (Figure 8). If you have chosen it, you can press OK and then you can finish creating your project.


Figure 8 - You can browse your file system for .swc files

Now you have your Flex project for your webphone client, it is time to build the GUI and program the client-side functionality.

A simple click-to-call GUI in Flash

Adobe Flash Builder as most of the IDE programs today provides a comfortable and easy-to-use GUI builder support. You will find it familiar as the Visual Studio has similar functions with some small differences.

You can use the Design tab as in Visual Studio to build your GUI. You can also use your mouse and drag and drop technology for positioning the GUI elements and you can specify the element properties on the Properties and Appearance tabs (Figure 10). These tabs are usually on the right side of the window and show the properties of the GUI element that can be modified.


Figure 10 - The GUI elements can be modified by using the Properties and Appearance tabs

You can add new GUI elements to your webphone by using your mouse. You can choose the available GUI elements from the Components tab that is on the left bottom side of the Flash Builder window (Figure 11).

The GUI elements in a Flash application are mainly the same as in case of a Silverlight application so you will find them familiar if you have gone through the Silverlight webphone guides.


Figure 11 - You can choose your GUI elements from the Components tab

A simple click-to-call webphone only needs some basic GUI element. You can use similar layout as in case of the former Silverlight GUI.

A possible GUI structure of your webphone can be similar to the one shown in Figure 12. A click-to-call webphone solution can only call one specified number (namely another client) so you only need two buttons for start/receive and end the call, and some labels for notification and client data display.


Figure 12 - A simple GUI for a click-to-call Flash webphone client

After you have built your impressive GUI, you will need to write some client functionality to your webphone.

Programming basics for Flash

Flash application sources are stored in XML files and have slightly different syntax than C# or Silverlight programs, however, you will not find it difficult to understand, how they work.

The functionality of a Flash application has to be written between <fx:Script> and </fx:Script> tags. The exact programming section is in a <![CDATA[..]]> section.

The namespace specifications for Flash programs are in import instructions (Code 2). These imports can be set anywhere in the code they are not necessarily the first instructions as in case of the using section in C#.

import ozeki.mediaGateway.*;

Code 2 - In order to use the SDK names without labeling, you should use import lines

Variable declaration in Flash is also a bit different from the C# syntax as the type of the variable is the last name in the declaration line and it is separated from the variable name with a ':' (Code 3).

private var connection:MediaConnection;
private var streamSender:MediaStreamSender;
private var streamReceiver:MediaStreamReceiver;
private var clientID:String;
private var IncomingCallOwner:String;
private var callProccess:Boolean;
private var microphone:Microphone;
private var callProcess:Boolean;

Code 3 - Variable declaration in Flash programs

As you can see the tools you need to use in this client are basically the same as in case of the other webphone solutions. The functionality will also be the same in structure you only have to keep the right programming conventions.

The Flash functions have different header syntax than the C# methods. First you specify the keywords for visibility and use the function keyword to indicate that the following name will be an activity (Code 4).

The parameters of a function can be set by specifying the name and after that the parameter type divided by ':'.

The last element of the function header is the return type that is also divided from the header's other elements by ':'. The function in Code 4 has the return type set to void that means that there is no return value for this function.

Thy body of a Flash function is between '{' and '}'. The instructions are always finished with a ';'.

The function in Code 4 initializes the connection object and sets the server data for the connection.

Note that you need to set the server data according to your own network settings. The port number and the IP and the server name must be the same that you specified in the server configuration file before.

protected function application1_creationCompleteHandler(event:FlexEvent):void
{
        connection = new MediaConnection("localhost:1937/Web2WebServer");
        connection.client=this;
        connection.addEventListener(ConnectionEvent.CONNECTION_STATE_CHANGED,connecionStateChanged);
        connection.connect();
}

Code 4 - A Flash function for connection initialization

The actual EventHandler methods are the same as in the former solutions.

Event handling in Flash

The Adobe Flash Builder lets you set the default EventHandler methods for the GUI elements on the Properties panel. The buttons' onclick event will be needed to handle with the usual methods of btnCall_clickHandler and btnCallStop_clickHandler.

If you set these methods on the Properties panel for the buttons, you can check the definition code for the buttons where these handlers will appear as in Code 5.

The definition specifies the ID of the button, the label that is the text that appears on the button and the EventHandler of the onclick event. It also sets the location of the button on the container panel.


Code 5 - XML definition of a button in Flash

The Flash client will have the following functions that will need to be written:

  • connecionStateChanged
  • btnCall_clickHandler
  • btnCallStop_clickHandler
  • OnSetReadyStatus
  • OnInCall
  • OnPlayRemoteStream
  • OnCallStop
  • streamSender_StreamStateChanged
  • streamReceiver_StreamStateChanged
  • ReleaseStreams

The functions starting with "On" are the ones that will be invoked by the server. You will need EventHandlers for the two buttons and for the state change events of the sender and receiver objects. You also has to be notified about the change of the connection state.

The ReleaseStremas function is for closing the sender and receiver objects and releasing the incoming and outgoing streams (Code 6).

private function ReleaseStreams():void
{
        if (streamSender != null)
        {;
                streamSender.removeEventListener(StreamStateChangedEvent.STREAM_STATE_CHANGED, streamSender_StreamStateChanged);
                streamSender.close();
        }
        if (streamReceiver != null)
        {
                streamReceiver.removeEventListener(StreamStateChangedEvent.STREAM_STATE_CHANGED, streamReceiver_StreamStateChanged);
                streamReceiver.close();
        }
}

Code 6 - When you finished the call you have to release the streams

If you take a look at one of the functions you will see that they follow the same logic as the C# client methods, but the microphone access is much easier that in case of the Silverlight client (Code 7).

In case of the Silverlight client the program needed a direct user interaction on the Silverlight environment in order to pop up the window about starting the microphone. In case of Flash this problem will not occur and this makes your work much easier.

public function OnInCall():void
{
        lblInfo.text = "Incall";
        microphone = Microphone.getMicrophone();
        streamSender = new MediaStreamSender(connection);
        streamSender.attachMicrophone(microphone);
        streamSender.addEventListener(StreamStateChangedEvent.STREAM_STATE_CHANGED, streamSender_StreamStateChanged);

        streamSender.publish(clientID);
}

Code 7 - Accessing the microphone is much easier in Flash than in Silverlight

As the tools Ozeki VoIP SIP SDK provides work the same as in the case of the Silverlight solution, you can write the functions with the same function calls you used in your former Silverlight clients. As the names are the same, the client-side program will look very similar to the previous ones.

You are now familiar with the basics of Flash programming and the tools you need to use in your webphone application. It is time to write your own solution in this topic, but do not forget to use Ozeki VoIP SIP SDK to have the same programming experience in both Flash and Silverlight programming.

This article shows you the most important concepts of a click-to-call Flash webphone for voice calls. Now as you are completely familiar with the basics, it is time to explore what other extraordinary features and support Ozeki VoIP SIP SDK can provide to you to fulfill all your goals.

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 Flash webphone development 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.