Author Topic: Live streaming link in html5 not working....  (Read 3430 times)

0 Members and 1 Guest are viewing this topic.

Live streaming link in html5 not working....
« on: August 21, 2021, 05:52:24 AM »
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/;

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;

# 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/;
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/ 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=""></script>
<video id="video"></video>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.on(Hls.Events.MANIFEST_PARSED,function() {;

I tried following links in hls.loadSource


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

Re: Live streaming link in html5 not working....
« Reply #1 on: August 22, 2021, 12:23:09 AM »
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:

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.
« Last Edit: August 22, 2021, 12:28:27 AM by Sloth »