info@voip-sip-sdk.com Tel: 00 36 52 532 731

Building a webinar/web conferencing system using Flash webphone technology

Explanation

Prerequisities

Download: 07_ConferenceExample.zip

This article is a brief introduction about building Flash webinars or web conferencing applications in relation with Ozeki VoIP SIP SDK. After reading through this page you will be fully familiar with all the essential terms concerning Flash webphone solutions for webinars and web conferences and what you will need for creating your own solution using Ozeki VoIP SIP SDK.

Introduction

Flash is a multimedia displaying technology that can be used for creating web page embedded VoIP solutions called webphones. These webphones are mainly used for simple VoIP phone calls but they can also be used for more advanced purposes.


Figure 1 - Flash web conference

The webinar is the shortened version of web seminar that is a lecture held through the web. The technology is the same as in case of a simple VoIP communication program. The only difference is that in case of a webinar more than one client can join to the conversation as listeners and there is one special client who is the lecturer. Web conferences are basically the same but in that case all the clients can talk to every other client.


Figure 2 - Flash video conference example GUI

The following program code uses the background support of Ozeki VoIP SIP SDK, therefore you will need to download and install the SDK on your computer before starting to use the program code. You will also need to have Visual Studio 2010 and Adobe Flex Builder or compatible IDE and .NET Framework installed on your system, as the program code below is written in C# and Flash languages.

Client side

The client side of this example is written in Adobe Flash. You need to use the Ozeki VoIP SIP SDK as a reference for this program. You need to add the FlashClientSDK.swc file to your project as a resource.

The video conference is a bit different from an audio conference solution as the video streams need separate displays. Code 1 shows how you can define stream receiver objects for the video displays. You also need to define separate display objects.

private var streamReceiver0:MediaStreamReceiver;
private var streamReceiver1:MediaStreamReceiver;
private var streamReceiver2:MediaStreamReceiver;
...

Code 1 - Stream receivers for the video data

When a new client connects to the conference the clients that are previously connected receive notification about the new client. In the client-side program it is handled with the function shown in Code 2. The newest client's nickname will be shown on the GUI.

public function ConnectedClientsReceived(connectedUsers:Array):void
{
        this.connectedUsers.removeAll();
        for each (var user:String in connectedUsers)
        {
                if (user==lblNickName.text)
                        continue;
                this.connectedUsers.addItem(user);
        }
}

Code 2 - Getting information about the connected clients

When you want to start an audio-video conversation, you need to enable it with a checkbox on the GUI. If the checkbox is enabled, the client sends a camera request to all other clients by calling the BroadcastCameraRequest server-side method (Code 3).

protected function VideoCb_clickHandler(event:MouseEvent):void
{
        if (!VideoCb.selected)
        {
                streamSender.attachCamera(null);
                streamSender.attachMicrophone(null);
                cleanRemoteCamera();
                setFirstAvailableDisplay();
                dispLocal.attachCamera(null);
        }
        connection.invokeOnConnection("BroadcastCameraRequest", lblNickName.text, VideoCb.selected);
}

Code 3 - Enabling video communication

When one of the other clients in the conference wants to start video communication, it sends camera request to all other clients. Code 4 shows the function that will be invoked in the client when a camera request arrives. If the video communication is enabled in the client, the response sent for the request will be an acceptance, otherwise the client will reject the request.

public function CameraRequestReceived( owner:String, isEnable:Boolean):void
{

        if (isEnable)
        {
                if (VideoCb.selected)
                {
                        txtChatLog.text += "Camera request accepted\n";
                        createAndSetupStreamReceiver(owner, MediaType.VIDEO, firstAvailableDisplay);
                        if (!cameraIsEnable)
                        {
                                var cam:Camera = Camera.getCamera();
                                streamSender.attachCamera(cam);
                                var mic:Microphone = Microphone.getMicrophone();
                                streamSender.attachMicrophone(mic);
                                dispLocal.attachCamera(cam);
                        }
                        setRemoteCamera(firstAvailableDisplay, owner);
                        setFirstAvailableDisplay();

                        cameraIsEnable = true;
                        cameraEnableWith = owner;
                        connection.invokeOnConnection("SendCameraResponse", lblNickName.text, owner, true);
                }
                else
                {
                        connection.invokeOnConnection("SendCameraResponse", lblNickName.text, owner, false);
                }
        }
        else
        {

                txtChatLog.text += StringUtil.substitute("{0} disabled his/her camera.\n", owner);
                destroyCameraConnection(owner);
                setFirstAvailableDisplay();

        }
}

Code 4 - Receiving camera request

When the client sends a camera request to the others, it waits for a camera response from all of them. The response is handled in the function shown in Code 5. If a remote client accepted the video call, its video stream will be put on the first available video display on the GUI. There are some helping functions that will specify which display is available for use.

public function CameraResponseReceived(owner:String, response:Boolean):void
{

        if (response)
        {
                createAndSetupStreamReceiver(owner, MediaType.VIDEO, firstAvailableDisplay);
                if (!cameraIsEnable)
                {
                        var cam:Camera = Camera.getCamera();
                        streamSender.attachCamera(cam);
                        var mic:Microphone = Microphone.getMicrophone();
                        streamSender.attachMicrophone(mic);
                        dispLocal.attachCamera(cam);
                }
                setRemoteCamera(firstAvailableDisplay, owner);
                setFirstAvailableDisplay();
                cameraEnableWith = owner;
                txtChatLog.text += StringUtil.substitute("{0} accepted your camera request.\n",owner);

                cameraIsEnable = true;
        }
        else
        {

                txtChatLog.text += StringUtil.substitute("{0} rejected your camera request.\n",owner);
        }
}

Code 5 - Receiving camera response

The client sets the remote video stream on the GUI attached to an available display (Code 6). The display will be labeled with the remote party's nickname in order to specify which camera is attached to the display.

private function setRemoteCamera(index:int, owner:String):void
{
        switch (index)
        {
                case 0:
                        dispRemote0.attachNetStream(streamReceiver0);
                        camRemote0.title = owner;
                        break;
                case 1:
                        dispRemote1.attachNetStream(streamReceiver1);
                        camRemote1.title = owner;
                        break;
                ...

Code 6 - Setting remote video on the GUI

The client-side program uses some other helping functions for the communication, but as for the video communication, the above mentioned functions are the most important ones.

Server side

The server-side program is written in C# language. You need to use the Ozeki VoIP SIP SDK .dll file as a resource for the project. This program is a console application that can handle Flash clients for video conferencing.

The MediaGateway class of the Ozeki VoIP SIP SDK defines some methods for the client handling that is needed to be overridden. One of them is the notification about the client connection shown in Code 7.

public override void OnClientConnect(IClient client,  object[] parameters)
{

    if (chatClients.Count == 11)
    {
        client.Close();
        return;
    }
    string nickname = parameters[0] as string;

    if (String.IsNullOrEmpty(nickname))
        return;
    Console.WriteLine("New client '{0}' is trying connect.", nickname);

    if (!chatClients.ContainsKey(nickname))
    {
        chatClients.Add(nickname,client);
        Console.WriteLine("Client '{0}' connected successfully.", nickname);
        ConnectedClientChanged(client);
        base.OnClientConnect(client, parameters);
    }
    else
    {
        Console.WriteLine("Nickname: '{0}' already has been used.",nickname);
    }
}

Code 7 - Client connection handling

The server also needs to define a method for the client disconnection and all the clients need to be notified about the disconnection.

public override void OnClientDisconnect(IClient client)
{
    if (chatClients.ContainsValue(client))
    {
        foreach (KeyValuePair<string, IClient> keyValuePair in chatClients)
        {
            if (keyValuePair.Value==client)
            {
                Console.WriteLine("'{0}' client disconnected.", keyValuePair.Key);
                chatClients.Remove(keyValuePair.Key);
                break;
            }
        }
    }
    ConnectedClientChanged(client);
    base.OnClientDisconnect(client);
}

Code 8 - Client disconnection handling

The client stream publishing starts with the invocation of the OnStreamPublishStart method on the server-side (Code 9).

public override void OnStreamPublishStart(IClient client, IMediaStream mediaStream)
{
    Console.WriteLine("client OnStreamPublishStart");
    base.OnStreamPublishStart(client, mediaStream);
}

Code 9 - Starting client stream publishing

The server always notifies the clients about a client's connection or disconnection. The method in Code 10 is used for the client connection notification. The server uses the InvokeMethod method call for calling a client-side method. The first parameter of the method is the client-side function name, the others are the parameters for the client-side function.

private void ConnectedClientChanged(IClient requestClient)
{
    try
    {
        foreach (var client in chatClients)
        {
            if (client.Value == requestClient)
                continue;
            client.Value.InvokeMethod("ConnectedClientsReceived", new object[] { chatClients.Keys.ToList().ToArray() });
        }
    }
    catch (Exception)
    {}
}

Code 10 - Notify clients about a new client connection

When a client wants to start a video communication it sends a broadcast camera request to the others. The request is done by invoking the server-side method in Code 11. This method invokes the CameraRequestReceived client-side function in all the clients. This method is the one to be called when a client disables the video communication.

The client-side method receives a boolean parameter that indicates if the remote client wants to enable or disable the video communication.

public void BroadcastCameraRequest(IClient client, string owner, bool isEnable)
{
    foreach (string key in chatClients.Keys)
    {
        if (!key.Equals(owner))
        {
            Console.WriteLine("camera request {0} -> {1}", owner, key);
            chatClients[key].InvokeMethod("CameraRequestReceived", owner, isEnable);
        }
    }
}

Code 11 - Camera request sending to all clients

When a client receives a camera request, it sends back a camera response by invoking the SendCameraResponse server-side method (Code 12). The response contains a boolean parameter that indicates if the request was accepted or not.

public void SendCameraResponse(IClient client, string owner, string target, bool response)
{
    Console.WriteLine("camera response {0} -> {1}", owner, target);
    if (chatClients.ContainsKey(target))
    {
        Console.WriteLine("Target exists");
        IClient cl;
        chatClients.TryGetValue(target, out cl);
        Console.WriteLine("Client set");
        cl.InvokeMethod("CameraResponseReceived", owner, response);
        Console.WriteLine("camera response sent");
    }
}

Code 12 - Sending camera response to a specific client

The video conferencing webphone solution needs a bit of planning as the client- and server-side functionalities need to be synchronized, but when the concept is done, the actual programming is not difficult with Ozeki VoIP SIP SDK.

This example program gives a strong basis for starting a web conferencing system but you can also build your own solution on the topic very easily.

This article introduced you the basic knowledge about Flash webphone applications for webinars and web conferencing solutions and showed how Ozeki VoIP SIP SDK can help you to fulfill your wishes about this topic. If you have read through this page carefully, you already have all the knowledge you need to start on your own solution.

As you are now familiar with all the terms concerning this topic, now it is time to take a step further and explore what other extraordinary solution Ozeki VoIP SIP SDK can provide to you.

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