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

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.