Webcasting live video with Flash Media Live Encoder

by Greg Hamer

provenWebVideo.com

Content

Overview of Flash Media Live Encoder

Configuring Flash Media Server

Using Flash Media Live Encoder

Creating a playback SWF file to embed in your web page: Using Dreamweaver CS3

Modified

23 May 2007

Requirements
Prerequisite Knowledge A basic working knowledge of Flash Media Server and either Flash CS3 Professional or Dreamweaver CS3.	Required Products Flash Media Server (Download Trial) Flash Media Live Encoder Adobe Animate CC Dreamweaver (Download trial)	Sample Files Samples.zip (9232 KB)
User Level Beginning

For the world of Flash video, the year 2007 opened with a bang when Adobe released Flash Media Live Encoder. Adding Flash Media Live Encoder to Adobe's product line makes Flash video web broadcasts of live events even easier and of the highest supported quality. Best of all, Flash Media Live Encoder is free to Flash Media Server licensees or users with Flash Video Streaming Service accounts.

This article provides a quick overview of how to set up a live webcast using Flash Media Live Encoder and Flash Media Server.

Overview of Flash Media Live Encoder

Since its inception, Flash Media Server has supported live video and audio streaming. Now adding Flash Media Live Encoder for encoding live web broadcasts offers two important benefits: the highest quality video supported, and quicker, easier deployment.

Flash Media Live Encoder directly delivers the highest quality supported video by using On2 VP6 encoding. Previously, this was only possible through the use of third-party solutions. Flash Media Live Encoder provides quicker, easier deployment by being a fully featured acquisition and encoding application that natively integrates with Flash Media Server. Previously, the acquisition and encoding functionality had to be custom-coded using the Flash authoring tool.

This article provides a basic overview of using Flash Media Server, Flash Media Live Encoder, and either Flash CS3 Professional or Dreamweaver CS3 to create a live web broadcasting application. Figure 1 presents each of these in context with the other elements of a basic live broadcast.

Figure 1. Live web broadcast using Flash Media Live Encoder

The elements of the basic live broadcast illustrated in Figure 1 are as follows:

Live event: The subject to be broadcast—business, educational, or political speakers, performers, sporting events, or any other event.
Audio/video capture: Cameras and/or microphones connected to the computer running Flash Media Live Encoder.
Onsite encoding: Encoding provided using Flash Media Live Encoder on a computer with a reliable Internet connection.
Internet: Liaison between computers running Flash Media Server, Flash Media Live Encoder, a web server hosting the playback SWF file, and the audience's computers.
Flash Media Server or Flash Video Streaming Service servers: Flash Media Server (FMS) provides delivery of the video and audio streams using load balancing, failover, redundancy, and clustering via an origin/edge architecture. The Flash Video Streaming Service (FVSS) is provided through leading content delivery network (CDN) providers. FVSS provides an alternative to owning and operating your own FMS servers.
Web server: Simple HTTP server hosting the Flash SWF file that is downloaded by the audience's computers to receive the webcast event. Only a single playback SWF file is required.
Audience: Internet-connected event audience viewing the event using Flash Player to play the playback SWF file.

The following sections step you through configuring Flash Media Server using Flash Media Live Encoder, and creating a playback SWF file.

Configuring Flash Media Server

Flash Media Server offers a unique combination of traditional scalable streaming media capabilities and a flexible development environment for creating and delivering innovative, interactive media applications to the broadest possible audience. This article focuses solely on Flash Media Server's live streaming capabilities.

This article assumes that you have Flash Media Server installed and running locally. The application setup is the same whether the server is running locally or remotely. You can use any version of Flash Media Server for this task, including the free Developer Edition.

If you do not already have Flash Media Server installed, download it and follow the documentation to install it. To see a video tutorial covering the installation of Flash Media Server 2 on Windows as well as Linux, check out Train Simple videos: Introduction to Flash Media Server 2 in the Flash Media Server Developer Center.

To create a Flash Media Server application for your live video stream, do the following:

Go to the directory [Flash Media Server install directory]\Applications
In the Applications directory, make a subdirectory called myLiveApp.

Note: Make sure that there are no typos in your subdirectory name. Hereafter, this subdirectory name is your Flash Media Server application name, and it will be referred to both in configuring the Flash Media Live Encoder and in authoring your playback SWF file. The spelling in each case must match exactly.
Copy main.asc into the \Applications\myLiveApp directory. A version of main.asc is provided with Dreamweaver CS3. For Flash CS3 Professional users, extract the main.asc file contained in the Samples.zip file linked to at the beginning of this article.
For Dreamweaver users, the required main.asc file can be found in the following Dreamweaver directory:

[drive]:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\Templates\Video_Player

If you are still using Flash Professional 8, you can find the required main.asc file here:

[drive]:\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Components\FLVPlayback

Note: These versions of main.asc contain logic required by components that you will be using to author the playback SWF file in a later section. In Flash Media Server, files with .asc extensions denote files that contain server-side ActionScript logic.
Whichever version of main.asc you use, open it and examine its contents. Look for the application.onConnect function. You may find the line p_client.writeAccess, which prevents live streaming from happening by default. If you see it, be sure to comment out this line as follows:

application.onConnect = function(p_client, p_autoSenseBW)
{
   //Add security here
   //p_client.writeAccess = ""; // prevents creating shared object or live streams.
   this.acceptConnection(p_client);

   if (p_autoSenseBW)
      this.calculateClientBw(p_client);
   else
      p_client.call("onBWDone");
}

That's all the setup required of you on the server side. Before proceeding to the next section, make sure that Flash Media Server is running.

Using Flash Media Live Encoder

Flash Media Live Encoder is designed to enable live event producers to capture audio and video and stream it live to Flash Media Server or the FVSS.

The intuitive user interface of Flash Media Live Encoder works seamlessly with plug-and-play cameras and microphones, and compatible analog-to-digital converters. Flash Media Live Encoder produces live Flash video with On2 VP6 encoding, delivering high-quality footage with size and bit rate flexibility. You also get full audio control with the bit-rate efficient Nellymoser audio codec.

Flash Media Live Encoder installs just like a regular desktop application. Currently Flash Media Live Encoder is available only for Windows XP. To make sure that your computer can run Flash Media Live Encoder, review the system requirements.

Understanding the Flash Media Live Encoder interface

To help you get oriented to the Flash Media Live Encoder interface, Figure 2 highlights the Flash Media Live Encoder's main sections.

Figure 2. Overview of the Flash Media Live Encoder interface

Following is a key with descriptions for the numbered sections in Figure 2:

Menus
Preview displays: input (left) and output (right)
Control panel: preset selector, video encoding settings, audio encoding settings, and output settings (not shown output metadata and encoding log)
Control buttons: start and stop

Note: For a full description of all Flash Media Live Encoder's features, review the in-product help. You can access the help from the main menu by selecting Help > Flash Media Live Encoder Help.

Sending your first live stream from Flash Media Live Encoder to Flash Media Server

To configure Flash Media Live Encoder to send your first live stream:

Hook up a video source to the computer that Flash Media Live Encoder will be running on.
Launch Flash Media Live Encoder.
From the Preset Selector, select the setting for Medium Bandwidth (300 kbps).
In the Video area, from the Device selector, ensure that the video source that you would like to use is both displayed and selected. Also ensure that the Video option is checked.
In the Output area, set the following options to the values indicated (accepting the defaults on the other values should be fine):
- Stream to Flash Media Server: Selected
- FMS URL: rtmp://localhost/myLiveApp/instance1
  Make sure that there are no typos in your FMS URL. This URL is specifying the real-time messaging protocol, followed by host name (localhost), application name (myLiveApp), and creating an instance name (instance1). In the next section, when you create playback SWF files, you will reference this URL and must match the spelling exactly.
  
  Tip: If your Flash Media Server is on a server other than localhost, update the FMS URL here accordingly, along with all following instructions referencing localhost.
- Stream Name: mylivestream
  Note: Ensure that there are no typos in your stream name. In the next section when you create playback SWF files, you will reference this stream and must match the spelling exactly.
- Save to File: Deselected
In the Output area, click the Connect button.
Note: If an error is returned, double-check all the previous steps in both this section and in the prior section.
Click the Start button along the bottom to start encoding.

At this point your stream is live! Now all you need is an audience.

The next section covers creating a playback SWF file you can publish on your website that your audience can download to connect to the live stream. Before proceeding to the next section, however, make sure that Flash Media Live Encoder is started and streaming.

Creating a playback SWF file to embed in your web page: Using Dreamweaver CS3

A key to the power of using Flash video for your live events is the ubiquity of Adobe Flash Player, one of the most widely installed pieces of software in the world.

You have several options for creating Flash playback SWF files so your audience can view live broadcasts from Flash Media Live Encoder and Flash Media Server. This article looks at two: using Dreamweaver CS3 and using Flash CS3 Professional with the FLVPlayback component.

Note: When you test the playback SWF files, if everything is working correctly, the video being streamed by Flash Media Live Encoder should appear almost immediately. If the video being streamed does not appear within 15 or 30 seconds, double-check all the steps for creating the playback SWF file and the steps in the prior sections on Flash Media Server and Flash Media Live Encoder. If the video still does not appear, the layer behind it (if any) will show through. This is true if either Flash Media Server or Flash Media Live Encoder are not started. This is also true if there is any error in configuring the FLVPlayback component at author time.

The Flash video component in Dreamweaver CS3 helps you easily insert and display Flash video in your websites. It's great for Dreamweaver users who are not familiar with Flash because you can insert Flash video into your web pages without using the Flash authoring tool.

To use Dreamweaver CS3 to create a playback SWF file for your audience to use to view the live stream being published from the Flash Media Live Encoder:

Launch Dreamweaver CS3.
Create a new basic HTML file. Save the new file as myLiveVideo.htm in a directory containing no other files.
To launch the Insert Flash Video dialog box, from the main menu select Insert > Media > Flash Video. The Insert Flash Video dialog box will open.
In the Insert Flash Video dialog box, from the Video type pop-up menu at the top, select Streaming Video. The appearance of the Insert Flash Video dialog box changes as shown in Figure 3.

Figure 3. Insert Flash Video dialog box in Dreamweaver CS3

In the Insert Flash Video dialog box, set the following options to the values indicated (accepting the defaults on the other values should be fine):
- Server URI: rtmp://localhost/myLiveApp/instance1
- Stream name: mylivestream
- Skin: Halo Skin 3
- Width: 320
- Height: 240
- Live video feed: Checked
Note: Make sure there are no typos in the values in either your Server URI or stream name. These values must exactly match values previously set in configuring both Flash Media Server and Flash Media Live Encoder.
Click OK.
Save the file with your changes. From the menu, select File > Preview in Browser. When your HTML page opens, you should see the live stream.

You can now customize your HTML page as your requirements demand and publish the resulting files to your website. In addition to myLiveVideo.htm, your directory now contains two SWF files and a copy of main.asc. When publishing to your website, you must copy the HTML and SWF files together!

Regarding the main.asc file, for this article you copied a duplicate of main.asc earlier in the section on configuring Flash Media Server. When you publish to a production server, the contents of this main.asc file must be included in the main.asc file in the application directory on your production server.

Note: If there already is a main.asc file on your production server, be sure to check with your Flash Media Server administrator before possibly overwriting any existing main.asc file.

Creating a playback SWF file to embed in your web page: Using Flash CS3 Professional

Flash CS3 Professional includes the FLVPlayback component, which makes it easy to insert and display Flash video in your websites. Flash CS3 includes both ActionScript 2.0 and ActionScript 3.0 versions of FLVPlayback. The ActionScript 2.0 version is the same FLVPlayback component that shipped with Flash Professional 8. The ActionScript 3.0 version is new with Flash CS3 Professional and includes support for Flash Player 9 features such as full-screen video on playback. For users who are familiar with the Flash CS3 authoring tool, the FLVPlayback components enable you to use Flash video with minimal or no ActionScript code.

Here I cover creating a playback SWF file with both the ActionScript 2.0 and ActionScript 3.0 versions of the FLVPlayback components.

Using Flash CS3 with the ActionScript 2.0 FLVPlayback component

Here's how you use Flash CS3 and the ActionScript 2.0 FLVPlayback component to create a playback SWF file for the live stream being published from the Flash Media Live Encoder:

Launch Flash CS3.
From the main menu, choose File > New > Flash File (ActionScript 2.0).
Save the new file as myLiveVideoAS2.fla.
On the Components panel, expand the Video group and drag an instance of the FLVPlayback component to the Stage.
Select the instance of the FLVPlayback now on the Stage and open the Component Inspector panel. Figure 4 shows the Component Inspector panel after completing the next step.

Figure 4. Parameters tab of the Flash ActionScript 2.0 FLVPlayback component inspector

In the Component Inspector panel, set the following options to the values indicated (accepting the defaults on the other values should be fine):contentPath: rtmp://localhost/myLiveApp/instance1/mylivestream
- Note: When entering the contentPath value, the Content Path dialog box shown in Figure 5 will open. In the dialog box, deselect both options.

Figure 5. Component inspector's Content Path dialog box

isLive: true
skin: ClearExternalPlayMute.swf

Test-publish your SWF file. You should see the live stream.
Publish the SWF file and embed it in your web page.

You can now customize your SWF file as your requirements demand, embed it in an HTML page, and publish the resulting files to your website.

Using Flash CS3 with the ActionScript 3.0 FLVPlayback component

To use Flash CS3 and the ActionScript 3 FLVPlayback component to create a playback SWF file for the live stream being published from the Flash Media Live Encoder:

Launch Adobe Flash CS3.
From the main menu, choose File > New > Flash File (ActionScript 3.0).
Save the new file as myLiveVideoAS3.fla.
On the Components panel, expand the Video group and drag an instance of the FLVPlayback component to the Stage.
Select the instance of the FLVPlayback now on the Stage and, in the Properties panel, assign it the instance name myFLVPlayback.
Again, select the instance of the FLVPlayback on the Stage. This time open the Component Inspector panel. Figure 6 shows the Component Inspector panel after completing the next step.

Figure 6. Parameters tab of the Flash ActionScript 3.0 FLVPlayback component inspector

In the Component Inspector panel, set the following options to the values indicated (accepting the defaults on the other values should be fine):
- skin: SkinUnderPlayFullscreen.swf
- source: rtmp://localhost/myLiveApp/instance1/mylivestream
Note: When entering the contentPath value, the Content Path dialog box shown in Figure 7 will open. In the dialog box, deselect both options.

Figure 7. Component inspector's Content Path dialog box

Select Frame 1 and open the Actions panel. Enter the following:
myFLVPlayback.isLive=true;
Test publish your SWF file. You should see the live stream.
When testing the playback SWF file, the button in the bottom right of the controls will take it full-screen. To cancel full-screen and return to the original size, press Escape.
Publish the SWF file and embed it into your web page.

You can now customize your SWF file as your requirements demand, embed it in an HTML page, and publish the resulting files to your website.

Note: The ActionScript 3.0 FLVPlayback component supports a degree of styling through the properties skinBackgroundColor and skinBackgroundAlpha.

Where to go from here

This article demonstrates how easy it is to add live video to websites using Flash Media Server, Flash Media Live Encoder, and a playback SWF file authored in either Dreamweaver CS3 or Flash CS3 Professional.

If you are interested in going beyond single-camera webcasts, see Kevin Towes' article on Building a live video switcher with Flash Communication Server MX. (Flash Media Server was previously known as Flash Communication Server MX.)

If you are interested in customizing the Flash ActionScript 2.0 FLVPlayback component, read Creating custom video controller skins for the Flash video component in Dreamweaver 8 by Jen deHaan and also Customizing the FLVPlayback component by Dan Carr. To customize the latest Flash video controllers and provide unique user interfaces for navigating through movie content, check out Dan Carr's article, Skinning the ActionScript 3.0 FLVPlayback component.

If you are interested in either authoring a custom playback SWF file (that is, not using the FLVPlayback component) or—for live webcasts—using the acquisition and encoding functionality built into the Flash Player (that is, not using Flash Media Live Encoder), see Stefan Richter's article, Building a simple live video broadcaster and receiver.

Note: The acquisition and encoding functionality built into Flash Player encodes video using the Sorenson Spark codec. The quality of video encoded using the Sorenson Spark codec is generally considered not to be of the same quality as video encoded using the On2 VP6 codec. You can see side-by-side comparisons of recorded video encoded using the two codecs at FlashVideoFAQ.com. Playback SWF files can mix streams encoded using both codecs. You can also learn about comparing different encoding software to find what's most appropriate for your Flash video needs in Elliot Mebane's article, Selecting a Flash video encoder.

Here are some additional resources for studying Flash Media Server:

Encoding best practices for live video (Kevin Towes)
Performance-tuning Flash Media Server 2 for live webcasts using Linux (Jake Hilton and Brent Andrewsen)
Adobe LiveDocs for Flash Media Server 2 (product documentation)
Flash Media Server 2: Streaming media application development (instructor-led course)