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

How to implement web to web video calls using Silverlight camera access

Explanation

Prerequisities

Download: 02_Web2Web_Video.zip

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.

Introduction

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 others.

If you want to get more detailed information about the webphone server, please check the Web to web voice call using Silverlight page.

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).

<MediaGateway:VideoPlayerControl Grid.Row="1" Name="videoPlayerControl" Margin="0,29,0,0" />

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 GUI elements.

<Controls:CameraRecorderControl Grid.Row="3" Name="camera" Margin="0,29,0,0" />

Code 2 - The definition of the camera

You will also need a useful button for testing the camera. This can be put below the camera displays.

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.

streamSender.AttachCamera(camera);

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).

streamReceiver.AttachVideoPlayer(videoPlayerControl);

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 function.

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).

if (isTest)
{
camera.Stop();
btnTestCamera.Content = "Test camera";
}
else
{
camera.Start();
btnTestCamera.Content = "Test stop";
}
isTest = !isTest;

Code 5 - Camera testing is not too difficult

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.

if (string.IsNullOrEmpty(txtMsgInput.Text))
   return;

txtChatLog.Text += String.Format("{0}:\n{1}\n",  txtBClientID.Text, txtMsgInput.Text);

if (streamSender!=null  && streamSender.StreamState==StreamState.PublishingSuccess)
{
streamSender.InvokeOnStream("OnStreamSendText", txtBClientID.Text, txtMsgInput.Text);
}

txtMsgInput.Text = "";
btnSend.IsEnabled = false;

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.

if (!string.IsNullOrEmpty(txtMsgInput.Text) && !string.IsNullOrWhiteSpace(txtMsgInput.Text) && streamSender != null)
                btnSend.IsEnabled = true;
else
{
btnSend.IsEnabled = false;
return;
}

if (e.Key == Key.Enter)
btnSend_Click(null, null);

Code 7 - You can only send messages that exist

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.

Ozeki Silverlight webphone with video Visual Studio project can be obtained by
opening the download page:
Download Ozeki Silverlight webphone with video sample project now

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.

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.