工作,生活,休閒,專業,分享,記錄

App Insights JS

Total Pageviews

April 3, 2017

RTMP直播服務(2/3) : 設定 NGINX HLS 直播服務



影音串流的 Protocol 有很多種,RTMP 和 HLS streaming 的方式都是直播常用的串流方式,這篇文章主要介紹的主題是:使用 NGINX 來播放 HLS 的直播服務。
為什麼要開啟 HLS 服務呢?因為 RTMP streaming 必須要針對播放端客製化 Player(目前 support RTMP streaming 的 Player 非常少,必須要自行客製化 Client 端的播放器),但是 HLS streaming 因為跑的是 HTTP 的 protocol,所以穿透性強,且 Client support 程度高,不論是電腦或行動裝置,簡單地透過 HTML5 就可以在網頁上呈現 HLS streaming 的播放,在 Client Portal 的整合和客製化上非常的簡單和容易。
PS:這邊就不介紹 RTMP 和 HLS 的 protocol 技術內容。

在我們完成安裝 NGINX RTMP 直播服務之後,我們想要接著在 NGINX 的直播串流中提供 HLS 的播放服務,首先必須要修改 NGINX 的設定,然後重新啟動 NGINX 伺服器,就可以接著測試 HLS streaming 播放直播服務了。

修改 NGINX 設定檔:

接下來要設定 NGINX HLS streaming,這必須要修改 conf 的設定,把 HLS streaming 所需要的設定加入 nginx.conf 檔案,然後再重新啟用設定值。

設定檔 nginx.conf 需要修改的部分有兩個部分:RTMP 設定 and HTTP 設定
# RTMP configuration
rtmp {
    server {
        listen 1935; # Listen on standard RTMP port
        chunk_size 4096;
        allow play all;

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

# HTTP configuration
server {
    listen 80;
    server_name localhost;

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

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

        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        add_header 'Access-Control-Allow-Headers' 'Range';
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;

        types {
            application/dash+xml mpd;
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }
        root /tmp;
        expires -1;
    }
}

整個 nginx.conf 檔案內容如下:
worker_processes  auto;
events {
    worker_connections  1024;
}

# HTTP configuration
http {
    sendfile off;
    tcp_nopush on;
    directio 512;
    default_type application/octet-stream;

    server {
        listen 80;
        server_name localhost;

        location / {
            root /tmp/html;
            index index.html index.htm;
        }

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

            add_header 'Access-Control-Allow-Origin' '*' always;
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            add_header 'Access-Control-Allow-Headers' 'Range';
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;

            types {
                application/dash+xml mpd;
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root /tmp/html;
            expires -1;
        }

        error_page  500 502 503 504     /50x.html;
        location = /50x.html {
            root /tmp/html;
        }
    }
}

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

        application demo {
            live on;
            record off;
        }

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

修改完畢 nginx.conf 之後,可以使用下列指令來驗證 conf 檔案是否正確
$ sudo /usr/local/nginx/sbin/nginx -t


接著重新啟動 NGINX 伺服器
使用 reload 的方式:
$ sudo /usr/local/nginx/sbin/nginx –s reload

或是重新啟動 daemon:
$ sudo /usr/local/nginx/sbin/nginx –s stop
$ sudo /usr/local/nginx/sbin/nginx

設定完成,我們已經成功建立一個叫做 show 的 Live channel for HLS streaming,接下來我們就來測試看看是否成功。


測試 NGINX HLS streaming:

l   直播串流推流:
一樣使用 OBS 做直播影片的推流,設定上需要注意幾點,依照上面所設定的 nginx.conf,我們開啟了一個推流開口 (show) 做 RTMP 推流的接口,然後設定了 HLS Live streaming 位置存放 m3u8 所需要的檔案。
推流網址為 rtmp://<YOUR SERVER IP>/show/<STREAM_NAME>
HLS Live 位置為 /tmp/html/hls
(因為 /tmp/html 為 HTTP 的 root,所以到時候播放用的 URL 會是在 hls 目錄之中)

l   直播影片播放:
使用 VLC 來做播放,使用 Open Network 輸入 URL 如下:
http://<YOUR SERVER IP>/hls/<STREAM_NAME>.m3u8
實際連接播放畫面如下:

PS:實際測試結果,Latency 為 30 秒。

在我們完成 NGINX 的 HLS streaming 環境設定之後,接下來就會想要把 NGINX HLS streaming 串接到 CDN,提供更為穩定的串流頻寬給使用者,提升直播串流服務的影片品質。



1 comments:

Unknown said...
This comment has been removed by the author.