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

App Insights JS

Total Pageviews

April 3, 2017

RTMP直播服務(3/3) : 設定 NGINX HLS 串接 CDN 直播服務


影音串流為什麼要配置 CDN 呢?這個可能要大家先了解 CDN 的目的和用途,網路上已經很多介紹 CDN 的文章,在這邊我們就不再多做介紹。

前置作業:

前面我們已經設定完成 NGINX RTMP 串流服務 (push & pull),也完成 NGINX HLS streaming 服務,接下來我們可以把 NGINX HLS streaming 串接到 CDN,以便於提供大量的使用者連線頻寬的要求。
這裡選擇使用 Microsoft Azure CDN 服務來做串接,因為一般的 CDN 提供的 Protocol 都沒有包含 RTMP streamingCDN 通常 support HTTP/HTTPS protocol),所以我們無法直接串接 RTMP streaming CDN

建立 Azure CDN EndPoint




Azure CDN 建立方式為先建立一個 CDN Profile,選擇你的 Pricing type,然後在 CDN Profile 裡面再建立 CDN EndPoint
建立 CDN Profile 有三種 Pricing Type 可以選擇:Premium Verizon, Standard Verizon, Standard Akami


CDN Profile 建立成功之後,進入 CDN Overview 畫面,選擇左上角的 Add EndPoint 按鈕,新增一個要做串流的端點。


新的 EndPoint 必須要輸入你正確的 Origin hostname,也就是你的 SERVER IP,讓 CDN EndPoint 能夠認得要去哪裡抓取資料。
另外,在 Origin type 欄位,我們輸入 Custom origin,因為這邊要傳進去 CDN 的內容是 HLS Streaming


EndPoint 建立成功之後,必須要等待大約 90 分鐘的時間,等待 CDN 來將伺服器的內容部署到各地的 CDN 環境之中。



測試播放直播串流:

一樣使用 OBS 做直播上傳(必須要是 HLS 開啟的 Live 串流),推流 URL 如下:
rtmp://<YOUR SERVER IP>/show/livestream
然後使用 VLCOpen Network 開啟連結,輸入 CDN endpoint 的直播串流播放 URL,如下:
http://<YOUR EndPoint Host Name>/hls/livestream.m3u8

PS:測試播放結果,Latency 大約接近 40 秒。


另外,你也可以在你的 Portal,在自行客製化的網頁,將 CDN 播放的 URL 放在你的網頁上來做整合。
透過 HTML5 video tag 內嵌網頁的方式,播放測試如下圖:

PS:測試播放結果,Latency 大約接近 36 秒。


PS:另一次測試播放結果,Latency 大約接近 56 秒。


透過 HLS and CDN 串流之後,Latency 時間測試差距很大,原因應該是在不同的網路環境之下,不同的設備,不同的時間點,網路頻寬,網路品質,接收環境,播放設備等,在在都會影響影片播放的延遲時間,所以無法定論會延遲多久,但是,超過 30 秒以上,這一點應該是可以確定無誤的。


0 comments: