Welcome!

Adobe Flex Authors: Liz McMillan, RealWire News Distribution, Maureen O'Gara, Yakov Fain, Keith Swenson

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

The video conference view is now ready to be created. The video conference view consists of a panel, tile, and repeater control. The repeater, with dgUsers as the data provider, will create a custom VideoPod control for each user. Although the video component is custom, the guts are quite simple. You will find the full source of the VideoPod in Listing 3. The idea is to first check if the user is a sender or receiver. If it's a sender, you attach the camera and microphone to the Net Stream object and publish it to the server.

public function init():void
{
    ns = new NetStream( nc );
    ...
    camera = Camera.getCamera();
    ...
    ns.attachCamera( camera );
    microphone = Microphone.getMicrophone();
    ns.attachAudio( microphone );
    ns.publish( userItem.identifier )
}

When the custom VideoPod is to display the receiving video feeds, the component creates a stream and calls the play method.

video.attachNetStream( ns );
ns.play( userItem.identifier );

The video class in Flex 2 is used to display video streams. A simple VideoContainer class is found in Listing 4 and is used in the VideoPod component to make it easier to add any video object as a UIComponent. This is needed because the video class is not a UIComponent, so it can't be added as a child to the panel class directly. The VideoPod now is ready to be put into the video conference view control using the repeater inside a tile control.

<!-- Video Panel -->
<mx:Panel id="pnlVideo"
    width="100%" height="100%"
    title="Welcome { txtName.text }!"
    layout="vertical">
    <mx:Tile height="100%" width="100%">
      <mx:Repeater id="rpUsers"
        dataProvider="{ dpUsers }">
        <VideoPod
          nc="{ nc }"
          isSender="{ rpUsers.currentItem.name == txtName.text }"
          userItem="{ rpUsers.currentItem }" />
      </mx:Repeater>
    </mx:Tile>
</mx:Panel>

Now, you can put it all together, compile it, and try it out for yourself. The application's structure consists of the main mxml application called FlexVideoMain.mxml (see Listing 2), VideoPod.mxml (see Listing 3), and VideoContainer.as (see Listing 4). Complementing the client application the FMS server application requires main.asc (see Listing 1) to be placed in flex_videoconference folder in the applications area. The application provides a simple one room multi-user video conference solution. Of course, the maximum number of users possible in each video conference will depend on bandwidth. There are other considerations in creating live, media-rich applications like latency, quality of the video, and frame rates (which affects perceived latency).

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
linden.hocking@blakedawson.com 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/