Results 1 to 1 of 1

Thread: How to streaming live events to browser clients using Nginx, FMLE, and FlowPlayer

Short URL : https://m.dikz.info/82
  1. #1
    Administrator Dendik's Avatar
    Phone No
    08993401022
    Join Date
    Jul 2012
    Posts
    79
    Likes 2

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

    Do 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.

    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

    Code:
    apt-get install build-essential libpcre3 libpcre3-dev libssl-dev
    Create a temporary folder
    Code:
    mkdir -p ~/temp/nginx-install
    cd ~/temp/nginx-install
    Download and extract the source of NGINX and the RTMP module.
    Code:
    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:
    Code:
    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
    Code:
    cd nginx-1.6.1/
    Configure with the RTMP module
    Code:
    ./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:
    Code:
    ./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
    Code:
    make
    sudo make install
    It will be more convenient to create init scripts for the service.
    Code:
    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:
    Code:
    service nginx start
    service nginx stop
    Open the file: /usr/local/nginx/conf/nginx.conf and add the following contents at the bottom:
    Code:
    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.

    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:
    Code:
    $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.
    Attached Files Attached Files
    Best Regards,

    Dendik
    ============
    DikzNET Executive

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Connect to us
About us

Dikz Network have been around since 2010. We provide Premium Hosting and High Quality servers.

Feel free to contact us if you have any presale questions