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;


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

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

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

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:FormItem label="Name:">
      <mx:TextInput id="txtName" />
      <mx:Button label="Submit" click="createConnection()"/>

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":
         vsMain.selectedChild = pnlVideo;

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?


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.

@ThingsExpo Stories
Poor data quality and analytics drive down business value. In fact, Gartner estimated that the average financial impact of poor data quality on organizations is $9.7 million per year. But bad data is much more than a cost center. By eroding trust in information, analytics and the business decisions based on these, it is a serious impediment to digital transformation.
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...
Predicting the future has never been more challenging - not because of the lack of data but because of the flood of ungoverned and risk laden information. Microsoft states that 2.5 exabytes of data are created every day. Expectations and reliance on data are being pushed to the limits, as demands around hybrid options continue to grow.
As IoT continues to increase momentum, so does the associated risk. Secure Device Lifecycle Management (DLM) is ranked as one of the most important technology areas of IoT. Driving this trend is the realization that secure support for IoT devices provides companies the ability to deliver high-quality, reliable, secure offerings faster, create new revenue streams, and reduce support costs, all while building a competitive advantage in their markets. In this session, we will use customer use cases...
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
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...
DevOpsSummit New York 2018, colocated with CloudEXPO | DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City. Digital Transformation (DX) is a major focus with the introduction of DXWorldEXPO within the program. 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 bus...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
DXWorldEXPO LLC announced today that ICOHOLDER named "Media Sponsor" of Miami Blockchain Event by FinTechEXPO. ICOHOLDER give you detailed information and help the community to invest in the trusty projects. Miami Blockchain Event by FinTechEXPO has opened its Call for Papers. The two-day event will present 20 top Blockchain experts. All speaking inquiries which covers the following information can be submitted by email to [email protected] Miami Blockchain Event by FinTechEXPO also offers s...
DXWorldEXPO | CloudEXPO 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.
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 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 ...
Cloud-enabled transformation has evolved from cost saving measure to business innovation strategy -- one that combines the cloud with cognitive capabilities to drive market disruption. Learn how you can achieve the insight and agility you need to gain a competitive advantage. Industry-acclaimed CTO and cloud expert, Shankar Kalyana presents. Only the most exceptional IBMers are appointed with the rare distinction of IBM Fellow, the highest technical honor in the company. Shankar has also receive...
Enterprises have taken advantage of IoT to achieve important revenue and cost advantages. What is less apparent is how incumbent enterprises operating at scale have, following success with IoT, built analytic, operations management and software development capabilities - ranging from autonomous vehicles to manageable robotics installations. They have embraced these capabilities as if they were Silicon Valley startups.
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.
The IoT Will Grow: In what might be the most obvious prediction of the decade, the IoT will continue to expand next year, with more and more devices coming online every single day. What isn’t so obvious about this prediction: where that growth will occur. The retail, healthcare, and industrial/supply chain industries will likely see the greatest growth. Forrester Research has predicted the IoT will become “the backbone” of customer value as it continues to grow. It is no surprise that retail is ...
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...
DXWorldEXPO LLC announced today that "Miami Blockchain Event by FinTechEXPO" has announced that its Call for Papers is now open. The two-day event will present 20 top Blockchain experts. All speaking inquiries which covers the following information can be submitted by email to [email protected] Financial enterprises in New York City, London, Singapore, and other world financial capitals are embracing a new generation of smart, automated FinTech that eliminates many cumbersome, slow, and expe...
Cloud Expo | DXWorld Expo have announced the conference tracks for Cloud Expo 2018. Cloud Expo will be held June 5-7, 2018, at the Javits Center in New York City, and November 6-8, 2018, at the Santa Clara Convention Center, Santa Clara, CA. Digital Transformation (DX) is a major focus with the introduction of DX Expo within the program. 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 ov...