Test Media Player

July 14, 2010

After numerous calls to help people confirm that the server was working correctly I decided to write a media player that would help test and confirm the ability to stream video from the Flash Media Server. This player is provided as is with no warranty or support but I hope you will find it useful. This is an AIR based player.  I created it for AIR for a number of reasons not the least of which that it was easy to install and run locally with out the need for an http server. I have already thought of a few additions so let me know if you find it useful. It is simple to use, just enter the url to some media on an FMS server in the following form:

URL Syntax: rtmp://[servername]/[application]/[streamname+extension]

1)     [servername]: this is the IP Address, or the domain name of your server. (i.e. localhost)
2)     [application]: use “vod” unless you have created a new directory in the application folder of the Flash Media Server installation directory. There are two built in applications vod and live.
4)   [streamname]: use the name of your video file (including the extension). The extension can be flv, f4v or mp4. You do not need to prefix the file name with the content type (e.g. mp4:).

The application reports Current Bitrate, Dropped Frames as well as Max Bytes Per Second and other useful messages. When you stop the video you will be presented with a graph and grid of the captured data.

AIR Test Media Player

AIR Test Media Player

You can download the application here.


Flash Media Server Configuration Limiting Bandwidth

June 11, 2010

Overview:
This will most likely turn into a series but I had to start some where. In this article I am going to cover a topic that comes up regularly, configuring the Flash Media Server to support multiple networks with different bandwidth capabilities. To be more clear imagine a central data center with the Flash Media Server installed and multiple remote locations with constrained bandwidth connections to the data center. How do you limit the amount of bandwidth consumed by one location with out limiting every other location?

The first thing to be aware of is that the Flash Media Server is very configurable. With a single server installation you can serve multiple networks with multiple virtual hosts that each have their own configuration. These configurations are handled by editing xml configuration files and creating directories in the conf directory of the Flash Media Server installation folder. For this article I am going to focus on creating a virtual host for each remote site and assume that we do not need multiple adapters. The configuration guide gives the following guidance regarding virtual hosts and adaptors:

“You can assign an IP address or a port number to an adaptor, but not to a virtual host. For this reason, use adaptors to organize virtual hosts by IP address or port number. For example, if a virtual host needs its own IP address to configure SSL, assign it to its own adaptor.”

Getting Started:
The process of creating a virtual host is fairly easy. First you locate the conf directory in the Flash Media Server installation directory.  Then create a folder with the name of the virtual host inside conf/_defaultRoot_/. This name is important as it will be the name you use to create a DNS entry. A DNS entry is required so that all requests coming to the server with that name are directed to the appropriate virtual host. If you are setting up a development environment (this will not work in production) you can use a the host file to map the virtual host name (e.g. www.first.com) to the local ip address (e.g. 127.0.0.1).  In my host file I have the following entry:

127.0.0.1       www.first.com

If I had two virtual hosts setup (www.first.com and www.second.com) the DNS entry is used to direct the requests to the appropriate virtual host even though they are on the same server with a single instance of the Flash Media Server installed. To elaborate that would mean that I would have two folders in the conf/_defaultRoot_/ directory the first would be www.first.com and the second would be www.second.com.

Flash Media Server Directory for vhost

Flash Media Server Install Directory and vhost folders

Once the folders are created you will copy the Application.xml and the vhost.xml file from conf\_defaultRoot_\_defaultVHost_ and paste copies into both the www.first.com folder and the www.second.com folder. The Users.xml file is required only if you are defining administrators for this virtual host. Finally you will specify the location of the application directory for each virtual host in the vhost.xml file. This is required to avoid namespace conflicts. The application directory will hold the server side script and optionally content if you want different content for each virtual host. You can think of the application directory that you just created as being synonymous with the vod and live directory in the top level of the application folder in the Flash Media Server installation folder. The entry in the vhost.xml file to setup an application directory (you have to do this for each virtual host) should look something like the following:

<AppsDir>C:\myvhostApplications\first</AppsDir>

Notice that I do not have to use the name of the vhost folder (www.first.com) this is simply the location where we will  store server side script and or content. For the sake of completeness, for the vhost.xml file in the www.second.com folder inside  conf/_defaultRoot_/ you would have an entry similar to the following:

<AppsDir>C:\myvhostApplications\second</AppsDir>

The applications directory is the base directory where all applications for this virtual host is defined. You can store the video files in these directories but since the goal of this article is to show how to limit bandwidth it is assumed that each location would want access to the same content. If that was not the case you could simply create a sub folder streams and an other folder called _defInst (default instance) for each of the following and put the content for that virtual host inside that directory.

C:\myvhostApplications\first

C:\myvhostApplications\second

directory listing for the vhost application and content

vhost application and content directories

The goal of this example is to serve multiple vhosts which will serve multiple locations with varying bandwidth limits with the same content available for each virtual host. We will use the settings in the vhost.xml file to limit the number of streams available for each virtual host.

In order to limit the total number of connections from a given location to a virtual host on the Flash Media Server we will use the MaxConnections setting found in the vhost.xml file of each virtual host. In other words inside the www.first.com folder inside conf\_defaultRoot_ you will find the vhost.xml file with the MaxConnections setting.

<MaxConnections>-1</MaxConnections>

By default it is set to -1 which means unlimited. You can set this to what ever number makes sense for your circumstance.

It will also be a good idea to disconnect idle viewers so that after a specified idle time some else can view content. This is also handled in the vhost.xml file for each virtual host with the following setting where the MaxIdleTime is the  maximum idle time allowed, in seconds, before a client is disconnected.

<AutoCloseIdleClients enable=”false”>
<MaxIdleTime>600</MaxIdleTime>
</AutoCloseIdleClients>

It turns out that there is a hidden configuration that sets the amount of time that the server waits to check the configuration. The value is in seconds, and 60 is the default. Together these two numbers represent the amount of time before an idle user is disconnected.

<AutoCloseIdleClients enable=”true”
<CheckInterval>60</CheckInterval
<MaxIdleTime>600</MaxIdleTime>
</AutoCloseIdleClients>

Example:|
As an example assume that you have a number of remote locations with 500 kbps of available bandwidth and you want to make sure that no more than 500 kbps of content are served across that connection at any time. By setting up virtual hosts for each remote location you can set a MaxConnections limit for each virtual host that would limit the number of people that could watch video from that location at any given time. The next step is to make sure that you encode your content to fit with in that limit. This is not the article to talk about encoding but for the purpose of clarity, I would follow the following guideline.  Make sure that you use constant bitrate encoding (CBR) not variable bitrate encoding (VBR) and make sure that the total bitrate is less than the available bandwidth (500 kbps). As an example if I had 500 kbps I might encode my video at 350 kbps and my audio at 90 kbps and that would give me a total of 440 kbps.

Finishing the Configuration:

Now that the virtual host is setup and the content is encoded lets add an entry to each vhost.xml file so that they can have access to the same content. I should point out again that you could simply have copies of content in each virtual host application directory specified by the <AppsDir> setting but if the content is that same that is needlessly using drive space. A better approach would be to have a single directory of content that is shared between virtual hosts. You can do this with a setting in each vhost.xml file called <Streams> in side the <VirtualDirectory> tag. I used the following setting that tells each virtual host with this setting in the vhost.xml file to look in the C:\vhostContent directory for content.

<Streams>/;C:\myvhostContent</Streams>

With this setting there is no need for subfolders you can simply put your video files in the myvhostContent directory.

This setting can be used to group virtual hosts. Remember that the process of limiting bandwidth is based on two criteria. First limiting the number of connections using MaxConnections in the vhost.xml file. Second encoding your content to a specific bitrate that does not over run your available bandwidth. In the example in this article I used 500 kbps of available bandwidth and encoded the content to a total of 440 kbps. If you had groups of remote locations that were similar, for instance lets say that you had four locations that had t1 (1.54Mbps) connections and four locations that had with OC3 (155 Mbps) connections depending on the available bandwidth for each group you would want two sets of content. In this scenario you would have eight virtual hosts. You would edit the vhost.xml file for each virtual host and point it at a one of two content directories using the <Streams> setting mentioned earlier. In this way you would only have two copies of the content but they would be encoded at different bitrates.  For the t1 connections I might encode my content to be under 300 kbps and for the OC3 connection I might encode my content to be 900 kbps or even use Dynamic Streaming to get the most out of the content and connection.

Playing the Content:
So now that we have everything setup how do you play the content. Just to keep things simple lets use Flash CS5. Make sure that you have the newest Flvplayback (version 2.5) component, you can download it from here.  Create a new file (file > new > actionscript 3) then drag the FlvPlayback 2.5 component out onto the stage (save the file). In the property inspector open the source property and enter the protocol (rtmp://) then the name of the folder that represents the name of the vhost (www.first.com) then the application name.  The application name is the name of a folder inside the application directory. Remember that the application directoryis what we specified in the AppsDir setting of the vhost.xml file.

<AppsDir>C:\myvhostApplications\first</AppsDir>

If we consider the preceding setting in the vhost.xml file the application name would be a folder inside the folder with the name first. Lets refer to the application name as simpleAppand lets assume that the video we are going to play is myvideo.flv. That would mean that the source property for the FlvPlayback component would be:

rtmp://www.first.com/simpleApp/myvideo.flv

Summary:
Lets review what we have done. First we created a folder (www.first.com) that represents a virtual host in the conf\_defaultRoot_ directory of the Flash Media Server installation directory. This name is mapped to the machine IP adddress with a DNS entry for production or a hosts file for a development environment. We copied the vhost.xml and application.xml file into that folder (www.first.com) from the conf\_defaultRoot_\_defaultVHost_ folder of the FMS installation folder. We added an entry to the <AppsDir> setting in the vhost.xml file as well as the <MaxConnections>- setting. The <AppsDir> sets up an application directory for the virtual host and the MaxConnections setting limits the number of connections coming into that specific virtual host. Then you encoded your content to fit within the bandwidth limits required for that virtual host and finally we added an entry to the <Streams> so that groups of virtual hosts could have access to the same content without having to copy the same content into every virtual host application directory. Finally you will have to create different Flash / Flex applications or pass in variables so that each location uses the correct connection string (rtmp://{virtualhost}/{application}.{video}). Check out an article that I wrote regarding how to pass variables into Flash using the query string.


Passing Variables Into Flash using the Querystring

June 7, 2010

I decided the write this post because I have been getting numerous requests for using a simple media player (Flash) with a dynamic html page. In other words people would like to have a list of videos in html as links and when you click the link the video reference is passed into the media player (Flash) and plays the video. There are a number of ways to accomplish this task but for this example I am going to show how you can have one page pass variables to a second page via the querystring, the second page picks up the variables using swfobject and passes them into the media player.

The example files are setup so that the home.html page has the link with the name value pairs (querystring). When you run the home.html page in a browser and click the link the player.html page with load. If you look at the location field of your browser you should see something like the following:

http://localhost/passingVars/player.html?videourl=rtmp://localhost/vod/sample.flv&videocaption=just%20a%20bit%20of%20text

First notice that this is running on an http server (e.g. http://localhost). Second notice that there is a ? after player.html, the next section contains two name /  value pairs. The first starts with videourl (is the variable) then rtmp://localhost/vod/sample.flv (is the value). Next you will notice a & symbol this is the beginning of the second name / value pair. Finally videocaption is the second variable and just%20a%20bit%20of%20text is the value of that variable. The value is url encoded.

In player.html there is some javascript that picks up the variables and values from the query string and passes them into the Flash file (final.swf). The following captures both the variable name and the value:

if (swfobject.getQueryParamValue(“videourl”)) { flashvars.videourl = swfobject.getQueryParamValue(“videourl”); }


if (swfobject.getQueryParamValue(“videocaption”)) { flashvars.videocaption = swfobject.getQueryParamValue(“videocaption”)

The preceding also adds the variable names and values to to the flashvars object which makes them available to the Flash file. In the Flash file I am able to retrieve the values using the following actionscript:

var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;

if(paramObj.videourl){
msg_txt.appendText(“\t” + “videourl : “+ paramObj.videourl + “\n”);
msg_txt.appendText(“\t” + “videocaption : “+ paramObj.videocaption + “\n”);

Then it is a simple matter to pass the value for the video uri to the FlvPlayback component. You can find and download the example here. The Flash source file is in the assets folder (final.fla). This file will require Flash CS5.


Choice!

May 18, 2010

And Its Off! Nicely Done!

May 4, 2010
Flash Takes Off

Flash Takes Off


High Quality Video In Adobe Connect

April 28, 2010

This article assumes that you have some knowledge of and access to an Adobe Flash Media Server as well as the free live encoder from Adobe called the Flash Media Live Encoder.

I wrote a simple custom pod that will allow you to stream high quality live video from the Flash Media Server to the free custom pod mentioned here that is being shared in a meeting room in Adobe Connect. For now the custom pod only supports live video not vod (file based video).

This approach does not nullify bandwidth requirements but it allows you to benefit from the capabilities that Flash Media Server provides around streaming high quality video.  In other words if you stream a 2 Mpbs video to this custom pod hosted in a Connect meeting room the attendees of that meeting room will need more than 2Mbps to view it. The reason they will need more than the video requirement is that the Connect meeting room as a bandwidth requirement as well that needs to be taken into account.

When you download the custom pod you will notice that it is just a Flash file (swf). This custom pod is provided free as is with no support. Open an Adobe Connect meeting room. Open a share pod if one is not already open and click the button labeled “Documents” from the popup menu select “Select from My Computer…”. Navigate to the custom pod (fmsVideo.swf) select and upload it to the meeting room.

Notice the green dot in the upper left hand corner of the custom pod. That is used to open and close the settings. The setting will automatically close when the custom pod makes contact with a Flash Media Server. It also functions as a visual indicator of your connection state. Green indicates that you are connected and red indicates that you are not connected. The indicator does not change immediately when you connect or disconnect there may be a several second delay between changes in that indicator.

You will also notice in the preceding  screen (custom pod) that only two elements are required in order to play the live stream ( server url starting with rtmp and the stream name). These elements  correspond to settings in the Flash Media Live Encoder output panel.

Once you have the stream published from Flash Media Live Encoder to the Flash Media Server simply copy and paste the FMS URL and Stream (name) from the Flash Media Live Encoder into the same fields in the custom pod and hit the connect button. That should do it.

You can download the custom pod here.


CS5 Magic

April 11, 2010

If you have not heard or you have nothing to do with content creation on the web you can disregard this post. On the other hand if you have anything to do with content creation on the web no matter if you are a designer or a developer you are going to want to pay attention to this release.


Is this evolution or devolution?

April 6, 2010

I read an interesting article that may point to an effort to direct and control viewership on the internet. This is a great exaggeration but the article makes some interesting points.


Why is it always Hulk and Superman?

March 22, 2010

iWhat? Check this slate out!

March 19, 2010

It is faster with a larger screen,  plays Flash content and has upgradeable memory to name a few of the advantages over its competition. No this is not a cartoon character  it is the Neofonie WePad. Never heard of them, me either but it looks like they could be a contender! Check out the specs at the bottom of the pdf located at the preceding link.