obey-robots.txt
View Thread
Web Master Trouble » Linux Apache MySQL PHP optimalisation tips tricks » Linux tutorials, Tips & Tricks
 Print Thread
Setup for streaming live events to browser clients using Nginx, FMLE, and FlowPlayer
NuclearFusion

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-installcd ~/temp/nginx-install

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

wget http://nginx.org/download/nginx-1.6.1.tar.gztar -xvf nginx-1.6.1.tar.gzwget https://github.com/arut/nginx-rtmp-module/archive/master.zipunzip 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.zipdrwxr-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.gzdrwxr-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

makesudo 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/nginxchmod +x /etc/init.d/nginxsudo update-rc.d -f nginx defaults

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

service nginx startservice 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:

fmle1

fmle2

fmle3

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

fmle4

fmle5

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.


Warning about ParkingCrew.com! Case: ParkingCrew.com acquires NameDrive.com but earnings are not transferred despite assurances and promises. Inquiries about this are ignored! It's just a con compagny. Don't do business with them!
 
Jump to Forum
New Thread Post Reply
Use BBcode or HTML to refer to; 'Setup for streaming live events to browser clients using Nginx, FMLE, and FlowPlayer'
BBcode:
HTML:
Simular threads
Subject Discussion Forum         Last Post
NGINX on CentOS 7 Linux tutorials, Tips & Tricks : 1 21-09-2015
An introduction to NGINX, PHP-FPM and MariaDB on CentOS Linux tutorials, Tips & Tricks : 1 30-12-2013
An introduction to NGINX, PHP-FPM and MariaDB on Ubuntu Linux tutorials, Tips & Tricks : 1 30-11-2013