Adobe HDS Streaming Installation and Setup

Adobe HDS streaming work for .flv or f4v file format. So in order to start HDS streaming setup we first need sample flv/f4v file format. We can convert any video file(with any extension) to .flv format using FreeMake Video converter tool. This is free and a very simple tool to use and we can download the installer from http://www.freemake.com/free_video_converter/.

After converting video file into .flv format now we need to create manifest file to test the HDS streaming functionality. Manifest file is nothing but a xml file which contains the information about the segmented files which will play when any player will read the particular manifest file. HDS streaming manifest file format is .f4m and note that f4m file can be create only from flv/f4v format file. Also note that, we need Adobe Flash Player (flowplayer) to run any f4m extension manifest file. For this example, consider that we created this 3 different flv file from 3 different (e.g. - .ts) video files. This sample files will be used in the following discussion:

nissan_440_00001.flv

nissan_440_00001.flv

nissan_440_00003.flv

Now the HDS setup is divided into 4 parts:

1. Prepare the F4Fpackager
2. Prepared Manifest File
3. Installing and configuring the HTTP Origin Module 
4. Run the HDS video using Flash  FlowPlayer

1. Prepare the F4Fpackager

The F4FPackager Tool is used to package the media files (.flv). This tool generates the required file fragments and F4M Manifest files. Multi-Bitrate packaging support is also available.In order to get this package, we need to install Adobe Flash Media Server.

You can download the media server package from:

http://www.adobe.com/cfusion/tdrc/index.cfm?loc=en_us&product=adobemediaserver

This is trial version and you need to have your own user id to get the package. We downloaded linux version for this case. The installation is pretty straight and we just need to extract the bundled package in a directory.

So we download the following file from adobe: AdobeMediaServerStarter_5_x64_LS1_All.zip and do the steps:

# ls AdobeMediaServerStarter_5_x64_LS1_All.zip #mkdir Media_server #mv AdobeMediaServerStarter_5_x64_LS1_All.zip Media_Server #cd Media_Server # unzip AdobeMediaServerStarter_5_x64_LS1_All.zip # ls AdobeMediaServerStarter_5_x64_LS1_All.zip  documentation  license.pdf  linux  mozilla_mods  readme.pdf  windows # cd linux/ # ls AdobeMediaGateway_5_LS1_linux64.tar.gz  AdobeMediaServer_5_LS1_linux64.tar.gz # tar zxvf AdobeMediaServer_5_LS1_linux64.tar.gz At this point the media server files will be extracted into folder: AMS_5_0_1_r1076. We can now locate the f4fpackager file here in this dir: # cd AMS_5_0_1_r1076/ #ls –lrth -rw-r--r--.  1 root root 10433269 Sep 26  2012 f4fpackager Change the file permission to execute the script # chmod 755 f4fpackager Now rename the directory to HDS and then copy the entire directory to /var/www/html directory or in your apache server doc root directory. # mv AMS_5_0_1_r1076 HDS #cp –r HDS /var/www/html/

Now, it’s time to upload those sample flv files into the server and create the manifest file. Let’s say, we have f4fpackager in /var/www/html/HDS/ location then we will upload flv files in the same directory.

2. Prepared Manifest File

In order to create the manifest file, we will just see the steps to do for these 3 sample files. In order to understand how f4fpackager works we need to read more from the following URL:

http://help.adobe.com/en_US/HTTPStreaming/1.0/Using/WS9463dbe8dbe45c4c-c126f3b1260533756d-7ffc.html

Before we proceed, we need to create a directory where we will keep our manifest and segmented file together just to make sure everything works fine and also to avoid any confusion.

#mkdir /var/www/html/HDS/output

Change to current directory HDS

# cd /var/www/html/HDS

Now it’s time to create manifest file. For single segmented video files the command would be for sample file: nissan_440_00001.flv

# ./f4fpackager --input-file=nissan_440_00001.flv --output-path=ouput

This command will create segmented files inside the output directory, which looks like below:

#cd output

# ls -lrth

total 1.1M

-rw-r--r--. 1 root root  121 May  1 16:51 nissan_440_00001Seg1.f4x

-rw-r--r--. 1 root root 1.1M May  1 16:51 nissan_440_00001Seg1.f4f

-rw-r--r--. 1 root root 1.1K May  1 16:51 nissan_440_00001.f4m

So we can see the manifest f4m file “nissan_440_00001.f4m” is created from given sample file and we can also see the segmented files.The correct manifest file for this case looks like below:

 

< ?xml version="1.0" encoding="UTF-8"? > < manifest xmlns="http://ns.adobe.com/f4m/1.0" >         < id >nissan_440_00001< /id >         < streamType >recorded< /streamType >         < duration >                 11.978999999999999         < /duration >         < bootstrapInfo                  profile="named"                  id="bootstrap9855"         >              AAAAnGFic3QAAAAAAAAAAwAAAAPoAAAAAAAALssAAAAAAAAAAAA AAAAAAQAAABlhc3J0AAAAAAAAAAABAAAAAQAAAAMBAAAAV2FmcnQAAAAAAAA D6AAAAAAEAAAAAQAAAAAAAAAAAAAPoAAAAAIAAAAAAAAPoAAAAAABAAAAA wAAAAAAACcaAAAH0AAAAAAAAAAAAAAAAAAAAAAA         < /bootstrapInfo >         < media                  streamId="nissan_440_00001"                  url="nissan_440_00001"                  bootstrapInfoId="bootstrap9855"         > < metadata >  AgAKb25NZXRhRGF0YQgAAAAAAAhkdXJhdGlvbgBAJ/U/fO2RaAAFd2lkdGg AQHkAAAAAAAAABmhlaWdodABAbAAAAAAAAAAMdmlkZW9jb2RlY2lkAgAESDI2MwAMY XVkaW9jb2RlY2lkAgAEbXA0YQAPYXVkaW9zYW1wbGVyYXRlAEDlfAAAAAAAAA1hdWRpb2No YW5uZWxzAEAAAAAAAAAAAAl0cmFja2luZm8KAAAAAgMABmxlbmd0aABAx2WAAAAAAA AJdGltZXNjYWxlAECPQAAAAAAAAAhsYW5ndWFnZQIAA2VuZwAACQMABmxlbmd0aABAx2W AAAAAAAAJdGltZXNjYWxlAECPQAAAAAAAAAhsYW5ndWFnZQIAA2V uZwAACQAACQ== < /metadata > < /media > < /manifest >

This manifest file can be used to do HDS streaming test. In addition, if we want to test multibit rate HDS streaming then we can do these steps:

#./f4fpackager --input-file=nissan_440_00002.flv --output-path=ouput --manifest-file=ouput/nissan_440_00001.f4m

# ./f4fpackager --input-file=nissan_440_00003.flv --output-path=ouput --manifest-file=ouput/nissan_440_00002.f4m

In the first command, we told the tool to use nissan_440_00002.flv file as a segmented video files and previously created nissan_440_00001.f4m manifest as information to get another segmented file. This command will create manifest file nissan_440_00002.f4m under output directory for both nissan_440_00001.flv and nissan_440_00002.flv file. The same way, we can use sample nissan_440_00003.flv file with this already created segmented files and so on. After the second command we will have nissan_440_00003.f4m manifest file for all 3 sample files. For this demonstration, we use only one segmented file.

3. Installing and configuring the HTTP Origin Module

The Adobe Http Streaming solution requires an Apache HTTP Origin Module installed and configured. The HTTP Origin Module will serve the required fragment which is determined from the bootstrap information packaged into the F4M Manifest file, generated by the F4FPackager and Live Streaming Packager.

The HTTP Origin Module (mod_f4fhttp.so) is an extension to Apache HTTP Server that serves content packaged offline for HTTP Dynamic Streaming (HDS). The HTTP Origin Module is available in the directory where we extracted media server:

# cd /var/www/html/HDS

# ls -lrth *.so

-rwxr-xr-x. 1 root root 6.7M Apr 25 17:40 mod_f4fhttp.so

-rwxr-xr-x. 1 root root 6.7M Apr 25 17:07 libhds.so

-rwxr-xr-x. 1 root root  60K Apr 25 17:07 libcares.so

-rwxr-xr-x. 1 root root 3.4M Apr 25 17:07 libfmsccme.so

-rwxr-xr-x. 1 root root 1.2M Apr 25 17:07 libadbe_license.so

-rwxr-xr-x. 1 root root 329K Apr 25 17:07 libadbe_flv.so

-rwxr-xr-x. 1 root root  16M Apr 25 17:07 libadbe_dme.so

We need to copy this module along with all other lib files into the apache main modules directory

# cp *.so /etc/httpd/modules/

#cp lib*  /etc/httpd/modules/

Now check that module and all lib files are copied there:

#cd /et c/httpd/modules

-rwxr-xr-x. 1 root root 6.7M Apr 25 17:40 mod_f4fhttp.so

-rwxrwxrwx. 1 root root  16M Apr 25 17:52 libadbe_dme.so

-rwxr-xr-x. 1 root root 329K Apr 25 17:52 libadbe_flv.so

-rwxr-xr-x. 1 root root 1.2M Apr 25 17:52 libadbe_license.so

-rwxr-xr-x. 1 root root  60K Apr 25 17:52 libcares.so

-rwxr-xr-x. 1 root root  58K Apr 25 17:52 libasneu.so.1

-rwxr-xr-x. 1 root root  60K Apr 25 17:52 libcares.so.2.0.0

-rwxr-xr-x. 1 root root  60K Apr 25 17:52 libcares.so.2

-rwxr-xr-x. 1 root root 1.7M Apr 25 17:52 libcrypto.so.1.0.0

-rw-r--r--. 1 root root 159K Apr 25 17:52 libexpat.so.1.5.2

-rwxr-xr-x. 1 root root 3.4M Apr 25 17:52 libfmsccme.so

-rwxr-xr-x. 1 root root 6.7M Apr 25 17:52 libhds.so

-rwxr-xr-x. 1 root root 354K Apr 25 17:52 libssl.so.1.0.0

-rw-r--r--. 1 root root 390K Apr 25 18:03 libexpat.so.0

Now add the module and following section in apache config file:

#vi /etc/httpd/conf/httpd.conf

AddType video/x-flv .flv AddType video/mp4 .f4v LoadModule f4fhttp_module modules/mod_f4fhttp.so < Location /f4m > HttpStreamingEnabled true HttpStreamingContentPath "/var/www/html/HDS" < /Location >

Restart the apache web server to get the effect of these changes.

# service httpd restart

4.      Run the HDS video using Flash Player

Finally we need to test the streaming now. And to test that we need the flash player to play the created manifest file using sample/test html file. Typpically Flowplayer is used to play the video.

To download player and script to handle it, we should download them.

#cd /var/www/html/HDS/output

# mkdir flowplayer-hls

#cd flowplayer-hls

# wget http://releases.flowplayer.org/swf/flowplayer.controls-tube-3.2.15.swf

# wget http://releases.flowplayer.org/swf/flowplayer.httpstreaming-3.2.10.swf

# wget http://releases.flowplayer.org/swf/flowplayer.f4m-3.2.9.swf

# wget http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf

Java Script:

# wget http://www.ripe.net/flowplayer/flowplayer-3.2.11.min.js/at_download/file

# wget http://releases.flowplayer.org/js/flowplayer.playlist-3.2.10.min.js?download=true

#chmod 755 *.swf

If you don’t find those two java script in those two locations then please google it.

Now create the html file to use the downloaded flash flowplayer like below:

# cd /var/www/html/HDS/output

# vi hds_streaming.html

< html > < head >   < script src="flowplayer-hls/flowplayer-3.2.11.min.js" >< /script >   < script src="flowplayer-hls/flowplayer.playlist-3.2.10.min.js" > < /script > < /head > < body > < div  id="player" style="width:425px;height:300px;" > < /div > < script type="text/javascript"  >     flowplayer("player", "flowplayer-hls/ flowplayer-3.2.16.swf ", {      plugins:  {             f4m: { url: 'flowplayer-hls/flowplayer.f4m-3.2.9.swf'},             httpstreaming: {                 url: 'flowplayer-hls/flowplayer.httpstreaming-3.2.10.swf'             },             controls: {                 url: "flowplayer-hls/flowplayer.controls-tube-3.2.15.swf",                 // customize the appearance make it have a lighter look                 buttonColor: 'rgba(0, 0, 0, 0.9)',                 buttonOverColor: '#000000',                 backgroundColor: '#D7D7D7',                 backgroundGradient: 'medium',                 sliderColor: '#FFFFFF',                 sliderBorder: '1px solid #808080',                 volumeSliderColor: '#FFFFFF',                 volumeBorder: '1px solid #808080',                 timeColor: '#000000',                 durationColor: '#535353'             }         },         clip: {             url: "nissan_440_00001.f4m",             urlResolvers: ['f4m'],             provider: "httpstreaming",             autoPlay: false         }     }); < /script > < /body > < /html >

Now everything is done. Hit the page hds_streaming.html in your browser to test HDS streaming should work:

http://you_server_ip/HDS/output/hds_streaming.html