Beginning Flash Media Server 4.5 – Part 3: RTMP streaming live video

This is the third in a loose series of beginner's guides on learning Adobe Flash Media Server 4.5. This particular tutorial shows you how Adobe Flash Professional CS5.5, Adobe Flash Media Playback, Adobe Flash Media Live Encoder 3.2, and Flash Media Server 4.5 team up to give you the ability to create live video streams from your own webcam or other sources.

As a teacher and lecturer who tends to spend an inordinate amount of time in the Flash space, Tom loves to show his students how to use a webcam with Flash. It is one of the easiest things to learn and has immediate rewards. Inevitably, though, students ask, "Can I stream this live?"

Depending on the audience, this is a rather awkward question to answer. If we're 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." Now when he's asked about streaming live video, his response is, "Can you click a mouse and type one line of code?"

In this exercise you are going to do the following:

• Use a webcam and Flash Media Live Encoder 3.2 to create a stream.
  
• Use the FLVPlayback component to play a video you capture with your webcam.
• Create a live broadcast that uses Flash Media Server 4.5 installed on your PC.

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." Tom had that reaction when he first tried out Flash Media Live Encoder (FMLE). If the truth be known, he's still having a hard time grasping the fact that this powerful piece of software is free. (It's also available for both Mac OS and Windows.)

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

Note: We are going to be using the Mac OS version of Flash Media Live Encoder 3.2 for the first part of this tutorial so that you Mac users can follow along. If you have a PC, there is no difference in technique. Just be aware that the last part of this article shows you how to stream a live feed from FMLE through the local Flash Media Server 4.5 installed on your PC and will be Windows based for obvious reasons.

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

1. Make sure you have a webcam attached to your computer (microphone is optional) and then launch Flash Media Live Encoder 3.2. On a Mac the application is installed in Application/Adobe/Flash Media Live Encoder 3.2. On a PC you can quickly launch the application from Start > All Programs > Adobe > Flash Media Live Encoder 3.2 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.

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 many 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. We used a MacBook Pro with a built-in iSight camera, which explains the selection Built-in iSight. Were we to have more than one camera connected to our computer, for example, we would be able to choose either our iSight or the Logitech webcam plugged into our USB hub (see Figure 2).

Note: You can use a variety of webcams and even digital video recorders to capture the video. For a list of devices that Adobe has specifically tested for use in this software, visit the Flash Media Live Encoder Device Compatibility Matrix. As you can see, the list is quite comprehensive and even includes audio capture devices. Still, the list is in no way definitive; it simply lists devices tested by Adobe so far.

3. In the format pop-up menu, select VP6. This is the codec we'll use to compress the resulting FLV file. The other choice is H.264, the codec used to create an F4V. If you have a DV camera connected to FMLE, be aware the resulting file won't be the expected QuickTime file. It will be an F4V file, which is the container format somewhat equivalent to an MP4 file. Both the F4V and MP4 files use the H.264 codec.
4. Select a frame rate of 30 fps and an input size of 640 × 480 from the next two pop-up menus. Because we are running this locally, frame rate is not an issue and the input size maintains the 4:3 aspect ratio for FLV output. Be careful about deselecting Maintain Aspect Ratio. If you create a file that does not fall into a 4:3 aspect ratio, chances are very good that the video will be distorted along with artifacts being introduced into the stream.
5. Select 650 as the Bit Rate and change the Output Size values to match the Input Size values from the previous step. As you may have noticed, there are a number of other bitrates listed. This is used when a live stream is being encoded for multiple devices that are able to run the stream at varying bit rates. We talk about this in greater depth in "Part 6: Using HTTP Dynamic Streaming."
6. If you use an external microphone, such as the Røde Podcaster that Tom uses, select it from the Audio Device pop-up menu.
7. Set the audio format to MP3, which is the codec traditionally used for FLV files.
8. 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 of 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 streaming live. We are going to simply capture a short video of you waving at the camera.
2. Click the Browse button to open the Save As dialog box. Navigate to your Exercise folder, name the file FirstTest, and click Save.
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 waving at the world.

4. To finish recording, click the red Stop button. You will be returned to the FLME interface.
5. If you wish, feel free to quit FLME.

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

1. Launch Flash Professional CS5.5 and create a new ActionScript 3 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. Save this file to your Exercise folder.
3. Drag a copy of the FLVPlayback component to the Stage and set its dimensions to 640 × 480. With the component selected, click the Parameters tab in the Panel.
4. Double-click the skin parameter and select SkinUnAllNoFullNoCaption.swf. Click OK.
5. Click the source parameter and click the Browse button to navigate to the FLV file you created.
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. Rather than get into Flash Professional and a lot of code, we are going to use a video technology that is, for the purposes of this article, dead simple to use. The technology is the Open Source Media Framework (OSMF) which we will get into in greater depth in "Part 5: Streaming with OSMF players."

Let's go live with OSMF:

1. Open Adobe Live Media Encoder 3.2 and use the settings in Figure 5 for the Input area:

• Device: The webcam attached to your computer
• Format: VP6
• Frame Rate: 30
• Input Size: 640 × 480 Maintain Aspect Ratio: Selected
• Bit rate: 650
• Output Size: 640 × 480
• Audio: Deselect. We are more concerned with the video than the audio. If you do want an audio stream, be sure to match the audio codec to the video codec. If you are unsure which combination of audio and video codecs works best together with FMS 4.5, you might want to go here.

2. In the Output area, select Stream to Flash Media Server and deselect Save To File.

When you make this selection you are going to see an FMS URL (rtmp://localhost/live/) and, in the Stream area, a stream named livestream will appear. These two little bits of information (see Figure 6) are important; write them down as a path (rtmp://localhost/live/livestream) because you are going to need it when you create the live feed in OSMF.

You may be looking at this path and wondering, "What does it mean?" This is a good question. In Part 2: Streaming on-demand video, you created a VOD application using FMS 4.5, requiring the Flash Media Server to be running. If you open Flash Media Server 4.5/applications on your Windows-based computer, you will see a folder named "live". You can assume from this that the URL in Flash Media Live Encoder is sending the stream directly to this folder on the server. Each stream needs a unique instance name, which is the purpose of the Stream area.

At this point in the process, you need to move away from FLME, without quitting the program, and open Flash Media Playback. You will be using the Configurator, which requires only one bit of information and is a great way of testing any FMS application—live or otherwise.

To use the Configurator, follow these steps:

1. Open your browser and point it to http://www.osmf.org/configurator/fmp/
2. When the Configurator opens (see Figure 7), click once in the Video Source area and enter rtmp://localhost/live/livestream
3. Change the width to 640 and the height to 480 to match the physical dimensions you set in Flash Media Live Encoder. The next step is to feed the stream to Flash Media Server 4.5 and get it playing in the Configurator.

4. Don't close the browser. Open the Flash Media Live Encoder and click the green Start button at the bottom of the interface. You will see an Encoding log.
5. Switch back to your browser and click the Play button in the Configurator's preview player. There will be a delay as the buffer fills but you'll see yourself broadcasting live from your computer (see Tom doing this in Figure 8).
6. To turn off the stream, return to Flash Media Live Encoder and click the red Stop button.

The embed code at the bottom of the preview is really neat. You can simply copy and paste this code into a web page; you don't even need to use Flash to run a live video stream from your website. Just be aware that this is a test and the best results are obtained using a fully functioning Flash Media Server.

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

• 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 explains how to build a Flash video application that incorporates metadata into the live video stream.
• Best free video player ever: Flash Media Playback: Discover the ease of publishing video using the Flash Media Playback video player, learn about the powerful options available, and watch a demo of Greg Hamer inserting the HTML embed code into a web page.

Part 4 covers streaming audio into a Strobe Media Player available to you through the Open Source Media Framework.