FLV Checker

August 30, 2011

Some of you maybe familiar with the FLVCheck tool that allows you to check to see if a Flash video is properly formatted. If you are you would also know that it is a command prompt application (i.e. there is no user interface). To get familiar with the ability to use native process support in Adobe AIR I wrapped the FLVCheck tool in a simple Flex application. This is a simple UI that allows you to drag and drop and flv file onto the application so that it can check the format and fix simple issues. This application does not add any functionality to that application all it does is add a user interface. The application is free but I do ask that you register in order to download. You will also find the Adobe Connect custom video pod at the same location after you are registered. If the registration form does not load, clear your browser cache and try again.


Flash Media Server to Adobe Connect

August 22, 2011

In this article I will describe how to use a recently created custom pod for Adobe Connect. This custom pod is provided free of change and is provided as is with no additional support or warranty (how is that for some lawyer speak). Briefly, this custom pod allows you to stream high frame rate video from the Adobe Flash Media Server to an Adobe Connect meeting room. I used the collaboration sdk to create a shared experience. In other words if you are a host in a meeting room you can load and setup a connection to both live and ondemand video that you control for the meeting participants. As the host you make the connection and choose the video and when you hit play all participants will see that the video has started to play. This is very different than a typical video player where each individual has their own experience and could be watching different sections of a the same or different videos. This custom pod understands the different Adobe Connect meeting roles (i.e. host, presenter, participant). Only the host has interface elements (buttons, progressbar, etc…). Admittedly  the user interface could use some work and I do intend to improve it so do not beat me up too bad but also do not hesitate to give me advice on improvements.

The following is a simple diagram of the workflow.

Live Video Workflow for Custom Pod
A) Flash Media Encoder B) Flash Media Server C) Custom Pod in Connect Meeting

There are many considerations when ever you consider streaming high quality video. First of all the camera is an important part of the equation. I did a number of tests with web cameras and found that two of the three web cameras that I tested could not consistently produce 30 frames per second of video. Do not skimp on a quality camera. The second, third and fourth and and and considerations are all BANDWIDTH. You cannot stream a 500 kbps stream over a connection that only has 300 kbps available. There are many people that are confused about bandwidth but it is fairly simple. If you look at the diagram above you will notice that you have to send the encoded stream from the camera / laptop to the Flash Media Server and then on to Adobe Connect. You need the appropriate amount of bandwidth at each step. It is not enough to have a great connection from FMS (Flash Media Server) to Adobe Connect you also need an appropriate connection from the source (camera / laptop) to FMS. Often someone assumes that because their wireless card mentioned 54 Mbps that they are covered for streaming video. The key consideration is “usable bandwidth”. I have included the ability to test bandwidth in this application as well as a status indicator that will give you an idea if your connection is appropriate for the video you are attempting to stream.  It is also important to note that available bandwidth changes continuously.  You might find that you do a bandwidth test and have plenty and thirty seconds later you have half as much. It is best not to use a wireless connection as their is more variability and more unknowns with a wireless connection versus a wired connection.

Custom Pod UI:

Lets walk through some of the functionality of the custom pod.  After it is uploaded to a share pod inside of Adobe Connect it should look like the following:

Adobe Connect Custom Video Pod

Adobe Connect Custom Video Pod

The first thing you should understand is that this is the interface that the host will see when they upload the custom pod. The dark green in the progress bar shows the progress of the playing video. The dark blue shows the size of the current buffer. If you do not see any dark blue then there is no buffer and you are probably not having a great play back experience. You will not see a progress bar for live video as there is not enough buffer to show. Notice the green status indicator in the upper left hand corner of the screen.  This indicator will be seen by both hosts presenters and participants. This indicator shows only the local connection status. In other words if you are looking at this indicator it shows your status not a combined or status of other individuals in the meeting. The following table gives a brief highlight of the states and meanings.

  This indicates no connection. Each time you connect the indicator will turn green initially and each time you disconnect it will turn black.
  This indicates the initial connection as well as a video that has enough bandwidth to play and keep up with the video that is being sent from the Flash Media Server.
  This indicates that there are or have been issues with the video playback. Often times this is represents a temporary condition so do not panic the first time you see the indicator turn orange or red.
  This indicates that the issues are getting worse but as stated before this can be temporary so give it at least a few seconds and see if the condition improves.

If someone in the meeting mentions that the video playback is not smooth or the quality is not great you could ask them what the color of the indicator is to get an idea if the problem is bandwidth related. This indicator does not indicate a change in frames per second. It is possible to retrieve fps data from the metadata of the stream but it seems that this does not indicate that actual fps on the passed on from the encoder (e.g. Flash Media Live Encoder).

Adobe Connect Meeting Host:

You will notice that each role in an Adobe Connect meeting has a slightly different view of this custom pod. The host has complete control. As a mater of fact the first host to upload the custom pod retains complete control and all other hosts will see the controls but will only be controlling their local experience. With that said I think that it is a good practice to have only a single host in most if not all meetings. More than one presenter is not an issue but more that one host can create issues regardless if you are using this custom pod or not.  The following is the host view of the custom pod:

Custom Pod with Settings Visible

Custom Pod with Settings Visible

Workflow for live video:

The first step to playing live video is to have a live video source. Keep in mind that if you intend to use a simple web camera your quality will probably not be that much better than what you would get out of the default camera support in Adobe Connect. If on the other hand you have a higher quality camera or would like a higher frame rate follow these steps.

1) setup a computer with enough horse power to encode the video and with enough bandwidth to send that video to the Flash Media Server. Download and install the free Flash Media Live Encoder.

2) setup or use an existing Flash Media Server. There are a great number of resources for getting started with the Flash Media Server.

3) upload the custom pod. The custom pod is in a zip archive. In a share pod in Adobe Connect simply locate the custom pod zip archive on your computer and upload the entire zip.

4) enter the server url and stream name for the video that you are publishing from the Flash Media Live Encoder. It is a simple matter to find the connection stream for the server. You will notice by the example above the entry field that it starts with rtmp. This is the realtime message protocol used by FMS. The next element in the connection stream is the server ip address or dns name. After the slash following the server name or ip address is the application name. This may seem a little strange but this represents a folder name inside the application folder inside the installation folder of the Flash Media Server. Once you have the Flash Media Server installed find the installation folder and open it and inside you will find the application folder. Inside of the application folder you will find a vod and live directory. These are the default applications. If we analyze the following connection url, rtmp is the protocol, the ip address is the address of the Flash Media Server and vod represents the default directory for ondemand streams (i.e. files) inside the application directory.

rtmp://192.168.0.2/vod

The stream name is what ever the file name is for ondemand or what ever name you entered into the Flash Media Live Encoder.

Flash Media Encoder Output Panel

Flash Media Encoder Output Panel

After the all the elements of the workflow are in place it is time to turn on the camera and stream the video from Flash Media Live Encoder to FMS. This is a pretty straight forward task, simply hit the start button in Flash Media Live Encoder.

Once the live video is streaming to Flash Media Server it is time to connect to and play the live stream into the custom pod inside of Adobe Connect.

Custom Pod Settings Panel

Custom Pod Settings Panel

This is the settings panel for the Custom Pod that you will use in the Adobe Connect Meeting room. It allows you to setup and make a connection to the Flash Media Server. It also allows you to choose between ondemand and live streams and test your bandwidth. Notice that the stream name is the same as the the stream field in the Flash Media Live Encoder. If these do not match you will not see video in the custom pod. Also notice that if you want to view live video you must select the Live Stream check box.

Well I think that about covers it. I will post the link to down load the custom pod later today along with a few other links that might be helpful. Please drop me a comment to let me know if it is working or not and any improvements that you would like to see.

I put together a short overview presentation of the custom pod functionality and setup. If you would like to jump right to the link that allows you to register for download it is on slide eight. Please let me know what you think. Note: If you are having trouble with the registration page clear the cache on your browser and reload the page.


Flash Media Server 4 brings Multicast to Flash Video

September 10, 2010

In case you missed it Adobe announced Flash Media Server 4 . This is a significant release for a number of reasons. The first reason is that many corporate customers have been interested in Flash video but were not able to take advantage of it with out support for IP Multicast as this technology was a mandate from their IT organization. In other words this update for the Flash Media Server to version four gets you a 64bit architecture, Absolute timecode, faster seeking, trick mode playback (fast motion, slow motion, and frame stepping), intelligent reconnect, faster switching for RTMP Dynamic Streaming and IP Multicast Support.

Using version 4  of the interactive edition of the Flash Media Server gets you the ability to choose between Unicast (with or with out Origin / Edge), IP Multicast and even Live HTTP Dynamic Streaming. It is even possible to failover from IP Multicast to a Unicast stream if necessary. When you consider all of the possibilities they include:

  • Interactive applications that support video, audio and data for one to many and many to many for both live and video on demand
  • Large scale broadcasts using IP Multicast
  • Origin / Edge solutions that can be used to intelligently reduce bandwidth requirements for vod
  • Failover for complex environments with different network requirements (e.g. remote sites, vpn)

That is a short summary of the possibilities that you get with the interactive edition of the Flash Media Server but that was not the only announcement. Adobe also announced Adobe® Flash® Media Enterprise Server 4. If you are not familiar with RTMFP that would be a good place to start. This peer protocol will allow you to take advantage of users / viewers upstream bandwidth to broadcast video, audio and data in your application and now the Flash® Media Enterprise Server 4 can participate in those groups. So consider the limitations of a peer broadcast. First you will only have access to the one video codec that can encode that is part of the Flash Player and that is Sorenson Spark. If you are familiar with Sorenson Spark you know that the quality leaves something to be desired. When you consider that the Flash® Media Enterprise Server 4 can act as a peer using RTMFP you now have access to all of the varied video formats that can be broadcast using the server (On2, H.264,…). It is also important to note that you are not limited to just video when you are using Peer Assisted Multicast (RTMFP) you can include data as well. These applications can include interactivity unlike IP Multicast. Of course there are considerations that include additional latency based on the number and location of peers in a group but the possibilities are amazing. Just consider an internet based application that includes video and interactivity with 10k concurrent users. With out a peer solution you would have to invest in a significant number of servers as well as a significant amount of bandwidth. With the Flash® Media Enterprise Server 4 you could address both server and bandwidth requirements with a small fraction of what it would take with a Unicast solution. The cost savings will be significant.


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.


And Its Off! Nicely Done!

May 4, 2010
Flash Takes Off

Flash Takes Off


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.


Securing Flash Media Interactive Edition

March 8, 2010

A critical component to rich media is securing your content and resources. In this article I am going to cover how to restrict someone with the Flash Media Live Encoder or for that matter any encoder from publishing to the Flash Media Interactive Server. In the process I am going to show you how to allow someone with the appropriate permissions and the Flash Media Live Encoder to publish to the server.

There are many ways to accomplish this goal. First there are Adobe partners that have written plugins for the Flash Media Server that allow you to restrict access to the server through the use of these plugins.

There are also server side APIs that allow you to connect with other systems and data. For instance you can use the WebService class to create and access a WSDL/SOAP web service or the XML class lets you load, parse, send, build, and manipulate XML.

In this short example I am going to use a server side event “onPublish” to retrieve the querystring and respond to a request to publish a live stream from the Flash Media Live Encoder to the Flash Media Interactive Server. Now there is a reason that I am calling out the Flash Media Interactive Edition and not the Streaming Edition and that is that the Streaming Edition does not support server side scripting.

Server side scripts are written and stored in “.asc” files in an application directory inside the application folder on your Flash Media Server. As an example if I had a application called foo I would store my server side script (e.g. main.asc)  in the following location.

server side script location

There are a number of events that you can work with on the server side; for instance onAppStart, onConnect, onPublish. You can find information about these and other events, methods and properties in the documentation.

Lets take a look at the final server side script in the main.asc file.

application.onAppStart=function(){
trace(“***** on App Start”);
}

application.onConnect=function(clientObj){
trace(“**** on connect”);
this.acceptConnection(clientObj);
return true;
}

application.onPublish = function(clientObj, streamObj){
logon = extractQueryString(streamObj.publishQueryString, “logon“);
if(logon != “fmle”){
application.disconnect(clientObj);
trace(“Sorry you aint publishing”);
}

}
function extractQueryString(queryString, arg){
var returnValue = “”;
temp = arg + “=”;
i = queryString.indexOf(temp);
if (i != 0){
temp = “&” + arg + “=”;
i = queryString.indexOf(temp);
}
if (i != -1){
returnValue = queryString.substr(i+temp.length);
i = returnValue.indexOf(“&”);
returnValue = returnValue.substr(0, i);
}
return returnValue;
}

In the preceding code the events are in bold. The helper function that will extract the search term (i.e. the second parameter that we pass in to the extractQueryString function called arg)  that we tell it from the querystring is green. The bit that disconnects an in appropriate publisher is red.

First let me say that this is a very simple example that should be coupled with functionality that does more to integrate with existing systems (e.g. ldap) but after many calls from customers concerned that someone might be able to publish inappropriate content or use their bandwidth I thought I would at least get the ball rolling. The part of the script in red is a great place to look at integrating with other systems. Notice that in the if statement that I am simply looking for the string “fmle” this should really be a more robust solution but it will work for this simple example.

In the preceding code onAppStart does just that it fires when the application starts. The onConnect fires when a client connects to this application. Finally onPublish fires when someone tries to publish a stream to the server.

There are two parameters the first is the client object that represents the client publishing the stream to the server. The second is a reference to the stream that the client is attempting to publish. Even though I am not going to cover it in this article it is worth mentioning that you can use the stream reference to publish a stream from one server to another in the event that you want to propagate a stream across a number of servers.

What will happen when someone tries to publish a stream to an application that has this “main.asc” in the application folder? If they do not add “logon=fmle” to the connection they will be disconnected (see script in red above).  Most people do not want to stop all Flash Media Live Encoders from publishing to their server they just want to make sure that the right users can publish to their server. In this example the way that we do that is to make sure that who ever attempts to publish to the server includes “fmle” in the querystring. This has to happen from the Flash Media Live Encoder or for that matter any encoder that you are using to publish to the server. In this example I am going to use the Flash Media Live Encoder.  The following is a screen shot of the Flash Media Live Encoder’s output panel:

Flash Media Live Encoder Output Panel

Flash Media Live Encoder Output Panel

Substitute your server dns name or ip address for localhost in the preceding screenshot. There are two elements that you need to be aware of in the preceding. First notice that “foo” is after the last forward slash “foo” represents the  application name which is the same as the name of the directory where “main.asc” is located (see first screenshot). Second notice that after the stream name there is the following “?logon=fmle” this is the querystring. This querystring is initially extracted by using publishQueryString property of the stream object (see blue script above). This represents the entire querystring which often includes other parameters. Since we are only interested in the “logon” parameter we pass the querystring to extractQueryString(see green script above). This function parses the query string and returns the term and value of the term we pass into the extractQueryString function (the term that we are passing in is logon and is the second argument in the following script:

logon = extractQueryString(streamObj.publishQueryString, “logon“);

The value of this argument will have to be “fmle” or the attempt to publish will be denied.

That should cover it. If you have questions or comments let me know. I will most likely follow this up with short article about swf verification.


A Mystery Unfurls

October 27, 2009

Every now and then I will find a website or content example that lives up to my belief that the web has so much more potential than the majority of the content available today. I am constantly looking for that amazing “lean forward” experience that draws you in and makes you want to reach out to the other people interacting with the content to see if their experience even remotely matches your own. Good news, I have found it and it is called “CIRCLE OF EIGHT”. It is a multi-episode supernatural thriller that combines social media, gaming and a great plot line. The quality of this production is fantastic. Could this be a block buster series that finds all or most of its potential on the web? I think that it could be but only time will tell.


Online Searchable Video

October 15, 2009

Overview:

Imagine finding the perfect training video but it is an hour long and you need to find the specific part of the video that covers your specific interest. Or possibly you are an advertiser and you would like to have content aware advertising in some specific online videos.  You would like to have your advertising show up on a page when a specific word is mentioned in a video or maybe when a video is searched for a specific word, does that sound familiar it should as it is the google model for advertising and now it can apply to video.

The solution that I will cover in this article will allow you to transcribe the spoken word in videos into text and allow a user to search that text to find relevant areas of the video. The example that we will cover is only the beginning. I could imagine an entire searchable library of video or possibly even a web search engine that easily finds and displays video starting at the location where the search engine found a word that was spoken in the video. Before we jump in it might be helpful to see an example.

Requirements:

In order to create the transcription you will need either Premiere® Pro CS4 or Adobe® Soundbooth® CS4.  My opinion is that if you are going to do any serious video editing you should consider Adobe® Creative Suite® 4 Production Premium as it contains everything you will need to edit, composite and publish high quality video projects.

Getting Started:

I should start by telling you what I am not going to cover. I am not going to cover how to get started with Premiere Pro, Soundbooth and the Flash Media Server. There are a number of great resources for each of these products. What I am going to cover is the specific functionality in each of these products that relate to creating searchable video. Lets start with Adobe Premiere Pro.

Once your project is created and the video and sound edited to your satisfaction it is time to transcribe the video.  This is a very straight forward step. Simply open or expand the Metadata panel and you should see a button at the bottom of the panel called Transcribe. If you do not see the panel you can open it from the Window menu. The following panel allows you to transcribe as well as edit an existing transcription.

Premiere Metadata Panel

Premiere Metadata Panel

When you click the Transcribe button you will see the following dialog that allows you to choose the language, quality and whether to identify speakers.

Premiere Transcription Settings

Premiere Transcription Settings

The language choice is pretty straight forward. As for the quality I see no reason to ever choose anything other than high. When you choose identify speakers you will notice in the exported xml something like the following <Name>Speaker 1</Name>. I can see this being an interesting addition to an application but for this example I did not take advantage of this feature.

This process can take some time to complete.  Keep in mind that an accurate transcription relies on two very important criteria. First and foremost a good quality sound track is critically important. If you have background noise or a muffled speaker you will not get a very accurate transcription.  Second is the dictionary that is used to recognize words. In order to give you some context,  imagine attending a lecture where the speaker spoke in a language that you did not understand. A custom library is a library with specific word definitions that allow Premiere to more accurately identify and transcribe the spoken word. This is an area that you will see expanded on in future versions of the Production Premium Creative Suite.

When the transcription process is complete the xml that represents that transcription is stored as XMP Metadata as part of the video file.  It is possible to access and use XMP Metadata that is stored in a swf, flv and f4v via Actionscript but this should be carefully considered.  If you create a long format video that contains a great deal of speech to be transcribed that finished transcription can represent a fairly large increase in file size. As an example the following represents two files encoded with the same settings and length the larger file has metadata and the smaller does not.

file size with and with out metadata

file size with and with out metadata

Storing and accessing the transcription metadata stored in the final video file can also cause problems for streamed video from the Flash Media Server because of the way that text is stored in the video file.  I found the best way to use this transcription to create online searchable video was to export the xml file so that it did not remain part of the video file. This may be addressed in the future but for now if your video is longer than say 15 minutes and you plan to stream that video it would be best to export the xml that represents transcription to an xml file that is stored outside the video file.

I would suggest that you exclude the metadata for the final video that will be displayed online. In order to exclude metadata during export from Premiere Pro CS4 click the panel menu button panel_menu_button on the right hand side of the options panel in the export dialog box. In the popup deselect Include Source XMP Metadata.

Exclude Metadata

Exclude Metadata

One more slight wrinkle in the process is that you cannot export the transcription as xml from Premiere. The only way to export the transcription is from Soundbooth.

Editing The Transcription:

Anyone familiar with speech to text knows that it is not possible to get one hundred percent accuracy. With that said it is possible to get a high degree of accuracy given the criteria mentioned earlier in this article. There are a number of tools that can help you clean up the transcription in both Soundbooth and Premiere. Once the transcription process is complete and you see the text in Metadata panel you should see the play, loop and transcribe buttons. You should also see a search field at the to of the Metadata panel in both Soundbooth and Premiere. The search field allows you to search for words that are in the transcription. This functionality can prove very useful when you find a word that was not transcribed properly and may show up in multiple locations through out the transcription.  Once you find a word that needs to be corrected simply double click the word and you will be able to edit that word. Depending on how the word was recognized during the transcription process you may that you need additional functionality. If you right click on a word in the Metadata panel you will see the additional features.

Editing Transcription

Editing Transcription

Exporting The XML:

As I mentioned previously you cannot export the XML file required for this example from Premiere that must be done in Soundbooth.  Soundbooth has many fantastic features including volume correction and my favorite visual audio healing. You might wonder why I am mentioning Soundbooth features under the Exporting The XML heading; to refresh your memory it is because you cannot export the XML transcription from Premiere. If you have any last minute touch-ups for your audio track it might be a good idea to leave them to just before you export the transcription as xml. Then it is a simple matter to right click the audio track in Premiere and select Edit in Adobe Soundbooth and then Render and Replace.

Round Trip Editing From Premiere to Soundbooth

Round Trip Editing From Premiere to Soundbooth

From Soundbooth you will be able to clean up your audio, if required, and export the transcription as xml.  The changes that you make in Soundbooth will show up in Premiere as soon as you save thanks to Dynamic Link.  Once you are in Soundbooth you should see that the transcription has come over with the audio track. To export the xml file simply go to the File menu and then down to Export then select Speech Transcription.

Soundbooth Transcription Export

Soundbooth Transcription Export

Once the xml file is exported it is time to finish encoding your video into either an FLV or an F4V. If you have made changes to the audio in Soundbooth save and return to Premiere to finish encoding your video.  When considering the functionality required to create searchable video streaming vs progressive is an important consideration. Progressive video is video that is accessed by using the http protocol. Streaming video is accessed by using RTMP. For searchable video there are a couple of key differences that should help you choose the right technology. First navigation with in the video is key to the idea of searchable video. With progressive you would have to download all of the video from the start of the video to the place a user is navigating to in the video. If the video is fairly long this can be very frustrating for a user. You can imagine doing a search and finding the word you are looking for close to the end of say a forty minute video and having to wait for that amount of video to download before being able to jump to that portion of the video. Streaming on the other hand simply starts sending the video from the part of the video requested. Streaming makes searchable video usable for even long format video.  Another key feature of the Flash Media Server that assists in making searchable video a reality is something called enhanced seek.  The following is a definition from the online documentation:

Enhanced seeking is a Boolean flag in the Application.xml file. By default, this flag is set to false. When a play occurs, the server seeks to the closest video keyframe possible and starts from that keyframe. For example, if you want to play at time 15, and there are keyframes only at time 11 and time 17, seeking will start from time 17 instead of time 15. This is an approximate seeking method that works well with compressed streams.

If the flag is set to true, some compression is invoked on the server. Using the previous example, if the flag is set to true, the server creates a keyframe–based on the preexisting keyframe at time 11–for each keyframe from 11 through 15. Even though a keyframe does not exist at the seek time, the server generates a keyframe, which involves some processing time on the server.

The preceding should be fairly easy to understand how searchable video would benefit from this functionality but to make sure I will put this functionality in the context of this example. Imagine doing a number of searches on a long video. If the keyframes were not placed on every frame what you would notice is that some percentage of searches would take you past the point where the word was spoken in the video leaving you to wonder if the word was found at all.

The Final Step:

At this point you should have a video encoded as either an FLV or an F4V and an xml file that represents the transcription from the video file. In the second paragraph of this article there is a link to an example, the sample provided with this article has very close to the same functionality as that example. You can download the sample with the link provided at the bottom this article. Once you have downloaded those files and unpacked you should have the following files:

searchableVideo.html
searchableVideo.swf
searchableVideoPrefs.xml

You should also have a skins folder. All of the files and the skins folder should be in the same directory on a web server or in the webroot in the Flash Media Server installation directory. The following is the typical path for the webroot folder when installed on Windows XP.

C:\Program Files\Adobe\Flash Media Server 3.5\webroot

This is of course required so that you can access the content from a web browser. The searchableVideo.html file is the html wrapper that hosts the swf. This is not required you can use your own html page to host the searchableVideo.swf. It is easy to add the searchableVideo.swf to your own html page from within Dreamweaver. Just add these files and the skins folder to your Dreamweaver site files and create a new page or open an existing page and simply drag the swf file (searchableVideo.swf) onto that page. Dreamweaver will create the object and embed code for you. Keep in mind that the searchableVideoPrefs.xml file needs to be in the same directory as the searchableVideo.swf on the web server. Organizing files for access over the web is much easier now with the Flash Media Server 3.5 because it has an embedded web server. You can simply drop the html and swf files that you would like someone to access using a web browser in to the webroot folder in the installation folder of the Flash Media Server. Once you have the files setup it is time to edit the searchableVideoPrefs.xml which allows you to specify the location of the transcription xml file and video. In addition you can also make changes to some of the player functionality and appearance from this same searchableVideoPrefs.xml file.

I would suggest that you open the searchableVideoPrefs.xml file in either Dreamweaver or an xml editor do not use a word processor. Once the file is open you should see the <sourceURI> tag. It is important that you do not edit any of the tags only the content between them. For instance make sure that when you are editing the <sourceURI> which represents the location of the video you do not change either <sourceURI> or </sourceURI> in anyway only the text between those tags. This is true for any tags in this file. If you wanted to play a video on a server with a dns name of foo.com and the video was in a Flash Media Server application called lectureVideos and the name of the video was chem101.flv the <sourceURI> tag should look like the following:

<sourceURI>rtmp://foo.com/lectureVideo/chem101.flv</sourceURI>

This may seem complex but it is really fairly simple. When you install the Flash Media Server on windows it has two pre-installed applications vod and live. These applications are represented as folders in the following location C:\Program Files\Adobe\Flash Media Server 3.5\applications. The name of the application is the name of the folder in that location. In the example that we mentioned you would have a folder called lectureVideo in the application directory mentioned above (e.g. C:\Program Files\Adobe\Flash Media Server 3.5\applications\lectureVideo). In side of that folder you will have a folder called streams and inside of that you will have a folder called _defInst_ and inside of that folder you will have your video file. So the entire path to your video file on the Flash Media Server would be C:\Program Files\Adobe\Flash Media Server 3.5\applications\lectureVideo\streams\_defInst_\chem101.flv. Remember that if you are using an f4v file that you must prefix the file name with mp4:. For instance if the previous example was an f4v not an flv the sourceURI tag would be the following:

<sourceURI>rtmp://foo.com/lectureVideo/mp4:chem101.f4v</sourceURI>

As I mentioned previously there are many resources for learning about the different tools and servers used in this example.

Now you should have the hang of editing the searchableVideoPrefs.xml file. Next we are going to edit the location of the transcription xml file that was generated in Premiere and exported from Soundbooth. The same precaution holds true for editing this tag, do not change the tags in anyway only the contents. This location can either be relative to the swf or a complete http uri. For instance both of the following are correct:

<transcriptLocation>assets/RedWorkflow.xml
</transcriptLocation>

and

<transcriptLocation>http://foo.com/searchableVideo/assets/RedWorkflow.xml
</transcriptLocation>

In the first example it would mean that the RedWorkflow.xml (i.e. transcription xml file) would be in an assets folder which would be in the same folder as the searchableVideo.swf and searchableVideoPrefs.xml files. In the second example the RedWorkflow.xml file could be stored on the same or a different server and access by using the http protocol.

Lets take a look at how the finished example should look and label some of the areas of the example so that it is easier to follow along.

Seachable Video Player

Seachable Video Player

In the following image I have highlighted and labeled the important areas of the player so that it will be easier to understand my references:

Example with color overlay

Example with color overlay

The Text Cloud section represents the highest occurring words in the transcription. This allows the viewer to get an idea of the kind of content in the video. The viewer can click on any of the keywords in the Text Cloud in order to display those results in the Found Items section. The Relevant Text section is displayed when a viewer clicks an item in the Found Items section, it displays the text surrounding the found text. The Video Display shows the video as well as markers representing the found text. A viewer can rollover the marker to display the surrounding text as well as seek to that portion of the video. The Search Field allows a user to enter and search on one or more words and the Found Items section displays the result. It is also possible to sort the columns in the Found Items section by clicking the column headings.

There are a number of other settings in the searchableVideoPrefs.xml that you can use to change the functionality and appearance of the searchable video player. First minwordLength, use this to set the minimum word length for the text cloud at the bottom of the example. A setting of 5 will mean that no words shorter than 5 letters will show up in the word cloud. Next there is videoInitStartSeconds which determines the initial start time of the video when the player is first launched. There are a few other settings that will affect the appearance of the player and they are as follows:

globalTextColor : sets the color for ALL text on screen

swfBackgroundColor : sets the background color of the player

foundTextHighLightColor : changes the color of the text in the relevant text display

textBackGroundColor changes the background color for the text cloud and the relevant text area

Well that should get you started. If you have problems, interests or comments please leave them on this site so that I can respond.  There are many possible additions and changes that I can think of for this example. I am eagerly waiting to see and hear how people have used this example so please leave me a comment.

Download Searchable Video Player


Follow

Get every new post delivered to your Inbox.