Page 1 of 2   next page »

Video over the Internet and Rich Internet Applications (RIA) are the latest craze. With Flex 2 and Flash Media Server 2 (FMS), developers can easily create interactive media Web applications. In this article you'll create a basic video conference application that will give you the foundation to take you to the next step.

Flash Media Server 2 software has been in the wild since November 2005. In the last year, the use of media on the Web - especially video - has taken off. From streaming video to real-time multi-user interactive applications, FMS is the tool to use. For example, chat, video, and audio conferencing, as well as whiteboard sharing applications can be built upon the FMS technology. The user clients are typically built with the Flash IDE, but this article will show you how to put it all together with Flex 2 and FMS. Flex 2 has made it much easier to create high, impactful RIAs. With each new wave of technology, features are built, and interconnectivity standards have to be explicitly stated. You will learn about a subtle change in the Flash Player 9 that Flex 2 uses. The subtle change will need to be addressed to create our video conference application in Flex and FMS.

The Flash Player 9 introduced a newer Action Message Format version called AMF3. Flex 2 creates ActionScript 3.0 SWF's, but Flash Media Server is still based on ActionScript 2.0 and the earlier AMF0. By default, the Flex 2 NetConnection class uses AMF3, therefore you must tell the NetConnection what object encoding to use. There are two ways to do this:

var nc:NetConnection = new NetConnection();
nc.objectEncoding = flash.net.ObjectEncoding.AMF0;

or

NetConnection.defaultObjectEncoding = flash.net.ObjectEncoding.AMF0;

The first method changes the object encoding for the instantiated object only, whereas the second method changes the object encoding for all NetConnections globally. With the NetConnection set to use AMF0, the Flex application will know how to communicate with the FMS application properly.

Another common pitfall has to do with understanding when to connect Flex components to the FMS application. You need to wait for the NetConnection to return a status of NetConnection.Connect.Success before connecting any Flex component to the FMS server-side component. This is done by adding a status event listener on the NetConnection with a function that will consume the response and check on connection success.

    import flash.events.NetStatusEvent;
    ......
    nc.addEventListener( NetStatusEvent.NET_STATUS, netStatusHandler );
    ......
    public function netStatusHandler( event:NetStatusEvent ):void
{
      switch( event.info.code ) {
        case "NetConnection.Connect.Success":
          // Now connect Flex components
          ;
        break;
    }
}

Now it's time to create the FMS back end. I assume that you understand the basic layout and application structure of the FMS server. You can visit the FMS documentation to gain a basic tutorial on how to install, configure, and deploy FMS applications. For this article, you will want to create a flex_videoconference folder under the applications folder in the default install of FMS. The default FMS installation folder on a Windows machine is C:\Program Files\Macromedia\Flash Media Server 2\applications; for Linux, it's /opt/macromedia/fms/applications. FMS uses service-side ActionScript (ASC) files. The ASC files are used to create the server-side component and FMS applications. All service-side applications require a main.asc file. For the example video conference application, you will need to create main.asc and add the following ActionScript code (see Listing 1 for full source). The application startup code will initialize and retrieve a shared object users_so that contains the list of users.

application.onAppStart = function()
{
    application.users_so = SharedObject.get("users_so", false);
}

When a client connects to the application, the server will accept the connection, and the user will be added to the users_so shared object.

application.onConnect = function(client, name, identifier)
{
    application.users_so.setProperty(identifier, name);
    application.acceptConnection(client);
}

The last part of the main.asc file contains the code to handle client disconnections and remove them from the users_so shared object.

application.onDisconnect = function(client)
{
application.users_so.setProperty(client.identifier, null);
}

I want to point out that this application implementation of handling the list of current users as a single remote shared object will not allow different simultaneous video conferences. This can be achieved a couple of different ways which are out of the scope of this article, mainly through the use of FMS application instances or more sophisticated FMS server-side application implementation.

With the back end FMS application ready to go, the next step is to create the Flex client. The basic layout of the sample application uses a ViewStack with two children UI controls, a form to log in, and a video conference viewing control.

<mx:ViewStack id="vsMain"
    width="100%" height="100%">
      <!-- Login Panel -->
      ...
      <!-- Video Panel -->
      ...
</mx:ViewStack>

A simple form with a text box for the name of the user and a submit button that calls createConnection will do just fine. In the full source listing, you will find added code to disable the login form if the user does not have a camera available (see Listing 2).

<mx:Panel id="pnlLogin">
    <mx:Form>
      <mx:FormItem label="Name:">
      <mx:TextInput id="txtName" />
      </mx:FormItem>
      <mx:Button label="Submit" click="createConnection()"/>
    </mx:Form>
</mx:Panel>

After the submit button is clicked and the createConnection method is called, the Video panel that contains all the current video conference users will be displayed upon a successful connection. To do this, a connection to the FMS server is made. As defined in the main.asc, the Flex client needs to send a name and identifier to the server-side application when connecting to the server application.

public function createConnection():void
{
// Set AMF0 NetConnection objectEncoding
    ...
    var identifier:String = txtName.text;
    while( identifier.search( " " ) > 0 )
      identifier = identifier.replace( " ", "_" );
    nc.connect( "rtmp:/flex_videoconference/", txtName.text, identifier );
}

The identifier algorithm used is not terribly important, but the code above goes through and swaps all the space characters with underscores. These identifiers are used to publish and play the streaming video. One of the features of FMS server technology is the ability to record the published video on the FMS server. The FMS server uses the published name to create the name of the record FLV file, and depending on the underlying OS, you might want to pay attention to the identifier value.

The NetConnection object connects to FMS through a protocol called Real-Time Messaging Protocol (RTMP). The NetConnection's connect method requires URL parameters. All other parameters after the URL parameters are sent to the server as arguments to the connect method call. The URL value "rtmp:/flex_videoconference/" tells the NC to connect to the server running the script's flex_videoconference application. You can learn more about RTMP and FMS connection URLs in the FMS live documentation. The server-side application creates a SharedObject by the name of users_so. The shared object stores the list of users connecting to the application, and provides a list of all connected users to each specific client.

Remember that the connecting of components to the server needs to be done after the NetConnection has successfully connected. You can now add the connectComponents and the code to switch to video conference view into the netStatusHandler function.

   public function netStatusHandler( event:NetStatusEvent ):void
{
     switch( event.info.code ) {
       case "NetConnection.Connect.Success":
         connectComponents();
         vsMain.selectedChild = pnlVideo;
       break;
   }
}

In connectComponents a client-side SharedObject object is created and connected. Flex is asynchronous, and you will need to set an event to listen for any changes to the remote shared object.

public function connectComponents():void
{
    SharedObject.defaultObjectEncoding = flash.net.ObjectEncoding.AMF0;
    users_so = SharedObject.getRemote("users_so", nc.uri, false);
    users_so.addEventListener( SyncEvent.SYNC, usersSyncHandler );
    users_so.connect( nc );
}

The sync event handler will monitor the remote users_so and retrieve the latest value if anything changes. After receiving a sync event message, the function turns the remote object into an array of users. The array of users then gets created into our dgUsers's ArrayCollection. The dgUsers is used as the data provider in video conference view control.

public function usersSyncHandler( event:SyncEvent ):void
{
    var results:Object = event.target.data;
    var usersArray:Array = new Array();
    for( var a:String in results ) {
      var obj:Object = new Object();
      obj.name = results[ a ];
      obj.identifier = a;
      usersArray.push( obj );
    }
    dpUsers = new ArrayCollection( usersArray );
}

Page 1 of 2   next page »