Monday, December 08, 2008

Flash CS4 to Flash Media Server 3 publication for RTMP

If you have not worked with Flash before you will probably find that using the Flash Media Server (FMS) is not as easy. Because FMS provides a full-blown application development environment based on Flash there are a lot more options you can choose.
The following tutorial will illustrate a very simple, stripped-down method to publish a video via FMS and should not be taken as the definitive way you should publish your content. For the purposes of this tutorial you should have:
• Licensed copy of Macromedia (Now part of Adobe) Dreamweaver 8 (or higher)
I now recommend Flash CS3 or Flash CS4
• Licensed copy of Macromedia Flash and Flash Video Encoder (version 8 or higher) bundle with Flash CS3 or Adobe Media Encoder bundle with Flash CS4
The basic process for encoding and publishing your video files is:
1. Request an application directory on the servers for your project.
2. Encode your video or audio into the Flash Video format using the Flash Video Encoder. Other tools may work but are beyond the scope of this tutorial.
3. Copy the encoded file(s) to the content directory
4. Publish the URL(s) to your content so clients can find it.

There are two use cases. The most common use case is to request an application directory on the media server(s) the video is supposed to come from. In most of the case team managing Flash Media Server are remote from the development site. In this case most of the time application directory are provided through email or web services which provide HTTP and/or FTP access to upload and later on deliver your files through HTTP or RTMP protocol. Generally, the path will look something like:
\\my.fullyqualidieddomainname.zzz\wmsroot$\\
This is the UNC path to your area and in some cases for company using inter office extranet can be accessed via Windows Explorer or SMB. You can even map a network drive letter to it if you'd like. The portion of the above path is a unique name given to your project and will be used to refer to your content later.
The second use case would be to upload to a local FMS in case you are running Flash CS4 and FMS on the same production machine


Generally speaking.
The first step is to encode your video files. This is done using Adobe Media Encoder in Flash CS4 and this operation is done during the the import video wizard process or running Adobe Media Encoder in stand alone mode.
Open the application and add a new video file to the queue by dragging the source video to the queue window. Then click Settings for each batch entry in case you want to change the video encoding profile.
Finally, you should click the Start Queue button to begin encoding your video(s). Depending on the size and quality of the video and the speed of your computer the encoding process can take a very long time. Once the encoding process is finished you can close Adobe Media Encoder.
Now that your video is encoded most of the time you create a new project, insert an FLVPlayback Component on the stage and then associate a video URL to the video component. This path can be a local path, an http URL or an RTMP url.

Every file should be copied to the application directory on the streaming media server (local test server) as well as remote server.
For this tutorial you should copy the file using a path structure similar to this:
\\myfullyqualidieddomainname.zzz\wmsroot$\myappdir\streams\100k\testvid.flv
You will need to create the streams and 100k directories before you can copy the video file (testvid.flv in this example).
Once you have created the directory structure and copied your video file to the FMS server, you need to create a special file called main.asc at the root of the application directory to tell the FMS server how to serve your content.

The easiest way to do this right now is to use Macromedia Dreamweaver to embed a Flash player into a web page and let it create the main.asc file for you. To do this, open Macromedia Dreamweaver 8 and create a new HTML page:
The most important fields on the Insert Flash Video window that you need to change are:
Video Type: Change this to Streaming Video. If you fail to change this to Streaming Video the .flv video file will be streamed from a web server and not the FMS server. This is called progressive streaming and is not the same as using FMS.
Server URI: rtmp://wms.myfullyqualidieddomainname.zzz /myappdir/100k . This is the base URI that the Flash video player will use to construct the path to the video. Do not add the streams portion of the path to the URI. For example, the physical path might be
\\wms.myfullyqualidieddomainname.zzz /myappdir/streams/100k/myvideo.flv
but the correct rtmp path would be
rtmp://www.myfullyqualidieddomainname.zzz/myappdir/100k/myvideo.flv
Adding the streams portion of the path to the URI like this
rtmp://www.myfullyqualidieddomainname.zzz /myappdir/streams/100k/myvideo.flv
would be incorrect.
It is very important that you use the correct URI or else the stream will not work.
Stream name: This is the name of the video file (vidtest.flv in this case).
The other fields can be left blank or modified as you see fit.

Save the file.
By using Dreamweaver to insert the video player all the hard work of creating the embedded video player and the main.asc file has been done for you. Now all that remains is to copy the main.asc file to the root of your FMS application directory:
\\myfullyqualidieddomainname.zzz \wmsroot$\myappdir\main.asc
and publishing the Dreamweaver site to a web server of your choice (www.myfullyqualidieddomainname.zzz).

The main.asc file is a simple template Flash Action Script document that helps FMS to feed the video file to the client when a request comes in. It must exist at the root of your FMS application directory in order for streaming to work correctly.
You can do a lot within the main.asc file such as security checking and automatic bandwidth detection. Using these advanced features require programming and are beyond the scope of this tutorial. A good place to start looking for further information would be the Adobe Flash Media Server Developer Center. Now all that remains is for you to open the HTML page from your webserver and check that the Flash video plays correctly. If you entered everything correctly and placed the files in the right places then you should see an embedded flash video player in your browser window with your video playing within it. If all you see is a blank HTML page then it's likely that you mistyped the rtmp path or file name incorrectly.

Finally if your Flash Media Server is running under Windows Server 2003 make sure to open port 1935 and port 443.

When the Flash Player encounters the connect() method, it attempts to connect to your FMS following a very specific pattern. It first attempts to connect over port 1935, then port 433, then port 80 and then it automatically attempts to tunnel through by sending rtmp data over http also called RTMPT it turns out the automatic sequence of attempts is fine for many situations however you may find that some users can't make a connection (well , the NetConnection can't) because their firewall (hardware) blocks data from traveling through port 1935. If those users can connect to any website surely they can use port 80 and even if their setup blocks rtmp surely they can use RTMPT over port 80 because its really just plain http ...

To force the flash player to try to connect through a specific port other than the defaults as specified above.....write rtmp as ....my_nc.connect("rtmp:://mydomain.com:8500/video);

Note for Flash Media Server:

It is possible that the default Adaptor.xml file has port 19350.
You can change this port but be carefull not to take
1935 which may result in conflict with the external port which clients (FlashPlayer) uses to connect to FMS, which is also 1935 by default

To change this port goto C:\Program Files\..\"Flash Media Server 3"\conf\_defaultRoot_\adaptor.xml and change 19350 to an other prot

Finally make sure you open this port locally in you FireWall and 1935 from outbound to inboud traffic

The change in adaptor.xml can be done around the following block :

${ADAPTOR.HOSTPORT}


${ADAPTOR.HOSTPORT}


Stop Flash Media Server and Restart the server.

Remember that a user might not connect remotely if the server hosting Flash Media Server is blocking port 1935

If you want to play an MP4/H264 MOV or F4V make sure you add mp4: before the video file name EG:
rtmp://localhost/vod/mp4:480p.f4v

You may be interested to read more about interactive video in Flash CS4 as well

http://younsi.blogspot.com/2008/12/interactive-video-in-flash-using-f4v.html

1 comment:

Anonymous said...

Nice catch on the typo in the Adapter.xml! TY