Beginning Flash Media Server 4.5 – Part 2: RTMP streaming on-demand video

This is the second tutorial in a series of beginner's guides to working with Adobe Flash Media Server 4.5. In this tutorial, you'll learn how to use Flash Media Server 4.5 to stream a video (SWF file) into a Flash video player using the video on demand service, as well as how to develop simple video applications with ActionScript 3.

Before you begin, review this section to better understand how video on demand (VOD) works and examine some fundamentals about using Flash Media Server 4.5 to stream video.

Previous versions of Flash Media Server (FMS) had a steep learning curve. Many developers found it difficult to configure because it was much more complicated than simply installing the server, launching Flash Professional, generating FLV files, and delivering streaming media.

Here's the fascinating thing about Flash Media Server 4.5: that's exactly what you do.

It's helpful to envision that Flash Media Server 4.5 is built on a client-server architecture: a SWF file is the client and FMS is the server. However, you have to rethink your workflow slightly. Instead of putting your video files in a folder on your web server—the familiar progressive download model—you put the videos in a folder on the FMS server. This folder is known as the "application"; the folder where the media files are located is called the "instance." The path to that folder looks similar to this: rtmp://server/Application/Instance.

You'll learn more about the RTMP path later in this tutorial. It is a bit tricky at first, but once you adjust your workflow and learn the basic concepts it becomes easier to deploy streaming content with Flash Media Server.

The other part of the equation involves a fundamental grasp of server-side ActionScript to start developing applications. The ActionScript could range from a single line of code to hundreds of lines, depending on the complexity of the project.

This latest iteration of FMS marks a significant break with previous standard practice. If you enjoy writing hundreds of lines of code, then you'll adore Flash Media Interactive Server 4.5. If your goal is simply to get your video up and running, then Flash Media Streaming Server 4.5 and its VOD service are tailor-made for you.

In this section you'll begin by configuring everything to prepare the sample project. Follow these steps to get started:

1. Download the sample files for this tutorial provided in the Requirements section. Uncompress the archive file and, within the Exercise folder, open the 01VOD_Samples folder.
2. Navigate to C:\Program Files\Adobe\Flash Media Server 4.5\applications. Locate the subfolder named vod and open it.
3. Copy the three files from the downloaded 01_VOD_Samples folder into the media subfolder, as shown in Figure 1.
4. Close the open windows.

Flash Media Server 4.5 includes the ability to stream video on demand, which explains the folder name: vod. The VOD service enables you to stream video and audio files through the server without writing any application code or configuring the server. You can simply point the Flash FLVPlayback component or a Flash video object to a file in this folder and the file will play—as long as it is an MP4, F4V, FLV, or MP3 file.

After placing the videos in their proper location, you'll learn how to play them locally using the VOD service on the streaming server. Follow these steps:

1. Launch Flash Professional and select File > New > Flash File (ActionScript 3.0) to create a new document. Open the Components panel and drag a copy of the FLVPlayback component from the Components panel to the Stage.
2. Save the FLA file; you can save it in any folder you prefer.
3. Click once on the FLVPlayback component on the Stage to select it. Open either the Parameters panel or the Component inspector (CS4) and enter the following settings:

• align: center
• autoPlay: Selected
• cuePoints: None
• isLive: Deselected
• preview: None
• scaleMode: maintainAspectRatio
• skin: SkinUnderAllNoFullNoCaption.swf
• skinAuthoHide: Deselected
• skinBackgroundAlpha: 1.00
• skinBackgroundColor: #009933

4. Click the Edit button (pencil icon) next to the source option to launch the Content Path dialog box. Enter the following path in the field: rtmp://localhost/vod/Legend (see Figure 2).

The path shown above points to the FLV file and follows the rtmp://server/Application/Instance syntax mentioned earlier. In this case, the server is localhost, the application is vod and the instance is Legend.flv in the media folder.

You may have noticed the distinct lack of the .flv extension in the path after the filename. FMS doesn't require the file extension when playing an FLV file. It's also important to note that when using the FLVPlayback component for streaming, you should not click the Browse button and navigate to locate the video. Browsing to select the video file defeats the whole purpose of using FMS because the resulting path treats the video as a Progressive Download.

Note: You learned how to set the FMS server to localhost in Part 1.

5. Save and test your movie. If all the files are in the correct locations, the video begins playing (see Figure 3).

Flash Media Server 4.5 works with a number of file formats other than FLV. It also streams MPEG-4 (MP4) and F4V files out of the vod folder. If you decide to use these two formats, the content path will be different. Let's stream each one:

1. Create a new Flash ActionScript 3.0 document and set the Stage size to 720 x 520 pixels. This Stage size will accommodate both the physical dimensions of the video and the FLVPlayback component's skin.
2. Save the FLA file; you can save it in any folder you prefer.
3. Open the Component panel and drag a copy of the FLVPlayback component to the Stage. Open the Property inspector and set both its X and Y positions to 0.
4. While the FLVPlayback component is selected, click the arrow icon next to the Component Parameters area of the Property inspector to expand it. Don't worry about the settings. The important option to focus on is the source parameter.
5. Click the Edit button (pencil icon) next to the Source option to open the Content Path dialog box. Enter the following path in the field: rtmp://localhost/vod/mp4:CableCar.mp4 (see Figure 4).

6. Click OK to close the Content Path dialog box. The instance of the FLVPlayback component on the Stage grows to accommodate the physical dimensions of the video file. Use the Selection tool to move the component back into position.
7. Test the movie.

As you may have noticed, things work a bit differently when streaming an MP4 file. As shown in Figure 4, the path to file is:

Unlike an FLV file, it's important to include the file extension (.mp4) to tell FMS what type of file is streaming, referred to in the FMS 4.5 as a stream prefix (mp4:). This file extension requirement is true for other formats that use the H.264/AAC standard, such as the F4V file you'll stream in the next section.

When Flash Player 9,0,115,0 was released, Adobe also introduced the F4V file format. Some Flash developers scratched their heads and wondered why it was necessary. In simple terms, the F4V file format is the wrapper for H.264 video, such as the MP4 file you used in the previous exercise. You can think of F4V files as being similar to FLV files but with added support for H.264/AAC content. The major differences between the F4V format and the MP4 format is that F4V files can only be played through a SWF file, they traditionally have a 16:9 aspect ratio, and, if desired, you can embed cue points into F4V files using the Adobe Media Encoder CS5.5.

To learn more about the Flash Video File Format Specification, read the Adobe Flash Video File Format Specification Version 10.1 to get a comprehensive deep dive into the F4V file format.

Follow these steps to stream an F4V file:

1. Create a new Flash ActionScript 3.0 document and set the Stage size to 720 x 445 pixels. This Stage size will accommodate both the physical dimensions of the video and the FLVPlayback component's skin.
2. Save the FLA file; you can save it in any folder you prefer.
3. Open the Components panel and drag a copy of the FLVPlayback component to the Stage. Open the Property inspector and set its X and Y positions to 0.
4. While the FLVPlayback component is selected, click the arrow icon next to the Component Parameters area of the Property inspector to expand it. Don't worry about the settings. The important option to focus on is the source parameter.
5. Click the Edit button (pencil icon) next to the source option to open the Content Path dialog box. Enter the following path in the field: rtmp://localhost/vod/mp4:SandRiver.f4v (see Figure 5).

If you've previously developed Flash projects that have size limitations, you may have avoided using the FLVPlayback component because it adds 52 KB to the published SWF file. When size matters, you can use a Video Object from the Flash Library instead.

In this tutorial, you'll skip using the FLVPlayback component and feed the video from the vod folder into a video object on the Stage. Follow these steps:

1. Open the 02_AS3 folder located in the sample files. Copy the Vultures.mp4 file to the vod folder.
2. Double-click the MP4_StreamVOD.fla file in the sample files to open it in Flash Professional.
3. When the file opens, you will notice that the interface has already been created.
4. The video object, with the instance name myVideo, is located in the video layer. All that remains to complete the application is to add the ActionScript 3.0 code. Select Frame 1 in the actions layer and press the F9 key to open the Actions panel.

Note: The video object you use should match the dimensions and/or the aspect ratio of the FLV or MP4 file you are playing. The default size for a video object on the Stage is 160 × 120 pixels. This is a 4:3 aspect ratio and works with FLV files that use this ratio. If you are using HD content that uses the common 16:9 aspect ratio, failing to resize the video object to the correct aspect ratio or video dimensions will result in a distorted video when it is displayed in the video object.

5. Click once in the Script pane and enter the following code:

The code begins by declaring a variable for a streamClient Object which FMS uses to manage bandwidth. Bandwidth detection—called native bandwidth detection—is built into FMS. It is a best practice to include a small function in the ActionScript code that calls the bandwidth functions built into the server. The next two variables are assigned to the NetConnection and NetStream classes that will be used to prepare the video for playback.

The last line tells FMS what to do while performing the bandwidth detection.

With the variables in place, the next step involves making the connection to the server.

6. Press the Return/Enter key twice and enter the following code:

The code alerts Flash that a client object has been created and this object will be checking bandwidth flowing into the client. After conveying this important information, the next lines of code tell Flash where the connection is being made. The last line prompts Flash to listen for the connection and display its status through a function named netStatusHandler.

7. Press Return/Enter key twice and add the following code to the script:

The netStatusHandler listens to the calls made between FMS and the SWF file. The specific conversation it is listening for is FMS telling the SWF file that the NetConnection has connected successfully to FMS. The next line—trace("Stream Found")—confirms this by displaying a message in the Output panel of Flash Professional (see Figure 6). If the NetConnection finds the stream, the next line tells Flash to start playing the video. The rest of the code is rather obvious: Display an error message in the Output window if the stream is not found and wait.

8. Press the Return/Enter key and enter the remaining code:

As you review the code above, you may be wondering why the stream is inside a function rather than on its own. The previous code block is the answer. The video only plays after confirming that there is a successful connection to the Flash Media Server.

The first line in the beginStream handle attaches the NetStream to the NetConnection and the next two lines create the NetStream client and add two seconds of video to the buffer before the video plays. The next lines include the usual play method associated with ActionScript, but it is important to note that you need to include the media type, mp4: (including the colon), in the string. Because you are using FMS 4.5, you don't need to add the file extension to the video's name; however, it is a best practice to include it.

Still, in this example you are using two versions of the video file in MP4 and F4V file formats. If you don't add the extension, it could result in the wrong video playing. The final line of the beginStream handler attaches the NetStream to the video object with the instance of myVideo on the Stage.

Note: If you were using an FLV file instead, the play string would be "Vultures" . Remember that you don't need to add the media type when streaming FLV files.

The final line of the code just initializes the onBWDone handler.

9. Save the FLA file and test the movie. You'll notice a slight delay as two seconds of the video is added to the buffer. When it finishes buffering, you can watch the video featuring a nest of baby turkey vultures (see Figure 7).

In this section you'll learn tips and strategies when streaming content on a real, live Flash Media Server 4.5 server.

The main difference involves changing the source parameter in the FLVPLayback component or the nc.connect(); parameter in ActionScript. You need to replace localhost with the RTMP address supplied by your Flash Media Server hosting provider. Of course, you also need to upload the video file to your account on the hosting provider's server but other than changing the address and uploading the media, you really don't need to do much more than that.

Note: Remember that Flash Media Server hosting providers have unique requirements. To learn more, read the Consumer's guide to using a Flash Media Server hosting provider by Influxis. Depending on the provider you use, the RTMP address and workflow may be a bit different, so it's always best to check with your hosting provider as you get started.

Creating a streaming video application

At this point, you have allowed FMS 4.5 to automatically feed a video stream from the vod folder into the FLVPlayback component or a video object on the Stage. There may come a time when the vod folder is more of a hindrance than an asset, however. Also, the vod folder is a feature of Flash Media Streaming Server. If you are using Flash Media Interactive Server, you'll need to create an application that plays from this server.

Actually, it is not terribly mysterious to use, but if you are new to FMS 4.5 it can be a bit confusing. The first difference is that your publishing point is not a vod folder; it is your applications folder. This folder is placed in the applications folder of FMS 4.5 but you name it.

The next big difference is the use of an instance. This has nothing to do with ActionScript. An instance is a specific folder named _definst_ that you must create and must contain the video or audio files.

Note: The folder name _definst_ is short for "default instance" and is a common best practice within the FMS community. The Flash Media server will always look for a _definst_ folder when a path does not exist in the netConnection() URL.

Additionally, there is usually an ASC file in the application folder that contains some relatively simple server-side code. In this section you'll take a look at how this works:

1. In the sample files, locate a folder called 03_ VideoApplication and open it. It contains a folder named BabyVultures. This is the application you'll be using.
2. Open the BabyVultures folder to find a folder named streams and a file named main.asc. This file is commonly named main.asc because it contains the server-side code that makes the application work and can be used in multiple applications (see Figure 8).

You can create ASC files in Flash Professional by choosing File > New and select the ActionScript Communication File option in the New Document dialog box (see Figure 9). Optionally, you can also use Adobe Dreamweaver CS5.5 or a text editor to write the code. When you are finished, save the file with the .asc extention.

Note: Thanks to our colleague Lisa Larson-Kelley for the use of this main.asc file.

3. Open the main.asc file to see the server-side code:

The code above says that when the client connects, the FMS 4.5 server accepts the connection from the SWF file. This is an extremely simple example of a main.asc file. As you start moving into the realm of shared objects and using custom components, this code can become very complex and run to hundreds of lines.

4. Close the ASC Flash document and open the streams folder to locate the _definst_ folder. This is where you'll place the media. For this example, if you open the _definst_ folder, you will find a copy of the Vultures.mp4 file.

Note: If you want to create a simple stream without server-side code, it is no longer necessary to create an ASC file. Just create the application and copy the video file into the _definst_ folder that is located in the streams folder.

Now that you know how the application is structured, it's time to put your new knowledge to use and stream the video:

1. Open the applications folder (C:\Program Files\Adobe\Flash Media Server 4.5\applications) and copy the BabyVultures folder from the 03_VideoApplication folder to the applications folder. You have just created an application named BabyVultures whose path is C:\Program Files\Adobe\Flash Media Server 4.5\applications\BabyVultures. Now the only task that remains is to hook up the application.
2. Double-click the MP4_StreamApp.fla file in the 03_VideoApplication folder to open it in Flash Professional CS5.5. If you are working with Flash Professional CS5 or Flash Professional CS4, you'll find corresponding versions of the file in the Flash_Older folder.
3. Select Frame 1 of the actions layer and open the Actions panel.
4. In the Actions panel, click once in the Script pane. Remove the comment on Line 2 and change the parameter in line 11 to:

The big difference compared to the previous example is the NetConnection string. The publishing point has changed from the vod folder, which you have used in all examples in this series, to BabyVultures, which is the application.

Note: If you want to add a degree of security or digital rights management (DRM) to this file, change rtmp to rtmpe to automatically encrypt the stream.

If you save the FLA file and test the movie in Flash at this point, the video will play (see Figure 10).

The great thing about the Flash Media Server is that it locates the files to play. When the connection is made, it automatically searches for a streams folder. When it finds the folder, it recognizes that video found in the ns.play() method is file located in the _definst_ folder. FMS immediately identifies that folder, finds the video, and streams the media.

It is important to keep in mind that what you are using here is a folder named _definst_. If you rename that folder to some other name, like "media", the code won't work and FMS will present an error indicating that it can't find the stream.

Part 3 in this series shows you how Flash Media Live Encoder 3.2 and Flash Media Server 4.5 allow you to broadcast live—from your computer.

Be sure to check out the Flash Media Server Developer Center to find helpful articles, tips, and other sample projects, too.