Flash Media Server to Adobe Connect

08_19_2015 Update

I made a few changes to this custom pod. You can register to download at the bottom of this article. The new file will be called fp10VideoPlayer.zip. Some of the changes were simple bug fixes for instance there was a problem accessing a stream with an mp4 extension and prefix, that is now fixed. That means that you should be able to use this with a CDN such as Akamai. Another highly requested feature was the ability to resize the video, that should now be possible. I have not done a lot of testing so use at your own risk.

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.

Change is a Constant

As you might have noticed from my absence I have a new job. I moved over to the Adobe Connect team a few months back. It has been a very busy transition, which is something I enjoy. If you are not familiar with Adobe Connect have a look, it has been through a lot of changes over the years. One very interesting change that happened recently was that it started supporting AS3 content. An even more interesting change would be to support Flash Player 10 content, wouldn’t it? Then you would have the ability to take advantage of all of those great video related features in FMS. I am not announcing any new features simply wondering out loud or should I say in print. I am in the final stages of creating a custom pod for Connect that allows you to play streaming video from FMS inside of Connect. You might say, why would that be important”? Adobe Connect does not allow full frame rate video at this time. With this custom pod you will be able to get 25 to 30 fps in a Connect meeting room and off load the video to FMS. I will post that example and article in the next day or two, so stay tuned.

Passing Variables Into Flash using the Querystring

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.

Updated Stock Tracker Example

I recently updated a Flash project (Stock Tracker) and thought I would post it for your review. It is a rather simple stock tracking application that takes advantage of one of my favorite Flash capabilities SharedObject. SharedObject gives you the ability to store text based data on a device. There are a number of things to keep in mind when you use SharedObjects for one the device ultimately may decide to purge the data at which point you will need to have a contingency plan to deal with that issue. I use SharedObjects to store the stock symbols that are entered by the user as well as the last stock information downloaded to the device. This gives the user the ability to see the last stock information even if they lost their connection to the network. I will provide a link to download the swf (e.g. compiled application) at the end of this short article. I provide this application as is with no warranty or support. It is also not something that I want anyone to resell. With that said I hope that you find it interesting. For the most part it is a single screen application. In other words you enter the stock symbols on the same screen that you display the stock information. There are other screens for instance when you first run the application it will ask you to enter an update interval. This should be a one time setup that determines how often the application will attempt to fetch stock data from the network. There is a menu item that allows you to change that interval if you desire. It should go with out saying that setting a lower interval will increase your data bill if you do not have an unlimited plan. The following is the primary screen that will allow you to enter a stock symbol and review stock data.

Screen Shot of Stock Tracker
Screen Shot of Stock Tracker

The Menu softkey gives you access to a little help (very little), changing the update interval, quitting the application and an about screen. Other than that what you see above represents the entire application. You will notice when you enter stock symbols and successfully retrieve information about those stocks an arrow will appear behind the stock information. The arrow simply represents the overall change in all of the stocks entered. In other words if the change is positive the arrow is green and pointing up. If the change is negative well I think you can figure it out. Just a quick note on installation, there is none. I have not rolled this into a sis file as yet. You will need to use Nokia PC Suite to move it to the device. Because there is a security sandbox you will need to place the swf file on the devices storage not the memory card and you will need to place it in a directory called Trusted (“c:\Data\Others\Trusted”). Of course you will also need the FlashLite runtime, you can find the developer edition on Adobe Labs. I have only tested this on an N95. If there are enough requests to support a different screen size I will do my best to make that happen.

I hope you find it interesting, I would appreciate any comments and suggestions.

Download Example

When you get to the login page use the guest login and just enter your first and last name. If you see a password field click the guest radio button.

Adobe Presenter 7 and Mobile Learning

Considerations:

After writing a couple of articles I realized that some people do not know that there are both open and closed cellphones. Open devices allow you to create and load applications on the device where closed devices do not. Open devices, for the most part, include Symbian, Windows Mobile and sometimes Linux. Some examples of open devices include the Nokia N95, N73, E62 and Palm Treo 700w (Windows Mobile).

The reason that I am making a point of explaining open versus closed is that you will need the Flash Lite player installed on a device in order to player converted Adobe Presenter content. Adobe makes developer versions of the Flash Lite player available for download on the developer network site. For the time being the only Flash Lite 3 player available is for Symbian (e.g. N95, N73, etc…). I would assume that there will be a Windows Mobile version later this year but if you want to get started today and do not have an open handset buy a Nokia device with the Symbian OS. Because Flash Lite requires a decent amount of performance and memory I would buy an N95 or an N73 or equivalent.

The Nokia N95 8GB has Flash Lite 3 integrated into the browser. Before you get too happy I tested Presenter content on this device using the browser with Flash Lite 3 in a number of different scenarios including accessing the content on a Connect server, using an html wrapper for the viewer-lite.swf on a standard web server and using an html wrapper for the view.swf on a standard web server and none of the scenarios loaded the content. There seems to be a problem playing Adobe Presenter content using http, I would assume that at least in part the problem is a security sandbox issue as there is no way to set the security settings for the converted Adobe Presenter content. In addition to the previous issue there is a strange bug that affects the ability to play video on the N95 8GB, when you play a slide that has embedded video the screen rotates to landscape. This is not a problem if you are already in landscape mode. I would assume that Nokia will have a fix for the video problem soon but for now I would stick with content loaded onto an Nokia N95. I will use the term device and Nokia N95 (non-8GB model) interchangeably in this article.

The object of this article is to show how you can create content using Adobe Presenter 7 that will run on an open handset running Flash Lite 3. If you are not familiar with Adobe Presenter check out the following example . If you are still looking for additional Adobe Presenter information you will find a number of PDFs that go into some detail on the resource site for Adobe Presenter and Adobe Connect.

Authoring:

It should go with out saying that we need to use every available pixel of these small screens for content. With that said it should also be obvious that some content will simply not work on some devices based on the resolution of the device, input device requirements(mouse) as well as memory and processor requirements.

There is an unwritten rule that you should not use more that five or six bullets on a slide when creating a PowerPoint presentation. I would say that when creating a presentation for a small screen that it should be more like three or four bullets at most. Using a larger font will go a long way to improving readability of text. In addition the issue of readability is abrogated to some degree by adding audio to the presentation using the Adobe Presenter plug-in. In the following the image on the right is a screen capture of the original slide from a PC and the image on the left is a screen capture from a Nokia N95, with a 320 by 240 resolution, running the converted content.

Original Image from PC on Right Image from N95 on Left

As you can see the fidelity of the conversion is very good. The image is scaled and placed correctly as is the text content. The image should also help make the point that it is a good idea to use a slightly larger font if you are thinking of using the converted content on a device with a small screen.

The original image that was added to the presentation was approximately 4004KB. The size of the slide with out the image was approximately 1KB. When I added the image and published the presentation the slide with the image was 231KB. This is still fairly large for some devices, you may want to optimize your images before adding them to PowerPoint and converting them with Adobe Presenter.

Adobe Presenter Content Example

There are several problems that may or may not be obvious with the preceding content image. First the content requires a mouse to start, stop and pause the content not to mention use the sidebar functionality (thumbs, notes, search), most cellphones do not have a mouse. Second too much screen real estate is used by the sidebar. Third the images of the headphones and microphone are too big for small screens. The good news is that Presenter 7 addresses most of the issues for us either during the publish process or at runtime. When you publish the PowerPoint content using Presenter 7 there are two swf files, used as viewers, created in the publish folder the viewer.swf and viewer-lite.swf. The viewer.swf is the file that is used to play the content on PCs while the viewer-lite.swf is the file used to play the content on non-PC devices with a minimum client requirement of Flash Lite 3. The view-lite.swf solves some of the previously mentioned issues by removing the mouse requirement and not loading the sidebar.

Audio:

Audio works the way that you would expect it to in Adobe Presenter content. The Presenter plugin for PowerPoint gives you the ability to record and edit audio for each slide in the presentation. When the viewer-lite.swf and the data folder are moved to the device you will hear the recorded audio for the given slide.

Video:

Video is a favorite media type for learning content authors. Adobe Presenter allows a content author to import and set preferences for video. When importing video you have the option to place the video on the slide or the sidebar. In order to use video in content converted by Adobe Presenter on a device the video needs to be placed on the slide not the sidebar as the sidebar will not be loaded by the viewer-lite.swf. As a test I imported a Quicktime video that was fairly small (200 x 160 pixels) and set the placement to slide and the datarate to 400kbps. The video played well with no visible dropped frames and decent quality audio on a Nokia N95.

Themes and Custom Animations:

Adobe Presenter gives the content author the ability to create and reuse themes as well as the ability to retain custom animations created in the PowerPoint presentation. Since a different viewer is used to play converted content on a device(viewer-lite.swf) than on a PC (viewer.swf) and that viewer does not support themes, they are not retained.

Custom animations are created in PowerPoint and retained after conversion by Adobe Presenter. I tested several custom animations including Fade, Dissolve In, Fly In, Checkerboard and Spin and all worked as expected on the device.

Imported Flash Content:

Using Adobe Presenter a content author has the ability to import Flash content and place it on a slide or the sidebar. As mentioned previously the Flash content will need to be placed on the slide not the sidebar. Most Flash content imported using the Adobe Presenter plugin for Powerpoint is retained but will have limited use on devices based on the limited input options available on devices. For instance the lack of a mouse means that you use the navigation keys on the device to advance the converted PowerPoint slides. Which means that the content author cannot use those keys to interact with imported Flash content. It would be helpful if Adobe Presenter had a method for remapping the keys used for slide navigation to adjust for the input requirements of the imported Flash content. Since content converted by Adobe Presenter uses different keys to advance slide content on the device based on the orientation of the content it is impossible to use the devices navigation keys for Flash content as it would move the slides forward or back. If you could remap the keys you could have converted content always use the same navigation keys to advance the slides. For instance when you start the presenter content in portrait mode the right navigation button on your 4-way rocker is used to advance the slide content. When you switch to landscape it is the down navigation button on your 4-way rocker that advances slide content. This will limit the amount of interactivity that you can expect on a mobile device as the author of the Flash content would have to take into account whether the slide content was in portrait or landscape mode. One solution would be to use screenResolutionX and screenResolutionY from the Capabilities class in your Flash content to figure out if the content is being run in portrait or landscape and adjusting input keys accordingly.

Fonts can also be a source of confusion when targeting a device. I recently found that the use of device fonts, fonts that rely on the host to have the type face, do not work in Flash content imported using Presenter. If you use a font such as Arial or Times New Roman the outlines are embedded with the content and work well. If you have dynamic text you will need to embed the characters you intend to use (e.g. Lowercase, Uppercase, Numerals, etc…).

Quizzes:

Adobe Presenter allows the content author to create or import a quiz that will be published with the other content from the presentation. Unfortunately the quiz functionality from the Presenter plugin for PowerPoint is not supported when using viewer-lite.swf as the viewer on a device. A nice feature for a future release would be to enable quizzes with out reporting so that learners could at least test their knowledge of a subject. Of course it would be great to get reporting as well but this would be a good first step.

Move Content to Device:

Another important consideration is how will the content author get the content onto the device. Since, as previously mentioned, it is not possible to access Presenter content from a device using a browser (http) the content, for now, will need to be manually loaded onto the device. I am hoping that someone proves me wrong on this point as it would greatly increase the usefulness of this content if it could be accessed across the Internet. The good news is that you will find it is a simple process to load content onto the device using Nokia’s PC Suite.

From the following image of the Adobe Presenter publish directory you will notice that there are six files and one directory. You will only need to move the viewer-lite.swf and the data directory to the device in order to play the content. You can leave behind all the other files as they will not be used on the device to play Presenter content.

Adobe Presenter Publish Folder

Summary:

The ability to play content from Adobe Presenter on a mobile device is a welcome ability that portends the beginning of a trend that I have been talking about for some time, mobile learning. With that said there are a few features that I would like to see added to the product in future releases.

Feature Requests:

  1. Configurable key mapping inside Adobe Presenter
  2. Ability to access content over the Internet via http
  3. Ability to use quizzes and store results locally to submit when connected
  4. Client-side API to enable the manipulation of Presenter content from other Flash content using Actionscript (e.g. fullscreen)
  5. Ability to set security settings