How to create live streaming server with nginx, nginx-rtmp-module on Ubuntu. HTTP Live Streaming (HLS)

Step1. 

Type --> sudo apt-get update

Type --> sudo apt-get upgrade

Step 2.
NGINX-based Media Streaming Server
Clone nginx-rtmp-module
type--> git clone https://github.com/sergey-dryabzhinsky/nginx-rtmp-module.git

Step 3.

Install nginx dependencies

Type--> sudo apt-get install build-essential libpcre3 libpcre3-dev libssl-dev

Type--> sudo apt install zlib1g zlib1g-dev

Step 4.

Download nginx

type--> wget https://nginx.org/download/nginx-1.18.0.tar.gz

Extract tar file

type--> tar -xf nginx-1.18.0.tar.gz

Go This folder

Type--> cd nginx-1.18.0

Compile nginx

Type--> ./configure --with-http_ssl_module --add-module=../nginx-rtmp-module

Type--> sudo make install

Step 5.

Configuration

check nginx.conf

Type--> nano /usr/local/nginx/conf/nginx.conf

Here if file unwriteable then give write permission 

type--> sudo chmod -R 777 /usr/local/nginx/conf

Note : 777 Permission is not good.. so change this permission after work

Type--> nano /usr/local/nginx/conf/nginx.conf

for better idea copy this orginal config file

type--> sudo mv /usr/local/nginx/conf/nginx.conf /usr/local/nginx/conf/nginx.conf.original

Now check conf folder has copy or not

type -- cd /usr/local/nginx/conf/

type--> ls -al

Type this 2 command for md5

Type--> md5sum nginx.conf.default

Type--> md5sum nginx.conf.original

Back to main location

type --> cd

Step 6.

Change and midify nginx.conf

type--> nano /usr/local/nginx/conf/nginx.conf

Copy and Peste this configure
and then save file..

worker_processes  auto;

events {

    worker_connections
 1024;

}

# RTMP configuration

rtmp {

    server {

        listen
1935; # Listen on standard RTMP port

        chunk_size
4000;





        application
show {

            live
on;

           # Turn
on HLS

            hls
on;

            hls_path
/nginx/hls/;

            hls_fragment
3;

            hls_playlist_length
60;

            #
disable consuming the stream from nginx as rtmp

            deny
play all;

        }

    }

}





http {

    sendfile off;

    tcp_nopush on;

   # aio on;

    directio 512;

    default_type
application/octet-stream;





    server {

          listen
1900;

	   #listen 443 ssl;

	   

       location
/hls{

            #
Disable cache

            add_header
'Cache-Control' 'no-cache';





            # CORS
setup

            add_header
'Access-Control-Allow-Origin' '*' always;

            add_header
'Access-Control-Expose-Headers' 'Content-Length';





            #
allow CORS preflight requests

            if
($request_method = 'OPTIONS') {

                add_header
'Access-Control-Allow-Origin' '*';

                add_header
'Access-Control-Max-Age' 1728000;

                add_header
'Content-Type' 'text/plain charset=UTF-8';

                add_header
'Content-Length' 0;

                return
204;

            }





            types
{

                application/dash+xml
mpd;

                application/vnd.apple.mpegurl
m3u8;

                video/mp2t
ts;

            }





            root
/nginx/;

        }

    }

}

Note 1:

For good HLS experience we recommend using 3 seconds fragments with 60 seconds playlist

Add 1

rtmp {
    server {
        listen 1935; # Listen on standard RTMP port
        chunk_size 4000;

        application show {
            live on;
            # Turn on HLS
            hls on;
            hls_path /nginx/hls/;
            hls_fragment 3;
            hls_playlist_length 60;
            # disable consuming the stream from nginx as rtmp
            deny play all;
        }
    }
}

Note 2:

http server config

Since HLS consists of static files, a simple http server can be set up with two additions, correct MIME types and CORS headers.

Add 2

server {
    listen 8080;



    location /hls {
        # Disable cache
        add_header Cache-Control no-cache;



        # CORS setup
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length';



        # allow CORS preflight requests
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }



        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }



        root /nginx/;
    }
}

Step 7. 

After Configuration Create 2 folder 1.nginx 2. under nginx/hls

type--> sudo mkdir /nginx

type--> sudo mkdir /nginx/hls

Test the configuration file

type--> sudo /usr/local/nginx/sbin/nginx -t

if seen test successfully so your live server is ready

Start nginx in the background

type--> sudo /usr/local/nginx/sbin/nginx

Check hls forder

type--> cd /nginx/hls Type--> ls -al

Step 8. Here Your Html code... 

<script src="js/jquery-1.9.0.min.js"></script
<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
<script src="src/videojs-http-streaming.js"></script>
<div class="col_1_of_3 span_1_of_3"> 
<video id="player" class="video-js vjs-default-skin" height="190" style="width:100%;"  poster="images/radio_img_4.jpg" controls autoplay preload="none">
<source src="http://3.7.219.246:8080/hls/mylive.m3u8" type="application/x-mpegURL" />
</video>
<script>
var player = videojs('#player');
// document.getElementById('#player').play();
</script> 
<div class="banner_content"><h2>Live<span> Now</span></h2> </div>



<div class="icon-right"><a href="#"><img src="images/marker1.png" alt=""/></a></div>
</div>

Step 10..
Install OBS Studio

Go to setting option

Goto Stream – 
Next Service Custom – 
Next – server (rtmp://3.7.219.246/show ) 
Next – Stream Key (mylive)
Next Ok

Then 
Start Streaning

If not any error here you are lucky... ready and enjoy your own live streming server..

Check Your file