I am using NGINX RTMP HLS with OBS Studio

When I am starting live stream, on my server, in mnt/hls folder, .ts and test.m3u8 files are getting created. But when I am trying too play that stream in html5 with hls.js, No video is visible. (Blank Video Screen shown)

Tested on https://castr.io/hlsplayer/? but, Network Error While Downloading is seen

Tried adding .htaccess in server root and in hls folder with Header set Access-Control-Allow-Origin "*"


My nginx.conf file is as follows :


user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/50-mod-http-geoip.conf;
include /etc/nginx/modules-enabled/50-mod-http-inage-filter.conf;
include /etc/nginx/modules-enabled/50-mod-http-xslt-filter.conf;
include /etc/nginx/modules-enabled/50-mod-mail.conf;
include /etc/nginx/modules-enabled/50-mod-rtmp.conf;
include /etc/nginx/modules-enabled/50-mod-stream.conf;

events {
worker_connections 768;
# multi_accept on;
}

http {

##
# Basic Settings
##

sendfile on;
#tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;

# server_names_hash_bucket_size 64;
# server_name_in_redirect off;

include /etc/nginx/mime.types;
#default_type application/octet-stream;
server {
listen 8080;
location /hls/ {
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias /tmp;
add_header Cache-Control no-cache;
add_header 'Access-Control-Allow-Origin' '*';
}

}
##
# SSL Settings
##

ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;

##
# Logging Settings
##

access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;

##
# Gzip Settings
##

gzip on;

# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

##
# Virtual Host Configs
##

#include /etc/nginx/conf.d/*.conf;
#include /etc/nginx/sites-enabled/*;
}



rtmp {
server {
listen 1935;
application show {
live on;
interleave on;

hls on;
hls_path /tmp/hls;
hls_fragment 15s;
}
}

}



HTML code:

<script src="js/hls-dist/hls.js"></script> (File Exist..tested..)

<video height="300" id="video-my" style="width:80%;" controls></video>

<script>
var video = document.getElementById('video-my');
if (Hls.isSupported()) {
var hls = new Hls({
debug: true,
});
hls.loadSource('https://myserver/hls/test.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
video.muted = true;
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://myserver/hls/test.m3u8';
video.addEventListener('canplay', function () {
video.play();
});
}
// });
</script>


I tried changing urls

https://myserver/hls/test.m3u8
https://myserver/test.m3u8
https://myserver/mnt/hls/test.m3u8