Examples Used in this article:
simpleStreamingExample.fla
bwcheckExample.fla
In this article I am going to cover two scenarios for streaming Flash video from the Flash Media Server to Flash Lite 3. The first is the simplest possible example the second will use script based bandwidth detection to determine the bandwidth available to the device and then stream the appropriate video based on that information.
Flash Lite 3 as has support for streaming content from Flash Media Server. I am sure that most of you already know that it cannot be the same support that is in the desktop Flash player and you would be right. There are several exceptions, for example you can stream content to a device with the FashLite 3.0 player but not from a device with the FlashLite 3 player to the Flash Media Server. I hope that one day soon we will be able to stream video from a cellphone to a Flash Media Server and broadcast to the world but for now we will have to settle for consuming that content on our FlashLite 3 enabled devices. The approach for creating a Flash Lite 3 application that receives streaming content from a Flash Media Server is very similar to creating that content and targeting the desktop player. I should also say that for now you cannot create FlashLite applications using Flex, I hope that changes soon but today the Flex component foot print is too large for devices. I will use Flash CS3 and Device Central for the examples in this article.
The example we are about to create should be familiar to you if you have created an application that took advantage of the Adobe Flash Media Server in the past. We will use NetConnection and NetStream to create the connection and video.attachVideo() and NetStream.play() to attach and play the stream. Two notable exceptions to functionality as compared to the desktop Flash player are the lack of support for Remote SharedObjects and one-way streaming as I mentioned earlier. We are going to focus on video in this article, I will cover data in a separate article in the near future.
In order to test this example you will need to have Flash Media Interactive server 3 installed. If you do not already have it installed you can use the developer version which provides a connection limited development server. It is fully functional but will only allow a limited number of connections.
You can download this example (simpleStreamingExample.fla) and other examples from my Connect meeting room. When you download this example you will need to substitute your FMS servers name or ip address for the following yourserver.com in the actionscript of the simpleStreamingExample.fla file. If you have the FMS server installed locally that would be localhost or 127.0.0.1. In addition you will need to substitute the name of a video file that you created and placed in the _definst_ directory under your FMS applications folder for the following melissaInterview in the actionscript of the simpleStreamingExample.fla file. You could also use one of the flv files on my Connect meeting room in the zip file called videos_for_streaming_example.zip.
The first part of the process will be to choose a target device. In other words what device or devices are we going to target with this application? Launch Device Central and sort the list by the version of FlashLite then choose 3.0. You should see a few devices in the list, if you don’t make sure to download the newest device profile update #5. For this example I am going to use a generic Flash Lite 3 (240 x 320) profile because there is a problem with the new Nokia N95 8GB profile and DoCoMo removed support for video from the 905i series. The issue with the Nokia N95 8GB profile is a known issue and should be fixed shortly and DoCoMo will add video support to the 906i series. Before you wonder why I asked you to download the update, I just wanted to see if I could get you to do it. Just kidding there will be other updates and I want you to get in the habit so that you always have the latest intel on devices that support Flash. Now that you have a new blank Flash file open in Flash CS3 we will move on to the next major step which is to create the video object that we will use to attach our streaming video. Open the Flash library from the Windows menu in Flash CS3 or you can use the short cut keys (cntrl & L). From the Display panel menu options of the library panel select “New Video…”.
Give the video object a name (“vid”) and drag it to the stage. Once it is on the stage you will need to give it an instance name. Simply click on the video object that you moved to the stage then look at the property inspector at the bottom of the stage.
The instance name is “vid_video”. We will use this name in the Actionscript to attach the video stream to this object. Now its time for a little Actionscript. This is a very simple example and in order to keep it simple I am going to place my Actionscript on the first frame of a layer that I named “AS”.
I am using an “if(inited” code block as the starting point of my application. Inside of this “if” statement I am setting up a connection to my Flash Media server using the “connect” method of the NetConnection Class.
if (inited == null) {
inited = true;
nc = new NetConnection();
nc.connect(“rtmp://localhost/simpleVideo/”);
playvid();
}
function playvid(){
ns = new NetStream(nc);
vid_video.attachVideo(ns);
ns.play(“melissaInterview”);
}
The parameter in “nc.connect(“rtmp://localhost/simpleVideo/”)” points to the application on the FMS server. “RTMP” is the protocol used to carry the content. There are several types of RTMP but Flash Lite 3 only supports basic RTMP no tunneling or encryption.
|
Protocol
|
Description
|
| RTMP |
Real-Time Messaging Protocol |
| RTMPT |
Real-Time Messaging Protocol tunneled over HTTP |
| RTMPE |
128-bit encrypted Real-Time Messaging Protocol |
| RTMPTE |
128-bit encrypted Real-Time Messaging Protocol tunnelled over HTTP |
| RTMPS |
Real-Time Messaging Protocol over SSL |
The default port for FMS is 1935, that can be changed if you use the default you do not have to include the port in the server reference. Finally the application name (i.e. simpleVideo), simply means that there is a folder in the applications folder inside the installation folder of the Flash Media Server called simpleVideo.
C:\Program Files\Adobe\Flash Media Server 3\applications\simpleVideo
Using a reference to the connection created in the previous step we create a one way channel inside the connection using NetStream.
ns = new NetStream(nc);
Using the reference from the previous step we attach the stream to the video object on stage.
vid_video.attachVideo(ns);
Finally we start to play the video. Notice that we leave off the “.flv” file extension.
ns.play(“melissaInterview”);
Pretty simple huh?
Now lets add a little control to this example. I would assume that most people viewing video might want to pause and play that video. I am going to create a function called “pausePlayVid()” and inside of that function I am going to add the pause method of the Netstream class.
function pausePlayVid(){
ns.pause();
}
To keep it simple I am going to use a component that I created to map navigation keys to function names. In other words I would assume that your device has left,right,up and down navigation keys, this component allows you to pick one of those navigation keys, in this case I will use the right navigation key, and map that to the function we just added to the example called “pausePlayVid”. This is a simple component that you can download with the samples for this article. Now when I test this example in Device Central and the video starts to play if we hit the right navigation key it will pause and if we hit it again it will play.
There is one more thing we should consider if we want this to work on mobile phones, bandwidth! I am sure you have noticed that you can have a conversation with someone on your cellphone and simply turn around and loose the connection? If you haven’t then you must live in cell tower heaven. For all the rest of us we should consider a way to stream different content based on available bandwidth. There is nothing we can do for a lost connection although that would be a neat trick. At this point I was planning to show how we could use the native bandwidth detection of FMS 3(Flash Media Server) to automatically select the best streaming content for the current bandwidth of the FlashLite enabled device but unfortunately there is a problem that will not allow this functionality to be used with Flash Lite 3.x.
I am still looking into the cause of this but all is not lost. Even though we cannot use the native bandwidth detection we can use an approach developed back in the days of Flash Communication Server (i.e. predecessor to FMS) and described by Stefan Richter on Adobe’s Developer Connection.
This is a very good article that covers in detail the approach for bandwidth detection that will work with FlashLite 3 content. In this article you will also find tutorial files and the server side script that performs the bandwidth detection. The approach involves a call from the client to a server side script. The server side script calls a method on the client to determine the devices bandwidth and sends the value back to the device. At this point the device can use this information to choose the most appropriate content. You will need to download the server side script (bwcheck.asc) and place it in a folder called “bwcheck” under the applications directory of the Flash Media Server 3 installation directory.
For all those not familiar with the Flash Media Server, the “.asc” extension denotes this as a server side script.
Now lets take a look at an example (bwcheckExample.fla) that uses bandwidth detection to determine the appropriate video to play on the device. You can download this example and other examples from my Connect meeting room. When you download this example you will need to substitute your FMS servers name or ip address for the following yourserver.com in the actionscript of the bwcheckExample file. The video files for this example are in the videos_for_streaming_example.zip archive. Unzip the video files and place them in the _definst_ directory inside the streams folder of the Flash Media Server as the following screen capture illustrates.
There is a brief description of the approach in the help files for Flash Media Server. Even though the description mentions “native bandwidth detection” the actionscript will work for script based detection as well with one exception. You will need to set the following to false in the “Application.xml” file on your Flash Media Server.
<BandwidthDetection enabled=”true”>
In the following example we will use two connections to the server. The first is a connection to get the available bandwidth and the second is to connect and play the appropriate stream. Just to be clear I had to create the different video files (“.flv”) manually. There are server solutions to realtime transcoding but they are either too expensive or outside the scope of this article to explain, that maybe a topic for a future article. It is also worth noting that in this example we only check the bandwidth once, it would be a good idea to check the bandwidth again in the event of an error or possibly poor video play back performance. That might also be the topic of a future article as well. As I have already covered the basics I will only cover the bandwidth detection in this example. The following example starts the same way the previous example started with a new NetConnection(). When the connection is made and accepted by the server side script (“bwcheck.asc“) the process of detecting the bandwidth begins. The server calls the method “onBWCheck” and sends packets of data in order to determine the clients bandwidth. When the process is complete the server sends the results to “onBWDone”.
We create the connection that will be used to check the bandwidth of the client.
nc = new NetConnection();
On the server the following code in the bwcheck.asc file on the FMS server accepts the connection and kicks off the detection process by calling the function calculateClientBw inside the same file.
application.onConnect = function(p_client, p_autoSenseBW){
this.acceptConnection(p_client);
if (p_autoSenseBW)
this.calculateClientBw(p_client);
The following is method on the client is called by the server to assist in determining the bandwidth of the client.
nc.onBWCheck = function() {
return ++counter;
};
When the process is complete the server calls the client with the following and passes in the bandwidth, deltaDown, deltaTime and latency.
p_client.call(“onBWDone”);
On the client the following method retrieves the bandwidth, deltaDown, deltaTime and latency and then calls the function on the client that will determine the appropriate video file to use.
nc.onBWDone = function(p_bw, deltaDown, deltaTime, latency) {
initVideo(p_bw);
};
The following function uses the bandwidth information passed to it to set a variable called useVideo to the appropriate video file. For simplicity I named the video files for the bandwidth they will use (e.g. 200kbps). In addition I am also changing the amount of video that will be buffered before playing each video.
function playVideo(param_detected_bw:Number) {
var detected_bw:Number = param_detected_bw;
if (detected_bw>200) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 256kbps_Stream”;
useVideo = “200kbps”;
bufferlength = 4;
} else if (detected_bw<200 && detected_bw>=160) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 150kbps_Stream”;
useVideo = “150kbps”;
bufferlength = 7;
} else if (detected_bw<160 && detected_bw>=120) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 100kbps_Stream”;
useVideo = “100kbps”;
bufferlength = 9;
} else if (detected_bw<120 && detected_bw>=85) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 75kbps_Stream”;
useVideo = “75kbps”;
bufferlength = 10;
} else if (detected_bw<85 && detected_bw>=65) {
bdwdth_txt.text = “connected @ “+detected_bw +”kbps playing 50kbps_Stream”;
useVideo = “50kbps”;
bufferlength = 12;
} else {
bdwdth_txt.text = “bandwidth too low. Sorry”
};
Well thats it. I hope that helps get you started creating streaming Flash video content for Flash Lite 3.x. The following articles will help you round out your understanding of Flash video support in Flash Lite 3.
Flash Lite 3 video capabilities
How to play FLV video from YouTube using Flash Lite 3
I hope you found this article useful.
Like this:
Like Loading...
