Building a Simple Live Video Broadcaster and Receiver

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

Figure 1: Add a new video object to your library.

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

Figure 2: This is the completed user interface of your video object.

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

This code initiates the following actions. First it disables the startstop_pb button instance. You will enable it again after a successful connection to the server has been established.

Next comes the onRelease function for the connect_pb button instance. This code emulates a toggle state so that the button can be used to both connect and disconnect based on the current label. At the same time the code outputs status messages into the status_txt field on the Stage to help you visualize what's happening behind the scenes. The following code will disable the broadcast button when you close the connection to your server:

startstop_pb.enabled = false

The actual connection to Flash Communication Server is triggered by this line:

nc.connect(rtmp_txt.text);

As you may have noticed, this code grabs whatever text is currently displayed in the rtmp_txt text input field and passes it as a parameter to the NetConnection object's connect method. This enables you to connect to different servers (or applications) without having to hard code connection strings into the SWF file. If it makes live easier for you, then you can easily prefill the value for this input field inside the Flash authoring environment: Just highlight the component on the Stage, bring up the Properties panel and fill in the text value. Note that you must use the complete rtmp string to your server, including rtmp:/ or rtmp://.

At the bottom of this code block is the onStatus function for your NetConnection object. This function listens for a NetConnection.Connect.Success message and, after receiving one, enables the startstop_pb button instance as you are now ready to create a NetStream function and start broadcasting.

The last code block disables the broadcast button and resets its label in case you get disconnected, either because you have chosen to or maybe because the connection has dropped for unknown reasons. It also cleans up the video object on the Stage by issuing the following:

myvid.attachVideo(null);
myvid.clear();

Step 4: Create a NetStream Object and Publish the Stream

You will create a NetStream object after the startstop_pb button is clicked. The name for the stream will be based on whatever value the streamname_txt text field holds.

Add the following code underneath the existing code in frame 1:

startstop_pb.onRelease = function(){
    if (this.label == "Start Broadcast"){
        status_txt.text += "Starting broadcast" + newline;
        this.label = "Stop Broadcast";
        ns = new NetStream(nc);
        ns.onStatus = function(info) {
            status_txt.text += "NS.onStatus> info.code: " + info.code + newline;
        }
        mycam = Camera.get();
        mycam.setQuality(25600, 0);
        mymic = Microphone.get();
        mymic.setRate(11);
        ns.attachVideo(mycam);
        ns.attachAudio(mymic);
        myvid.attachVideo(mycam);
        ns.publish(streamname_txt.text, "live");
    } else {
        status_txt.text += "Stopping broadcast" + newline;
        this.label = "Start Broadcast";
        myvid.attachVideo(null);
        myvid.clear();
        ns.close();
    }    
}

This code is fairly self-explanatory:

1. First (if the current button label is Start Broadcast) it creates a new NetStream object on our existing NetConnection object (ns = new NetStream(nc);).
2. It then adds an onStatus handler (ns.onStatus = function(info)[…]), which enables you to see trace output inside the status_txt text area.
3. Next, it grabs a reference to the default camera that's installed mycam = Camera.get(); and calls the setQuality method with a parameter of 25600 bytes and 0 (best possible) image quality at that given bandwidth mycam.setQuality(25600, 0);. Feel free to adjust these settings as you see fit.

4. Next comes the equivalent action for the default microphone:

   mymic = Microphone.get(); 
   mymic.setRate(11);

5. To be able to send audio and video across the Internet, you must attach both sources to the NetStream object:

   ns.attachVideo(mycam); 
   ns.attachAudio(mymic);

6. Now you need to attach the local camera feed to the video object on the Stage. This will enable you to see the feed that you will be broadcasting.

   myvid.attachVideo(mycam);

7. By calling ns.publish(streamname_txt.text, "live") you start the broadcast. You can omit the parameter "live" if you want, because the publish method would actually default to a live stream. However, using this parameter makes matters a little clearer I think.

For more information on setQuality, setRate and all the other Flash Communication Server–related objects and methods you should consult the excellent Flash Communication Server Documentation and Live Docs.

You are now ready for your first test run. Press Control+Enter or select Control > Test Movie to see what happens. Enter a valid rtmp address into the first text box (for example, rtmp:/livecast for local servers or rtmp://yourserver.com/livecast for remote servers), as well as a stream name into the text box below below. Click Connect. Your screen should look somewhat similar to Figure 3 (the cheeky grin is optional).

Figure 3: This is the completed video broadcaster.

Did it work? Great. Pat yourself on the back—now let's build the live video receiver.

Page 3 of 5

Previous Page

Next Page