Setup HLS (HTTP Streaming) using cloud nginx server

bySolutions on your hand Monday, July 10, 2023

 NGINX (pronounced "engine-x") is an open-source, high-performance web server and reverse proxy. It is known for its high performance, scalability, and flexibility. NGINX is used by a wide variety of websites and applications, including:


High-traffic websites: NGINX can handle a large number of concurrent requests, making it a good choice for high-traffic websites.

Static content: NGINX is a fast and efficient way to serve static content, such as images, CSS, and JavaScript files.

Dynamic content: NGINX can also be used to serve dynamic content, such as PHP, Java, and Python applications.

Load balancing: NGINX can be used to load balance traffic across multiple servers, which can improve performance and reliability.

Reverse proxy: NGINX can be used as a reverse proxy, which means that it can sit in front of another server and act as a gateway to that server. This can be useful for improving security and performance.

Web application firewall: NGINX can also be used as a web application firewall (WAF), which can help to protect websites from attacks.

Here are some of the benefits of using NGINX:


High performance: NGINX is known for its high performance, and it can handle a large number of concurrent requests.

Scalability: NGINX is scalable and can be easily scaled to handle more traffic.

Flexibility: NGINX is flexible and can be used for a variety of purposes, such as serving static content, dynamic content, and load balancing.

Security: NGINX can be used to improve security by acting as a reverse proxy or web application firewall.

Community support: NGINX has a large and active community of users and developers, which means that there is plenty of support available if you need it.

If you are looking for a high-performance, scalable, and flexible web server, NGINX is a good option to consider. It is a popular choice for a variety of websites and applications, and it offers a number of benefits that can help you to improve the performance and security of your website.


RTMP stands for Real-Time Messaging Protocol. It is a protocol for streaming audio, video, and data over the internet. It is commonly used for live streaming of video and audio content, such as live broadcasts, webinars, and online gaming.


HLS stands for HTTP Live Streaming. It is a streaming media protocol that uses HTTP to deliver video and audio content over the internet. HLS is a widely used protocol for streaming video content, and it is supported by a wide variety of devices and players.


HLS works by breaking the video content into small segments that are each encoded using the H.264 or HEVC/H.265 codecs. These segments are then stored on a server and served to the client using HTTP requests. The client player then reassembles the segments and plays the video content.


HLS offers a number of advantages over other streaming protocols, such as:


Low latency: HLS has low latency, which means that there is a small delay between when the video is encoded and when it is played by the client. This is important for live streaming applications, where users want to see the video as it is being recorded.

Adaptive bitrate: HLS supports adaptive bitrate streaming, which means that the client player can automatically adjust the video quality based on the available bandwidth. This ensures that the video content is always played smoothly, even if the user's network connection is slow.

Wide support: HLS is supported by a wide variety of devices and players, including web browsers, mobile devices, and streaming media players. This makes it a good choice for delivering video content to a wide audience.

If you are looking for a streaming protocol that is widely supported, has low latency, and supports adaptive bitrate streaming, then HLS is a good option to consider.


here are the steps on how to build an HLS streaming server with NGINX on your Google Cloud account:


Create a Google Cloud Platform (GCP) project and enable the Cloud Storage API.

Create a Cloud Storage bucket to store your HLS streams.

Install NGINX on your GCP instance.

Configure NGINX to serve your HLS streams from the Cloud Storage bucket.

Test your HLS streaming server by streaming a video to a web browser.

Here are the detailed steps for each of these steps:


To create a GCP project, go to the GCP Console: https://console.cloud.google.com/ and click the Create Project button.

To enable the Cloud Storage API, go to the APIs & Services page in the GCP Console and search for "Cloud Storage". Click the Enable button to enable the API.

To create a Cloud Storage bucket, go to the Cloud Storage Browser: https://console.cloud.google.com/storage/browser and click the Create Bucket button.

To install NGINX on your GCP instance, follow the instructions in the NGINX documentation: https://docs.nginx.com/.

To configure NGINX to serve your HLS streams from the Cloud Storage bucket, edit the NGINX configuration file and add the following lines:

Code snippet

location /hls {

  alias /path/to/your/hls/streams;

  expires 30d;

}

Use code with caution. Learn more

Replace /path/to/your/hls/streams with the path to the directory where your HLS streams are stored.


To test your HLS streaming server, open a web browser and navigate to the URL of your NGINX server followed by /hls/playlist.m3u8. You should see a list of HLS streams.

Once you have completed these steps, you will have a working HLS streaming server on your GCP instance. You can now use this server to stream video content to a wide audience.


///after create a GCP

1. enable compute engine API

2. create a VM - select spects and create.

///install ngnix 



now I could see the ngix is accessible from out site world sing the public ip through port 80 http://xx.xx.xx.xx

///important config details on nginx server

cat /etc/nginx/conf.d/default.conf //// where all config details are there

first part is completed now will look how to build HLS

created directory and placed some sample video file




//edited the default configuration (inside server block) file for according to this

# vi /etc/nginx/conf.d/default.conf 

#edited for hls streaming

    location /hls {

    types {

        application/vnd.apple.mpegurl m3u8;

        video/mp2t ts;

    }

    root /usr/share/nginx/html;

    add_header Cache-Control no-cache;

    add_header Access-Control-Allow-Origin *;

    }


#for av file configruation by boobalan


    location ~* \.avi$ {

    types {

        video/avi avi;

    }

    default_type video/avi;

    add_header Cache-Control no-cache;

    add_header Access-Control-Allow-Origin *;

    }


#for mkv file

    location /usr/share/nginx/html/hls {

    types {

        video/x-matroska mkv;

    }

    default_type video/x-matroska;

    add_header Cache-Control no-cache;

    add_header Access-Control-Allow-Origin *;

    try_files $uri $uri/ =404;

    }


//test nginx

# nginx -t

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok

nginx: configuration file /etc/nginx/nginx.conf test is successful

//restart service

# systemctl restart nginx


///now test the streaming open vlc - media - network stream - paste the url and play




//now this capable of playing only on VLC, let's plan to put thin into a html wepage and play the video as well we will try to attach them in to a blogger.

//need to write html code

//Please note that the ability to play a video directly from a URL depends on the video format and the browser's capabilities. It's recommended to use widely supported video formats like MP4 or WebM to maximize compatibility.

//hence i have converted the video from mkv to mp4 and webm formats

//upload those converted video files into the directory /user/share/nginx/html/hls/

//edit the default config page according to mp4 make sure mp4 also acceptable from nginx server
//completely modified the config for default

# cat /etc/nginx/conf.d/default.conf 
server {
    listen       80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

#edited for hls streaming
    location /hls {
    types {
        application/vnd.apple.mpegurl m3u8;
        video/mp2t ts;
    }
    root /usr/share/nginx/html;
    add_header Cache-Control no-cache;
    add_header Access-Control-Allow-Origin *;
    }

# for video files
location /usr/share/nginx/html/hls {
    root /usr/share/nginx/html;
    add_header Cache-Control no-cache;
    add_header Access-Control-Allow-Origin *;

    types {
        video/mp4 mp4;
        video/x-matroska mkv;
        video/avi avi;
    }

    default_type video/mp4;
}


    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

# systemctl start nginx

//now check once 
facing error mp4 is not playing in vlc player

//checking the log
2023/07/15 09:06:16 [error] 2557#2557: *193 open() "/usr/share/nginx/html/hls/work.mp4" failed (13: Permission denied), client: xx.xx.xx.xx, server: localhost, request: "GET /hls/work.mp4 HTTP/1.1", host: "public ip of the nginxi serever"

[1]+  Stopped                 tail -f /var/log/nginx/error.log

# tail -f /var/log/nginx/access.log
client ip  - - [15/Jul/2023:09:07:56 +0000] "GET /hls/work.mp4 HTTP/1.1" 403 153 "-" "VLC/3.0.18 LibVLC/3.0.18" "-"

//this might be permission issue visible clearly
//changing the video file permission and check

# chown nginx:nginx /usr/share/nginx/html/hls/work.mp4

# ls -laht
total 54M
drwxr-xr-x. 3 root  root  150 Jul 15 08:16 ..
drwxr-xr-x. 2 root  root   93 Jul 15 08:06 .
-rw-rw-r--. 1 nginx nginx 14M Jul 15 08:04 work.mp4

//restart nginx service
//still the permission issue persist for mp4, then selnux must be disabled
//after reboot
//check VLC, it's working fine

//now create a webpage.html inside /usr/share/nginx/html/

# cat page.html 
<!DOCTYPE html>
<html>
<head>
  <title>Video Player</title>
</head>
<body>
  <video width="800" height="450" controls>
    <source src="http://xx.xx.xx/hls/work.mp4" type="video/mp4">
   this is boobalan test site
  </video>
</body>
</html>
 

//now the video successfully playing






Post a Comment

0 Comments