Setup for streaming live events to browser clients using Nginx, FMLE, and FlowPlayer

Setup for streaming live events to browser clients using Nginx, FMLE, and FlowPlayer

tutorials September 15, 2014 @ 1:00 pm, by Jonathan Tan

Editorial note: this is Jonathan's first tutorial on LowEndBox. I hope you enjoy it and more are to follow in the future! If all goes well, he will be writing tutorials occasionally alongside me. MPK

Have you been into a situation where you wanted to stream live events such as school graduation or teaching seminar? There are already many companies offering ready made solution for such purpose. But for budget conscious people, doing it the LEB way is surely cheaper!

This tutorial will guide you step by step on how to setup and use the different components that needs to work together.

Real Time Messaging Protocol (RTMP)

I chose the RTMP protocol for simplicity. It was developed by Macromedia/Adobe and can be played on any machine with Adobe Flash player.

Server Setup

The server requirements is minimal:

• Any virtualization. OpenVZ, Xen, KVM are all fine.
• 64MB RAM
• Ubuntu OS – steps are tested on 12.04

Nginx has a nice module to support the RTMP protocol. But using it means we need to compile Nginx from source! Log into your box as root and follow the steps below:

Install required packages to compile Nginx

  apt-get install build-essential libpcre3 libpcre3-dev libssl-dev  

Create a temporary folder

  mkdir -p ~/temp/nginx-install  cd ~/temp/nginx-install  

Download and extract the source of NGINX and the RTMP module.

  wget http://nginx.org/download/nginx-1.6.1.tar.gz  tar -xvf nginx-1.6.1.tar.gz  wget https://github.com/arut/nginx-rtmp-module/archive/master.zip  unzip master.zip  

This is my directory structure after:

  root@default:~/temp/nginx-install# ls -l   total 1332  -rw-r--r-- 1 root root 545036 Sep  7 20:27 master.zip  drwxr-xr-x 8 1001 1001   4096 Aug  5 19:18 nginx-1.6.1  -rw-r--r-- 1 root root 803301 Aug  5 21:55 nginx-1.6.1.tar.gz  drwxr-xr-x 6 root root   4096 Sep  2 02:44 nginx-rtmp-module-master  

Go to the NGINX extracted source

  cd nginx-1.6.1/  

Configure with the RTMP module

  ./configure --with-http_ssl_module --add-module=../nginx-rtmp-module-master  

If you wish to add the other supported modules, you can freely add them. For example:

  ./configure --with-http_ssl_module --with-http_realip_module --with-http_addition_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gunzip_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_stub_status_module --with-mail --with-mail_ssl_module --with-file-aio --with-ipv6 --add-module=../nginx-rtmp-module-master  

Then continue to compile and install. By default, Nginx will be installed at: /usr/local/nginx

  make  sudo make install  

It will be more convenient to create init scripts for the service.

  wget https://raw.github.com/JasonGiedymin/nginx-init-ubuntu/master/nginx -O /etc/init.d/nginx  chmod +x /etc/init.d/nginx  sudo update-rc.d -f nginx defaults  

After that, we can start and stop NGINX using the commands:

  service nginx start  service nginx stop  

Open the file: /usr/local/nginx/conf/nginx.conf and add the following contents at the bottom:

  rtmp {          server {                  listen 1935;                  chunk_size 4096;                    application live {                          live on;                          record off;                  }          }  }  

Restart the server after this.

Flash Media Live Encoder (FMLE)

FMLE is a free live encoding software made by Adobe. You can use this capture video and audio input from different devices and stream it to your server configured above. You can get it from http://www.adobe.com/products/flash-media-encoder.html.

Here is a walkthrough on downloading the product:

Install the software and open it. It should look like this:

You can choose and configure your video and audio device on the left. Feel free to play around. The right side contains the details of your server.
I blotted out my IP address from the screen capture. But do note of the values rtmp://xx.xx.xx.xx/live and livestream in the text boxes. You will need these in your HTML.

Click connect to connect FMLE to the server and click start to begin the streaming session

FlowPlayer

I have found good success using FlowPlayer for rendering my video streams on a browser.

Here is the relevant HTML/Javascript code that shows the stream from the broadcast made by FMLE above:

  $f("wowza", "http://releases.flowplayer.org/swf/flowplayer-3.2.15.swf", {      clip: {          url: 'livestream',          scaling: 'fit',          live: true,          autoPlay: true,          provider: 'hddn'      },      plugins: {          hddn: {              url: "flowplayer.rtmp-3.2.11.swf",                  netConnectionUrl: 'rtmp://xx.xx.xx.xxx/live'          }      },      canvas: {          backgroundGradient: 'none'      }  });  $f("wowza").play();  

And this is output when the HTML page was opened on a browser:

To save you the trouble of finding the right combination of swf files and HTML code, here is the complete zipped html client package.

Final notes

I want to thank @ihatetonyy of LET who helped me a lot with my research on video streaming.

Source : http://lowendbox.com/blog/setup-for-streaming-live-events-to-browser-clients-using-nginx-fmle-and-flowplayer/