Live streaming link in html5 not working....

I am on centos 7 cwp

I have installed nginx RTMP.

Added rtmp://serverlink:1935/stream in OBS studio.

I am trying HLS

In mnt/hls, test.m3u8 and other .ts files getting generated.

But when I am trying to live stream them in html5, it is not loading.

Codes are as follows...

etc/nginx/nginx.config is :

Code: [Select]

user nobody;
worker_processes auto;
#worker_rlimit_nofile    65535;
error_log               /var/log/nginx/error.log crit;
pid                     /var/run/nginx.pid;

events {
worker_connections  1024;
use                 epoll;
multi_accept        on;

}
http {
sendfile on;
tcp_nopush on;
tcp_nodelay on;
client_header_timeout 3m;
client_body_timeout 3m;
client_max_body_size 256m;
client_header_buffer_size 4k;
client_body_buffer_size 256k;
large_client_header_buffers 4 32k;
send_timeout 3m;
keepalive_timeout 60 60;
reset_timedout_connection       on;
server_names_hash_max_size 1024;
server_names_hash_bucket_size 1024;
ignore_invalid_headers on;
connection_pool_size 256;
request_pool_size 4k;
output_buffers 4 32k;
postpone_output 1460;

include mime.types;
default_type application/octet-stream;

# Compression gzip
gzip on;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
gzip_proxied any;
gzip_min_length 512;
gzip_comp_level 6;
gzip_buffers 8 64k;
gzip_types text/plain text/xml text/css text/js application/x-javascript application/xml image/png image/x-icon image/gif image/jpeg image/svg+xml application/xml+rss text/javascript application/atom+xml application/javascript application/json application/x-font-ttf font/opentype;

# Proxy settings
proxy_redirect      off;
proxy_set_header    Host            $host;
proxy_set_header    X-Real-IP       $remote_addr;
proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass_header   Set-Cookie;
proxy_connect_timeout   300;
proxy_send_timeout  300;
proxy_read_timeout  300;
proxy_buffers       32 4k;
proxy_cache_path /var/cache/nginx levels=2 keys_zone=cache:10m inactive=60m max_size=512m;
proxy_cache_key "$host$request_uri $cookie_user";
proxy_temp_path  /var/cache/nginx/temp;
proxy_ignore_headers Expires Cache-Control;
proxy_cache_use_stale error timeout invalid_header http_502;
proxy_cache_valid any 1d;

open_file_cache_valid 120s;
open_file_cache_min_uses 2;
open_file_cache_errors off;
open_file_cache max=5000 inactive=30s;
open_log_file_cache max=1024 inactive=30s min_uses=2;

# SSL Settings
ssl_session_cache   shared:SSL:10m;
ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers        "EECDH+ECDSA+AESGCM:EECDH+aRSA+AESGCM:EECDH+ECDSA+SHA384:EECDH+ECDSA+SHA256:EECDH+aRSA+SHA384:EECDH+aRSA+SHA256:EECDH+aRSA!RC4:EECDH:!RC4:!aNULL:!eNULL:!LOW:!3DES:!MD5:!EXP:!PSK:!SRP:!DSS";

# Logs
log_format  main    '$remote_addr - $remote_user [$time_local] $request '
                '"$status" $body_bytes_sent "$http_referer" '
                '"$http_user_agent" "$http_x_forwarded_for"';
log_format  bytes   '$body_bytes_sent';
#access_log          /var/log/nginx/access.log main;
access_log off;

# Cache bypass
map $http_cookie $no_cache {
default 0;
~SESS 1;
~wordpress_logged_in 1;
}

# Include additional configuration
include /etc/nginx/cloudflare.inc;
include /etc/nginx/conf.d/*.conf;



server {
        listen 8080;

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

            # CORS setup
           add_header 'Access-Control-Allow-Origin' '*';
            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 /mnt/;
        }
    }

}


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

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




Code in my html page to display live stream is :

Code: [Select]

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('https://server.xxxxxxserver.in:8080/test.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>
 

I tried following links in hls.loadSource

 - https://server.xxxxxxserver.in:8080/test.m3u8
 - https://server.xxxxxxserver.in:8080/stream/test.m3u8
 - https://server.xxxxxxserver.in:8080/hls/test.m3u8
 - https://server.xxxxxxserver.in:8080/mnt/hls/test.m3u8
 - https://server.xxxxxxserver.in/test.m3u8
 - https://server.xxxxxxserver.in/stream/test.m3u8
 - https://server.xxxxxxserver.in/hls/test.m3u8
 - https://server.xxxxxxserver.in/mnt/hls/test.m3u8


also tried video.js and other few video player plugins.... but no success

It has been some time since I built a live streaming site though I still have it floating around a dev server somewhere.

the correct hls.loadSource to use would be: https://server.xxxxxxserver.in:8080/hls/test.m3u8

I'v always had issues using https on my test site, but http works just fine on it so maybe try that? Also make sure port 8080 is open through the firewall.