Webcasting live video with Flash Media Live Encoder
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)
Dreamweaver (Download trial)
|
Sample Files
Samples.zip (9232 KB)
|
User Level
Beginning
|
||

- 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.
- 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_PlayerIf 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 linep_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");
}
Understanding the Flash Media Live Encoder interface

- 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
- 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/instance1Make 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.
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.
- 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.

- 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.
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
Using Flash CS3 with the ActionScript 2.0 FLVPlayback component
- 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.

- 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.

- 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.
Using Flash CS3 with the ActionScript 3.0 FLVPlayback component
- 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.

- 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.

- 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.
Note: The ActionScript 3.0 FLVPlayback component supports a degree of styling through the properties skinBackgroundColor and skinBackgroundAlpha.
Where to go from here
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.
- 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)
- Encoding live video to H.264/AVC with Flash Player 11
- Beginner's guide to streaming audio through Flash Media Server 3.5
- Beginner's guide to dynamic streaming with Flash Media Server 3.5
- Beginner's guide to using ActionScript 3.0 with Flash Media Server 3.5
- Streaming AAC/MP3 files with Flash Media Server 3
- Beginner's guide to installing Flash Media Server 3.5
- Beginner's guide to streaming video with Flash Media Server 3.5
- Protecting online video distribution with Adobe Flash media technology
- Live dynamic streaming and DVR for non-developers
- Setting a crossdomain.xml file for HTTP streaming
Tutorials & Samples
Flash Media Server Forum