Beginner's guide to streaming live video with Flash Media Server 3.5

This article is the sixth in a loose series of beginner's tutorials. This particular tutorial shows you how Adobe Flash CS4 Professional, Adobe Flash Media Live Encoder 3, and Adobe Flash Media Server 3.5 team up so you can create live video streams from your own webcam or other sources.

Here are all the articles in the series:

• Part 1: Installing Flash Media Server 3.5
• Part 2: Streaming video with Flash Media Server 3.5
• Part 3: Using ActionScript 3.0 with Flash Media Server 3.5
• Part 4: Security features in Flash Media Server 3.5
• Part 5: Streaming audio through Flash Media Server 3.5
• Part 6: Streaming live video with Flash Media Server 3.5
• Part 7: Dynamic streaming with Flash Media Server 3.5

As a Flash teacher and lecturer who tends to spend an inordinate amount of time in the Flash space, I love to show my students how to use a webcam with Flash. It is one of the easiest things to learn and it has immediate rewards. Inevitably, though, the question is asked: Can I stream this live?

Depending on the audience, this is a rather awkward question to answer. If I am dealing with an advanced group that has a deep understanding of ActionScript, the answer is, "It's a little tricky but not terribly difficult to accomplish." For everyone else, the answer is, "You really don't want to go there."

Until the release of Flash Media Server 3.5, there was also a bit of a gray area: Flash shipped with a set of communication components that could be wired together to create a live streaming video application. These components disappeared with the release of Flash CS4 and Flash Media Server 3.5. You would think I would be a bit bummed that my gray area was pulled out from under me. Not even close. Now when I'm asked about streaming live video, my response is, "Can you click a mouse and type one line of code?"

In this exercise we are going to do the following:

• Use a webcam and Flash Media Live Encoder 3 to create a stream. Just be aware Flash Media Live Encoder (FME) is Windows-only, which means that Mac users without a Windows partition are out of luck.
• Use the FLVPlayback component and one line of ActionScript to feed that stream into a browser.

Every now and then an amazing piece of software hits the street. Inevitably, the company puts it out in public beta and you can't help but think, at some point in the process, "Dang, this is sweet. I sure hope I can afford it." I had that reaction when I first tried out Flash Media Live Encoder (FME). If the truth be known, I still have a hard time grasping the fact that this powerful piece of software is a freebie.

Its purpose is quite focused: to grab a video or audio feed, on the fly, and either encode it or stream it out—live. In this part of the exercise, I'll take you through the FME interface and use it to create an FLV. Keep in mind this will be a "drive-by" exercise; I won't get into the nuts and bolts of using FME. My colleague, Greg Hamer, has already done a really good overview of this process in his article, Webcasting live video with Flash Media Live Encoder.

Follow these steps to make the initial configuration in Flash Media Live Encoder:

1. Make sure you have a webcam (microphone is optional) attached to your computer, and then launch Flash Media Live Encoder. When it opens (see Figure 1), you will see that the interface is essentially divided into two distinct areas: Input on the left and Output on the right. If you don't want the split Input and Output view, deselect the Output Video option. All this does is remove the preview on the right. It has no effect on the final file.

Figure 1. Flash Media Live Encoder interface (click to enlarge)

The input area is further subdivided into separate Video and Audio areas where you can tweak the settings prior to capture or broadcast. If you are unsure of the settings to use, select one of the three presets in the Preset pop-up menu. Still, it doesn't hurt to try this application out, so let's create a simple capture.

2. Select your webcam from the Device pop-up menu. I am using a MacBook Pro with a built-in iSight camera, which explains why I can select only USB Video Device. Were I to have more than one camera connected to my computer, I would be able to choose either my iSight or the Logitech webcam plugged into my USB hub (see Figure 2).

Note: You can use a variety of webcams and even digital video recorders to capture the video. As it says in the FME support documents: Flash Media Live Encoder is designed to work with any Microsoft DirectShow–compliant device or driver. For a list of devices that Adobe has specifically tested, visit the Flash Media Live Encoder Device Compatibility Matrix (PDF, 13K). This list is in no way definitive; it simply lists devices tested by Adobe so far. Your first clue as to its (in)completeness should be the missing iSight camera.

3. In the format pop-up menu, select VP6. This will be the codec used to compress the resulting FLV file. The other choice is H.264. If you have a DV camera that can do HD, select this one. Just be aware that the resulting file won't be the expected QuickTime file. It will be an F4V file, which is the FLV equivalent of an MP4 file.
4. Select a bit rate of 350 Kbps from the pop-up menu. You will be running this out locally, so 350 Kbps will pose no issues.
5. Select 640 × 480 as the physical size for the FLV file and set the frame rate to 24 fps by selecting it from the Frame Rate pop-up menu.
6. If you use an external microphone, such as the Røde Podcaster I use, select it from the Audio Device pop-up menu.
7. Set the audio format to MP3 Mono.
8. Finally, select 22050 kHz from the Sample rate pop-up menu and set the bit rate to 48 Kbps.
9. Use the volume slider to adjust the volume levels of the microphone.

At the bottom of the window, you will see the total bit rate, which is the sum of the audio and video bit rates. This is an important number because it has a direct effect on user experience. If you are unsure as to what numbers to use, head over to Robert Reinhardt's Flash Video Bitrate Calculator.

Having dealt with FLV settings, you can turn your attention to actually creating the FLV file:

1. In the Output area, deselect Stream to Flash Media Server. You don't need this because this capture won't be live.
2. Click the Browse button to open the Save As dialog box. Navigate to your vod folder (C:\Program Files\Adobe\Flash Media Server 3.5\applications\vod\media), name the file, and click the Save button.
3. To start recording and creating the FLV file, click the green Start button. When you click this button, the interface switches to show you the log, which informs you that the video recording process has started (see Figure 3). When you see your video preview, start moving and talking.
4. To finish recording, click the red Stop button. You will be returned to the FME interface.
5. If you wish, feel free to quit FME.

Now that you have created an FLV file, it's time to play it:

1. Launch Flash CS4 Professional (or CS3) and create a new ActionScript 3.0 document.
2. Set the Stage size to 640 × 520 to match the dimensions of the FLV just created and to leave room for the FLVPlayback skin.
3. Drag a copy of the FLVPlayback component to the Stage and set its dimensions to 640 × 480. With the component selected, select Window > Component inspector if you are using Flash CS4 (or click the Parameters tab in the Property inspector if you are using Flash CS3).
4. Double-click the skin parameter and select SkinUnderAllNoFullNoCaption.swf. Click OK.
5. Click the source parameter and enter rtmp://localhost/vod/YourFLVName. Keep in mind that you only need to enter the name of the FLV; you don't need the extension.
6. Save and test the file. As shown in Figure 4, your webcam or other device has moved from an interesting, fun tool to something really practical and important.

Now that you know how to create an FLV file using Flash Media Live Encoder, it's time to put that knowledge to work and create a live broadcast. Here's the interesting thing: the workflow is essentially the same as in the previous exercise. The difference is that, instead of creating a file, you broadcast your stream through Flash Media Live Encoder directly into a web page. Here's how:

1. Open Flash Media Live Encoder. When it opens, don't change the video or audio encoding options.
2. In the Output area, select Stream to Flash Media Server. As soon as you do this, you will notice the URL is automatically set to the live folder in your copy of Flash Media Server 3.5.
3. Select the text in the Stream input text box. This is the name of the file that will be output. The default name is livestream but you can change it to anything you wish.
4. A really neat aspect of Flash Media Live Encoder is its ability to save a copy of the broadcast. Select Save to File, click the Browse button, and save the capture to your vod folder or another location. This is a handy method of creating archives of your broadcasts.
5. At this point, you are almost ready to start your broadcast (see Figure 5). Don't quit Flash Media Live Encoder yet.

In the previous step I used the word "almost" deliberately. You will need to create the Flash file that receives the feed from the live folder of your Flash Media Server:

1. Open Flash CS4 Professional (or CS3) and create a new ActionScript 3.0 document that is 640 × 480 pixels.
2. Drag a copy of the FLVPlayback component to the Stage and set its dimensions to 640 × 480.
3. Select the component on the Stage and open the Properties panel in Flash CS4 (or click the Parameters tab in Flash CS3).
4. Double-click the source parameter and enter rtmp://localhost/live/livestream. Click OK to close the dialog box. Even though you have told Flash where to find the live stream, you haven't told Flash to play the live stream.
5. Select the component on the Stage. In the Property inspector, give it the instance name of myVideo.
6. Add a new layer to the movie and name it actions (see Figure 6).

7. Select the first frame of the actions layer and press F9 to open the Actions panel.
8. Click once in the Script pane and enter:

The isLive property of the FLVPlayback component can have only two values: true or false. This property works only if the feed is streaming from Flash Media Server. If you were not using Flash Media Server—that is, progressively downloading the video from an HTTP address—and you set isLive to true, then Flash would simply ignore the ActionScript and nothing would happen.

9. Close the Actions panel and select File > Publish Settings. When the Publish Settings dialog box opens, select Flash (.swf) and HTML (.html) in the Type list.
10. Click Publish. When it finishes close the dialog box, save the Flash file and quit Flash.

Having created the "feed" using Flash Media Live Encoder and created the SWF file that receive that feed in Flash CS4, you can put your webcam to work and create a broadcast:

1. Return to Flash Media Live Encoder and click the Connect button under the Stream input. This creates the connection between FME and the live folder in your local copy of Flash Media Server. When the connection is made, the button name changes to Disconnect.
2. Click the Start button.
3. Open the HTML page created in Flash and open it in a browser. There will be a short delay but there you are, live and in living color (see Figure 7).
4. When you have finished, return to Flash Media Live Encoder and click the red Stop button. Quit the browser and close Flash Media Live Encoder.

This tutorial showed you how Flash Media Server 3.5 and Flash Media Live Encoder combine to give you a simple-to-master live video and audio streaming capability. If this subject has caught your attention, here are a couple of other articles that will get you going:

• Learning Flash Media Server 3 excerpts: Nonpersistent shared objects and two-way A/V communications: These two chapters from Learning Flash Media Server 3 by William B. Saunders (O'Reilly Media) shows you you how to record and stream media using FMS 3 and the Real-Time Messaging Protocol without the use of Flash Media Live Encoder.
• Working with metadata for live Flash video streaming: This article by Jens Loeffler tells you how to build a Flash video application that incorporates metadata into the live video stream.