7.4. Enabling Multiple Bit Rate FLVsWithin an Application

• Change the frame rate of the stream for the receiving client. With client-side ActionScript, you can use the NetStream.receiveFps( ) method to lower the frame rate of a streaming FLV published from a FlashCom application.

• Encode multiple FLV files, with each file targeted at a specific bit rate. For example, if you know that you'll have dial-up and broadband users subscribing to streams on your FlashCom Server, you could encode your source video clips at 39 Kbps and 384 Kbps, respectively. The higher bit rate stream could be viewed by the broadband users, while the lower bit rate stream would be available for the dial-up users.

In this section, you learn how to efficiently handle the latter option by building a Flash movie that can dynamically switch between two FLV files of the same content. To see an example of the system you're about to dissect, check out the following URL:

http://www.flash-communications.net/examples/ch07/MultiBitrateStreamer

Because FlashCom can seek anywhere within a stream and serve specific portions of that stream, the MultiBitrateStreamer component used in this exercise does not have to download either stream in its entirety.

7.4.1. Preparing the FLV Files

The first step to enabling multiple bit rate streams for your FlashCom application is to create an FLV file for each bit rate. With the MultiBitrateStreamer component used in this section, you can switch between two qualities of the same content. Thus, two FLV files can be created with your preferred FLV encoding application. In the following example, download the MPEG-2 file from the Open Video Project web site:

http://www.open-video.org/details.php?videoid=4425

Once you have downloaded this video clip (or have located a source clip of your own), you're ready to compress two versions of the clip in FLV format. We recommend using an encoder that can batch process files, such as Sorenson Squeeze or Wildform Flix. Otherwise, you can use the Flash Video Exporter tool that ships with Flash Pro.

To create two bit rate-specific FLV files using Sorenson Squeeze 4.0:

7.4.2. Configuring the FCS Application

The process for using multiple bit rate FLV files is the same as utilizing any FLV file for a FlashCom application. The FLV files are copied to an instance folder of the streams folder within your application folder. For example, if you want your FLV files accessible to the default instance, _definst_, of an application named broadcast, you would create the folder structure shown in Figure 7-29.

Figure 7-29. The folder structure for the stream locations

You can also set up your FlashCom Server to point to a location outside of your application instance folder by using a virtual directory. Virtual directories are visited later in this chapter and discussed in "Uploading Prerecorded Streams" in Chapter 5.

Once you have copied your FLV files to the streams/_definst_ folder (or your preferred application instance folder), you need to add the Server-Side ActionScript code necessary for the custom StreamController component used for this exercise. At the root of your application folder (e.g., applications/broadcast), create a text file named main.asc with the following code:

Client.prototype.getLength = function (streamName) {
  return Stream.length(streamName);
};

The getLength( ) method enables the StreamController component to retrieve the duration (in seconds) of a stream or FLV file, accessible from the application instance.

7.4.3. Providing an Interface to Select and Switch the Streams

To understand how a multi-bitrate controller works, download the following file from the book's web site:

http://www.flash-communications.net/examples/ch07/MultiBitrateStreamer/MultiBitrateStreamer_100.zip

After you have downloaded the file, uncompress the archive to access the .fla and .as files associated with this sample. Open MultiBitrateStream_100.fla in Flash MX 2004, and open the Library panel. Double-click the MultiBitrateStreamer component. As shown in Figure 7-30, this component has three primary elements:

Display area

The mcVideo instance at the top of the component's Stage is a movie clip instance containing a nested Video object named vWindow. The mcVideo instance can scale based on the dimensions of the source video clip it is displaying.

Control bar

Below the mcVideo instance is the cscControl instance, which is an instance of the StreamController component, located in the MultiBitrateStreamer assets folder of the Library. This component works much like the MediaController component, yet it adds less weight to the overall file size of the Flash movie. The StreamController can pause, play, and scrub the video stream. The current time and duration of the stream are also displayed below the control interface.

Radio buttons

Two RadioButton instances are located below the cscControl instance. The crbLow instance, labeled Low, is the default option. When this button is selected, the stream playing in the mcVideo instance will be the low-quality FLV stream. The crbHigh instance, labeled High, enables the high-quality FLV stream to play.

Figure 7-30. The timeline of the MultiBitrateStreamer component

The StreamController and RadioButton instances use a Miniml font face called hooge 05_53. While you may not be able to see this font display within the Flash MX 2004 IDE, the published file loads the font from the MultiBitrateStreamer_library.swf file. This file must be uploaded to the web server along with the Flash movie containing the MultiBitrateStreamer component. You can purchase several pixel-based fonts designed for Flash movies at http://www.miniml.com.

Now, open the MultiBitrateStreamer.as file. This is the class file used by the MultiBitrateStreamer component. For the purposes of this example, the publicly inspectable variables of the component are discussed, in addition to the switchQuality( ) method. At the top of the .as file, the following public variables are exposed. You can set these values in the Parameters tab of the Properties panel for each instance of the MultiBitrateStreamer component:

[Inspectable(defaultValue=false)]
public var initHigh:Boolean;
[Inspectable(defaultValue=160)]
public var lowWidth:Number;
[Inspectable(defaultValue=120)]
public var lowHeight:Number;
[Inspectable(defaultValue="stream_low")]
public var lowStreamName:String;
[Inspectable(defaultValue=320)]
public var highWidth:Number;
[Inspectable(defaultValue=240)]
public var highHeight:Number;
[Inspectable(defaultValue="stream_high")]
public var highStreamName:String;
[Inspectable(defaultValue="rtmp://localhost/broadcast")]
public var fcsURL:String;

The first variable, initHigh, determines whether the high-quality stream is the first stream displayed in the mcVideo instance. By default, the value is set to false.

The lowWidth and lowHeight values establish the dimensions of the low-quality stream, as displayed by the mcVideo instance. The lowStreamName value sets the low-quality stream's name, which is the name of the low-quality FLV file you compressed earlier in this sectionwithout the .flv extension.

The highWidth, highHeight, and highStreamName values work the same as their low counterparts, except that they are used with the high-quality stream.

The fcsURL is the RTMP path to your FlashCom application instance.

The switchQuality( ) method is the listener method used by the crbLow and crbHigh instances, as initialized by the init( ) method. The switchQuality( ) method stops the currently playing stream by invoking play(false) and begins playback of the alternative stream. The playedTime variable retrieves the current time of the stream from the StreamController instance, cscControl. Note that this time value is not equivalent to the NetStream.time of the currently playing streamNetStream.time is a relative time value; it will reset to 0 each time you initialize a new NetStream.play( ):

public function switchQuality (oEvent:Object):Void {
  var newQuality:String = oEvent.target.data;
  var owner = oEvent.target._parent;
  var playedTime:Number = owner.cscControl.time;
  var streamToPlay:String =
       newQuality == "low" ? owner.lowStreamName : owner.highStreamName;
  owner.activeStream.play(false);
  owner.vWindow.attachVideo(null);
  owner.activeStream.play(streamToPlay, playedTime,
                        (owner.cscControl.isPaused ? 0 : -1) );
  owner.vWindow.attachVideo(owner.activeStream);
  owner.cscControl.streamName = streamToPlay;
  if (!owner.cscControl.isPaused) owner.cscControl.streamTime =  playedTime;
  owner.streamQuality = newQuality;
  owner.size( );
}

If you go back to the main timeline of the MultiBitrateStream_100.fla document and select the instance of the component on the Stage, you'll notice that the Properties panel contains working values for the sample stream compressed earlier in this section. If you test the movie and have a connection to the Internet, the low-quality FLV stream will load into the mcVideo instance. Clicking the high-quality radio button resizes the mcVideo instance and loads the high-quality stream. If you have configured your FlashCom Server with an application instance containing your multiple bit rate FLV files, go back to the Flash MX 2004 IDE and change the fcsURL path in the Properties panel to reflect the location of your application.