Requirements

Prerequisite knowledge
Working knowledge of ActionScript 3 and Adobe Flash Builder or Adobe Flash Professional is recommended for this tutorial.
 
User level
Intermediate
Required products
Flash Builder (Download trial)
Flash Media Server (Download trial)

In this article you will create a simple multicast video player using the new features of Open Source Media Framework (OSMF) 1.5, Adobe Flash Player 10.1, and Adobe Flash Media Server 4. This article covers the basic building blocks used to create an OSMF multicast player, specifically focusing on the different classes that can be used or extended for multicast and Real-Time Media Flow Protocol (RTMFP) specific control.
 
Many of these steps can be simplified when using a MediaFactory object and an F4M manifest file, which we cover in Live multicast streaming using OSMF. The example in this article illustrates the underlying mechanisms needed instead of just a simple F4M implementation.
 
This article demonstrates the use of the following classes:
  • GroupSpecifier: This class sets the security and capabilities of a P2P group of connected Flash Player clients. It generates a group specifier string to be used with an RTMFP connection and streaming.
  • MulticastResource: This object is a StreamingURLResource that carries the required multicast information such as the groupspec and streamName used for a P2P based multicast stream.
  • MulticastNetLoader: This class is used to manage the external connection and loading for the VideoElement (MediaElement). It adds specific functionality to the generic NetLoader to manage an RTMFP connection for P2P media streaming.
  • MediaPlayer: This object is a nonvisual item used to manage the playback and control of a MediaElement.
  • MediaContainer: This class provides a visual container for managing the display and layout of a MediaElement object.

Setting up the project

You can use Adobe Flash Builder 4 or Adobe Flash Professional CS5 to complete the steps in this article. After downloading the sample files for this article, follow the steps below to get started.
 
If you're using Flash Builder:
  1. Choose File > Import > Flash Builder Project, select the sample ZIP file, and click Finish.
  2. Open the OSMF_MulticastSample.as file in the {SAMPLES_PROJECT}/src directory.
  3. To set the class file as the application file to compile, right-click the OSMF_MulticastSample.as file in the Package Explorer and select Set As Default Application. This will add the project to the list of compilable applications. A blue dot on the file icon indicates that the file is the default application file.
 
If you're using Flash Professional:
  1. Unzip the sample ZIP file.
  2. In the OSMF_MulticastSample folder, open the src/OSMF_SampleTemplate.fla and save it as OSMF_MulticastSample.fla.
  3. Change the document class for the file (in the Property inspector) to OSMF_MulticastSample.

Breaking out the control objects

Follow these steps to complete the OSMF_MulticastSample class:
  1. Below the //DECLARATIONS comment, make sure you see the following two variables: player typed as a MediaPlayer object and container typed as a MediaContainer object:
public var player:MediaPlayer; public var container:MediaContainer;
 
  1. Locate the initPlayer() method. Under the comment that begins //Create a Group Specifier... , create a local variable named groupspec typed as a GroupSpecifier object.
  2. Pass the MULTICAST_GROUP static constant to the constructor for the GroupSpecifier object:
//Create a Group Specifier which manages the capabilities and requirements of the multicast group var groupspec:GroupSpecifier = new GroupSpecifier( MULTICAST_GROUP );
 
  1. Call the setPublishPassword() method on the groupspec object to set the password to "realeyes":
var groupspec:GroupSpecifier = new GroupSpecifier( MULTICAST_GROUP ); groupspec.setPublishPassword("realeyes");
 
  1. Set the following groupspec properties to true:
    • multicastEnabled
    • serverChannelEnabled
Your code should look similar to the following:
 
//Create a Group Specifier which manages the capabilities... var groupspec:GroupSpecifier = new GroupSpecifier( MULTICAST_GROUP ); groupspec.setPublishPassword("realeyes"); groupspec.multicastEnabled = true; groupspec.serverChannelEnabled = true;
 
  1. Uncomment the trace statement that outputs the "FMLE STREAM NAME".
  2. Under the comment //Create a MulticastResource... create a new MulticastResource variable named multicastResource.
  3. Pass the following arguments to the MulticastResource constructor:
    • uri
    • groupspec.groupspecWithoutAuthorizations()
    • streamName
 
Your code should look similar to the following:
//Create a MulticastResource to connect and manage the RTMFP Multicast. var multicastResource:MulticastResource = new MulticastResource(uri, groupspec.groupspecWithoutAuthorizations(), streamName );
 
  1. Create a MulticastNetLoader variable named netLoader.
  2. Create a VideoElement variable named element and pass multicastResource and netLoader to the VideoElement constructor. You code should look similar to the following:
//Create a MulticastNetLoader which manages the loading and RTMFP connection var netLoader:MulticastNetLoader = new MulticastNetLoader() //creates and sets the MediaElement (VideoElement) with a resource and... var element:VideoElement = new VideoElement( multicastResource, netLoader );
 
  1. Set the player variable equal to a new MediaPlayer object.
  2. Set the container variable equal to a new MediaContainer object.
  3. Call the addMediaElement method on the container object passing it the element object.
  4. Add the container to the display list by calling the addChild() method.
The code should look like the following:
//the simplified api controller for media player = new MediaPlayer( element ); //the container (sprite) for managing display and layout container = new MediaContainer(); container.addMediaElement( element ); //Adds the container to the stage this.addChild( container );
 
  1. Save the file.

Setting up Flash Media Live Encoder

Follow these steps to set up the project for Flash Media Live Encoder:
  1. Run the application in debug mode. After the application starts up the console will output a string similar to the following (see Figure 1):
  2. livestream?fms.multicast.type=3&fms.multicast.groupspec=G%3A01012105f8cd...

Output in the console identifying the Flash Media Live Encoder stream name
Figure 1. Output in the console identifying the Flash Media Live Encoder stream name
 
  1. Copy this string from after "FMLE STREAM NAME: " to the end.
  2. Open Flash Media Live Encoder.
  3. Set the FMS URL to rtmp://localhost/multicast and paste the string you just copied from the console into the Stream text box (see Figure 2).
Configuring Flash Media Live Encoder
Figure 2. Configuring Flash Media Live Encoder
 
  1. Click Start at the bottom of the Flash Media Live Encoder window. Flash Media Live Encoder should begin streaming (see Figure 3).
Streaming in Flash Media Live Encoder
Figure 3. Streaming in Flash Media Live Encoder
 
  1. Return to the browser window in which the Application is running; your stream should now be displayed there (see Figure 4).
Video stream shown in a browser
Figure 4. Video stream shown in a browser

Where to go from here

For more information on multicast and OSMF, see the Open Source Media Framework Developer's Guide (PDF, 1 MB) or visit the Open Source Media Framework website. You may also want to explore the sample projects and templates in the Video Technology Center and the Flash Media Server Developer Center.
 
To learn how to streamline many of the steps covered in this article using the MediaFactory class and an F4M manifest file, read the companion article, Live multicast streaming using OSMF.

More Like This