This article gives you a brief introduction on the topic of a click-to-call
webphone solution that is capable of voice and video calls using Silverlight.
After reading through this page you will be able to implement
your own webphone application with video support that can be embedded in your web page
to provide your customers the possibility of contacting you by video phoning.
Webphone technology is the latest innovation that can change your company's life
forever and that can increase your incomes and decrease the costs of both you and
your customers at the same time.
When a customer has a problem or a question to ask, they want to get an answer as soon
as possible with the least effort (Figure 1). If you have a webphone embedded in your web site, your
customers will be able to visit your site, call your customer service with a single
click and they can explain their problem directly to the service desk agent (SDA).
Figure 1 - Video phoning is available with Ozeki VoIP SIP SDK in Silverlight
Direct connection between the customer service and the customer can shorten the time
for solving the problem as the SDA can ask for the details the customer might have
forgotten to mention when telling the problem at the first time.
The greatest problem about ordinary Customer Service Hotlines that work on the public
telephone network that the cost of these calls can be a fortune especially in case of international calls.
When you use a webphone, the cost of the call will be maximum the local cost even when calling
an international number or it can even be zero when calling another webphone or a VoIP phone.
This programming guide will show you how easily you can get all the above mentioned
advantages of a webphone and you will be able to increase your incomes and decrease
your and your customers' costs even right today.
You will need Ozeki VoIP SIP SDK to get the basic background support for your webphone
If you want to have your own webphone solution you do not need to implement all the necessary
tools and methods from the first stage as there is an extraordinary tool called
Ozeki VoIP SIP SDK that does the hardest part for you and you will only need to
call the provided methods to create your webphone.
The webphone is a client-server application as the embedded clients cannot transfer
voice and video data among each other without the support of a server. The webphone
server is a provider that establishes the connection between the webphone
clients and that forwards the audio and video streams from one client to another.
A brief overview of the webphone server
This article assumes that you have read through the
Web to web voice calls using Silverlight page that shows all the knowledge you
need when you want to build a click-to-call Silverlight webphone for voice calls.
If you haven't read that page it is strongly suggested to do so before reading further as
this article will only show the really basics of building the voice call capable
webphone but it will improve that sample program with the video support.
A webphone server with the support of Ozeki VoIP SIP SDK can handle the audio and
video streams the same way as they are both media streams. This will make your work even
easier as you can use exactly the same webphone server for this new Silverlight webphone
solution that you built up for voice calls.
Note that your webphone server will only work properly if
you set the proper IP address and port number in the App.config XML file.
The webphone server you use is a console application that makes it possible for two webphone clients to connect
to each other and to be able to communicate with each other. The clients are unable to
send media data directly to each other.
The server itself is a set of methods that invoke the proper methods on the client side in
order to establish the communication. When a client connects to the server, it registers
the client and make its status listening. A client can communicate with another
when there are two not busy client connected.
The server has some methods that are inherited and overridden from the MediaGateway
class. These methods specify the main functionality of the server itself, like what
to do in case of a client connection or disconnection or when the server actually starts
or a client starts to play a media stream.
The second part of the server class defines the methods that are for invoking client-side functionalities.
These are typically the actions to be made in case of a call, during line establishment or
media stream sending. These methods are also to send the status information from one client to the
As your server is ready for operation, you can take a step forward and start to implement
your webphone client. You can use the already written Silverlight client as a start and
make some improvements on it.
You can start with the Silverlight client you have built up for voice calls
As your webphone still has to handle voice calls, you can use the previously
built-up webphone client and add some new GUI element to it for the video support.
The client you created for the previous example program contains two buttons and
three notification textboxes that are for showing the client ID, the client status and
other notification texts (Figure 2).
As this webphone is a click-to-call application, you will not need much function buttons
on your GUI. However, when you want to implement video support, you will need to add
some new GUI elements to your application.
Figure 2 - You can start with the already created GUI for voice calling
Figure 3 shows the running application.
Figure 3 - The running click to call solution
Video phoning will need two new areas where the web cam video streams can be shown. You will
need two separate video stream player, one for the client's video stream and one for the
remote party's (Figure 3).
You can create these video player GUI elements as Rectangles and then you can
refractor them to the specified functionalities. The MediaGateway SDK provides the
VideoPlayerControl and CameraRecorderControl element types that are for
displaying the videos from the web cams.
The upper GUI element that is for the remote camera should be an instance of the
VideoPlayerControl. You do not have to write a single code line for this element
as the Mediagateway SDK gives all the support for it (Code 1).
Code 1 - The definition of the VideoPlayerControl GUI element
The Local camera display should be the instance of the CameraRecorderControl class. This
is for displaying your own camera data (Code 2). You can use simple Labels to indicate the functions of these
You will also need a useful button for testing the camera. This can be put below the
If you want to give your customers the opportunity of using text messages, you can
add two other textboxes on your GUI and, of course, a Send button for sending the text.
One of the textboxes will contain the text history and the other will provide you
the space to type.
Figure 4 shows a possible layout of a webphone GUI that is capable of video phoning and
sending and receiving text messages.
Figure 4 - After adding some new elements your GUI should be look like this
In Figure 5 you can see the running program.
Figure 5 - The running webphone application
When you are ready with the GUI design, you will need to add some code lines to your previous
client code and your webphone will be ready to use.
Some minor changes and improvements in the code can do the magic
First of all you will need to activate the camera in case of an incoming call. For this
purpose you should add the line shown in Code 3 to the OnInCall() method of the client class.
The streamSender is a MediaSender object that is registered to an established connection.
You should attach both tha microphone and the camera to this object in order to be
able to make a proper call.
Code 3 - You need to attach the camera to the MediaSender object
The OnPlayRemoteStream method only needs a one-line improvement in order to be able
to receive video data (Code 4).
Code 4 - You have to attach the videoPlayerControl to the receiver object too
Now your webphone is ready for video calls, but there are some other GUI elements that need
If you want to be able to test if your camera works properly, you will need to write an
EventHandler method for the Test Camera button. This can be done by double clicking
on the button on the Design tab.
The test will be very simple. You need to define a flag that shows if the camera is
being tested and turn the camera on or off according to the flag (Code 5).
At this point all the camera functions work properly in your webphone. It is now time
to write the support for the text message functions.
The text message function is the only one that does not need the server for transmission.
It needs an established call though between the two clients, but the actual text communication
excludes the server.
There is a possibility to invoke the other client's methods just as the server does in
case of video and audio calls, but the parameters can only be simple C# parameters like
string. That's why you can use this functionality with text messaging but not in
case of voice or video phoning.
You will actually need to write two EventHandler methods, one for the Send button that is the
actual invocation method and the other for the textbox where you want to type the message.
Code 6 shows the method for handling the Send button Click event. The method simply
invokes the other client's OnStreamSendText that only submits the sent text onto
the textbox on the GUI.
The method contains some basic checks as there has to be and established call to
be able to sent text messages and the method is only called if there is a text to send.
Code 6 - Text message sending can be done directly between two clients
You also have to write the method that handles the message typing that is shown in Code 7.
This method is for enabling the Send button as it should be disabled till at least one
character has been typed in onto the right textbox.
Finally, you will need to implement the method that is called by the other client
and appends the text message from the remote end to the right textbox.
Now, if you followed this guide carefully you have a fully operable webphone application that can work with audio, video
and text messages. You only have to be sure that your server configuration is correct and you will be able to
use your webphone embedded in your site.
This article has introduced you the methods that are needed to add to your
webphone solution to be able to support video phoning on your web site. If you have
written all the methods that were mentioned, you have implemented your own
webphone application. Now it is time for some customizing of the GUI and you will have
exactly the webphone you wanted.