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)

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.


IoT & Smart Cities Stories
Dion Hinchcliffe is an internationally recognized digital expert, bestselling book author, frequent keynote speaker, analyst, futurist, and transformation expert based in Washington, DC. He is currently Chief Strategy Officer at the industry-leading digital strategy and online community solutions firm, 7Summits.
Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...
IoT is rapidly becoming mainstream as more and more investments are made into the platforms and technology. As this movement continues to expand and gain momentum it creates a massive wall of noise that can be difficult to sift through. Unfortunately, this inevitably makes IoT less approachable for people to get started with and can hamper efforts to integrate this key technology into your own portfolio. There are so many connected products already in place today with many hundreds more on the h...
The standardization of container runtimes and images has sparked the creation of an almost overwhelming number of new open source projects that build on and otherwise work with these specifications. Of course, there's Kubernetes, which orchestrates and manages collections of containers. It was one of the first and best-known examples of projects that make containers truly useful for production use. However, more recently, the container ecosystem has truly exploded. A service mesh like Istio addr...
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...
Charles Araujo is an industry analyst, internationally recognized authority on the Digital Enterprise and author of The Quantum Age of IT: Why Everything You Know About IT is About to Change. As Principal Analyst with Intellyx, he writes, speaks and advises organizations on how to navigate through this time of disruption. He is also the founder of The Institute for Digital Transformation and a sought after keynote speaker. He has been a regular contributor to both InformationWeek and CIO Insight...
Andrew Keys is Co-Founder of ConsenSys Enterprise. He comes to ConsenSys Enterprise with capital markets, technology and entrepreneurial experience. Previously, he worked for UBS investment bank in equities analysis. Later, he was responsible for the creation and distribution of life settlement products to hedge funds and investment banks. After, he co-founded a revenue cycle management company where he learned about Bitcoin and eventually Ethereal. Andrew's role at ConsenSys Enterprise is a mul...
To Really Work for Enterprises, MultiCloud Adoption Requires Far Better and Inclusive Cloud Monitoring and Cost Management … But How? Overwhelmingly, even as enterprises have adopted cloud computing and are expanding to multi-cloud computing, IT leaders remain concerned about how to monitor, manage and control costs across hybrid and multi-cloud deployments. It’s clear that traditional IT monitoring and management approaches, designed after all for on-premises data centers, are falling short in ...
In his general session at 19th Cloud Expo, Manish Dixit, VP of Product and Engineering at Dice, discussed how Dice leverages data insights and tools to help both tech professionals and recruiters better understand how skills relate to each other and which skills are in high demand using interactive visualizations and salary indicator tools to maximize earning potential. Manish Dixit is VP of Product and Engineering at Dice. As the leader of the Product, Engineering and Data Sciences team at D...
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...