Flash

Macromedia Flash Communication Server MX (popularly referred to as Flashcom) is becoming an increasingly popular platform for the efficient delivery of streaming video to large audiences. Many content delivery networks such as Speedera and Vitalstream have teamed up with Macromedia to offer their clients a platform to stream prerecorded videos easily and efficiently. However, the Flash Communication Server capabilities do by no means end there. The platform is also an ideal choice to deliver live-event broadcasts in real time across the globe - all through a familiar and very accessible Macromedia Flash front end.

In this article I will walk you through the development of a simple live broadcast application which captures your local microphone and camera sources and publishes them with the help of Flash Communication Server over the Internet. You will also learn how to build a player that is capable of subscribing to the broadcast and playing it back to your viewers.

Note: The sample FLA files are not needed to complete this tutorial but are provided for reference in case of any problems.

Creating the Server-side Application
To set up an application on your Flash Communication Server, all you need to do is to create a folder inside your server's application directory. Most applications will also require some server-side code, usually in the form of a main.asc file. However, since this is a very basic application, you do not need any server-side code at all.

To create your application, simply create a new folder inside your Flash Communication Server application directory, and call it livecast. On Windows, this folder's default location is C:\Program Files\Macromedia\Flash Communication Server MX\applications\.

Note: There is no need to restart your server or vhost at this point. Remember, however, that every time you make changes to any server-side code you must restart the application that you have modified, or else you will not see your code changes reflected in your application logic.

Building the Live Video Broadcaster
Both applications that you are about to build are very similar. Each one will connect to your Flash Communication Server application and stream audio and video data. The main difference between the two files is that the broadcaster will publish the video and audio whereas the receiver - you guessed it - receives it. Therefore the broadcaster will contain a little more code than the receiver, because it needs to access your camera and microphone as well as handle the NetConnection and NetStream objects.

Building the live video broadcaster involves the following steps:

1. Creating a new FLA file
2. Laying out the user interface
3. Connecting to your Flash Communication Server application
4. Creating a NetStream object and publishing your stream

Step 1: Create a New FLA File
Open Flash MX 2004 and choose File > New or press Control+N to create a new FLA file. Rename your existing layer to UI. Create a new layer above your existing layer and name it actions. Save your FLA file in a directory of your choice and name it broadcaster.fla.

Step 2: Lay Out the User Interface
Select Window > Development Panels > Components or press Control+F7 to open the components panel. Next drag the following components onto the Stage:

• Two TextInput components
• One TextArea component
• Three Label components
• Two Button components

Open your library (by selecting Window > Library or pressing Control+L) and add a new video object to it. To create a new video object, click the little button in the top right corner of your Library panel and select New Video (see Figure 1).

You will see a new symbol Embedded Video 1, in your library. Drag it onto the Stage and give it an instance name of myvid. Later you will display your local camera feed inside this video object. I also drew a thin outline around the video object in my application to make it visible before a video is being displayed. This border is optional.

Name one of your buttons on the Stage connect_pb and give it a label of Connect. Name the second button startstop_pb and give this one a label of Start Broadcast.

Give your label components the text properties of rtmp address for the first component, stream name for the second component, and status output for the third component. The label components simply clarify the purpose of your text input and text area components. You can omit the labels altogether if you want, because they play no significant role in the actual application logic.

Give the two TextInput components instance names of rtmp_txt and streamname_txt, respectively.

Name the text area component status_txt; you will be using it to output status and trace information.

Align all these elements as you see fit, or use my layout (see Figure 2).

Step 3: Connect to Your Flash Communication Server Application
To successfully connect to a Flash Communication Server application instance, you must:

1. Create a NetConnection object.
2. Define an onStatus() method for it.
3. Call the NetConnection object's connect() method.

Select Frame 1 of the actions layer and add the following code to it:

startstop_pb.enabled = false;

connect_pb.onRelease = function(){
    if(this.label == "Connect"){
        status_txt.text += "Connecting..." + newline;
        this.label = "Disconnect";
        nc.connect(rtmp_txt.text);
    } else {
        status_txt.text += "Disconnecting." + newline;
        this.label = "Connect";
        startstop_pb.enabled = false;
        nc.close();
    }
}

nc = new NetConnection();
nc.onStatus = function(info) {
    status_txt.text += "NC.onStatus> info.code: " + info.code + newline;
    if (info.code == "NetConnection.Connect.Success") {
        status_txt.text += "Connected to " + this.uri + newline;
        startstop_pb.enabled = true;
    } else if (info.code == "NetConnection.Connect.Closed") {
        startstop_pb.enabled = false;
        startstop_pb.label = "Start Broadcast";
        myvid.attachVideo(null);
         myvid.clear();
    }
}