Page 2 of 2   « previous page

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

Page 2 of 2   « previous page