Welcome!

Video Authors: Elizabeth White, Yakov Fain, Liz McMillan, Dan Ristic, Jnan Dash

Related Topics: Video, Adobe Flex

Video: Article

Video Conference with Flex & FMS

Learn how to use Flex 2 and FMS 2 by creating a basic video conference application

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 );
}


More Stories By Renaun Erickson

Renaun Erickson is a RIA developer specializing in Flex, ColdFusion, and PHP, and he is a Flex Adobe Community Expert. He is active in the community through http://renaun.com/blog/, as well as the local Las Vegas Adobe User Group http://vegasaug.org.

Comments (2) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
[email protected] 12/02/08 07:35:49 PM EST

Hi Renaun

This provides a fantastic plugin that I'm using in a Confluence wiki. Is there anyway to modify the quality of the video?

Thanks
Linden

steve M 08/27/07 01:54:08 AM EDT

That's really a smart and quick sloution for video conferencing, without much efforts and time.
http://www.sony-conferencing.com/

IoT & Smart Cities Stories
The challenges of aggregating data from consumer-oriented devices, such as wearable technologies and smart thermostats, are fairly well-understood. However, there are a new set of challenges for IoT devices that generate megabytes or gigabytes of data per second. Certainly, the infrastructure will have to change, as those volumes of data will likely overwhelm the available bandwidth for aggregating the data into a central repository. Ochandarena discusses a whole new way to think about your next...
Dynatrace is an application performance management software company with products for the information technology departments and digital business owners of medium and large businesses. Building the Future of Monitoring with Artificial Intelligence. Today we can collect lots and lots of performance data. We build beautiful dashboards and even have fancy query languages to access and transform the data. Still performance data is a secret language only a couple of people understand. The more busine...
DXWorldEXPO LLC announced today that Big Data Federation to Exhibit at the 22nd International CloudEXPO, colocated with DevOpsSUMMIT and DXWorldEXPO, November 12-13, 2018 in New York City. Big Data Federation, Inc. develops and applies artificial intelligence to predict financial and economic events that matter. The company uncovers patterns and precise drivers of performance and outcomes with the aid of machine-learning algorithms, big data, and fundamental analysis. Their products are deployed...
All in Mobile is a place where we continually maximize their impact by fostering understanding, empathy, insights, creativity and joy. They believe that a truly useful and desirable mobile app doesn't need the brightest idea or the most advanced technology. A great product begins with understanding people. It's easy to think that customers will love your app, but can you justify it? They make sure your final app is something that users truly want and need. The only way to do this is by ...
CloudEXPO | DevOpsSUMMIT | DXWorldEXPO are the world's most influential, independent events where Cloud Computing was coined and where technology buyers and vendors meet to experience and discuss the big picture of Digital Transformation and all of the strategies, tactics, and tools they need to realize their goals. Sponsors of DXWorldEXPO | CloudEXPO benefit from unmatched branding, profile building and lead generation opportunities.
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
Cell networks have the advantage of long-range communications, reaching an estimated 90% of the world. But cell networks such as 2G, 3G and LTE consume lots of power and were designed for connecting people. They are not optimized for low- or battery-powered devices or for IoT applications with infrequently transmitted data. Cell IoT modules that support narrow-band IoT and 4G cell networks will enable cell connectivity, device management, and app enablement for low-power wide-area network IoT. B...
The hierarchical architecture that distributes "compute" within the network specially at the edge can enable new services by harnessing emerging technologies. But Edge-Compute comes at increased cost that needs to be managed and potentially augmented by creative architecture solutions as there will always a catching-up with the capacity demands. Processing power in smartphones has enhanced YoY and there is increasingly spare compute capacity that can be potentially pooled. Uber has successfully ...
SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5–7, 2018, at the Javits Center in New York City, NY. CrowdReviews.com is a transparent online platform for determining which products and services are the best based on the opinion of the crowd. The crowd consists of Internet users that have experienced products and services first-hand and have an interest in letting other potential buye...
When talking IoT we often focus on the devices, the sensors, the hardware itself. The new smart appliances, the new smart or self-driving cars (which are amalgamations of many ‘things'). When we are looking at the world of IoT, we should take a step back, look at the big picture. What value are these devices providing. IoT is not about the devices, its about the data consumed and generated. The devices are tools, mechanisms, conduits. This paper discusses the considerations when dealing with the...