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
This month @nodexl announced that ServerlessSUMMIT & DevOpsSUMMIT own the world's top three most influential Kubernetes domains which are more influential than LinkedIn, Twitter, YouTube, Medium, Infoworld and Microsoft combined. NodeXL is a template for Microsoft® Excel® (2007, 2010, 2013 and 2016) on Windows (XP, Vista, 7, 8, 10) that lets you enter a network edge list into a workbook, click a button, see a network graph, and get a detailed summary report, all in the familiar environment of...
IT professionals are also embracing the reality of Serverless architectures, which are critical to developing and operating real-time applications and services. Serverless is particularly important as enterprises of all sizes develop and deploy Internet of Things (IoT) initiatives. Serverless and Kubernetes are great examples of continuous, rapid pace of change in enterprise IT. They also raise a number of critical issues and questions about employee training, development processes, and opera...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
AI and machine learning disruption for Enterprises started happening in the areas such as IT operations management (ITOPs) and Cloud management and SaaS apps. In 2019 CIOs will see disruptive solutions for Cloud & Devops, AI/ML driven IT Ops and Cloud Ops. Customers want AI-driven multi-cloud operations for monitoring, detection, prevention of disruptions. Disruptions cause revenue loss, unhappy users, impacts brand reputation etc.
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Atmosera delivers modern cloud services that maximize the advantages of cloud-based infrastructures. Offering private, hybrid, and public cloud solutions, Atmosera works closely with customers to engineer, deploy, and operate cloud architectures with advanced services that deliver strategic business outcomes. Atmosera's expertise simplifies the process of cloud transformation and our 20+ years of experience managing complex IT environments provides our customers with the confidence and trust tha...
The Japan External Trade Organization (JETRO) is a non-profit organization that provides business support services to companies expanding to Japan. With the support of JETRO's dedicated staff, clients can incorporate their business; receive visa, immigration, and HR support; find dedicated office space; identify local government subsidies; get tailored market studies; and more.
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
As you know, enterprise IT conversation over the past year have often centered upon the open-source Kubernetes container orchestration system. In fact, Kubernetes has emerged as the key technology -- and even primary platform -- of cloud migrations for a wide variety of organizations. Kubernetes is critical to forward-looking enterprises that continue to push their IT infrastructures toward maximum functionality, scalability, and flexibility. As they do so, IT professionals are also embr...
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...