從零開始，快速搭建自己的串流直播系統 (下)
上篇『從零開始快速搭建自己的串流直播系統 (上)』，討論了如何一步步的建立直播伺服器端，本篇則是介紹收看端如何在不同的三個平台上觀看 HLS 直播串流，這當中使用了現成的範例以簡化教學之複雜度。
HLS 直播收看端
目前已經有相當多現成的桌面播放器程式可用來播放 HLS 直播串流，例如：VLC 或是 ffplay；但是實務上的應用可能會有需要在 web 瀏覽器或者行動平台上(iOS/Android)播放的需求。所以接下來將以這三個平台的示範程式來展示如何如同桌面播放器一般地在各個平台上播放 HLS 串流。首先請先準備好 nginx-rtmp-hls-demo[2] 範例程式，下載後可以看到相對應的各個收看平台的資料夾： web， ios 和 android ， 然後接下來我們將逐一檢視如何在各個平台上建制範例程式以及實際的執行結果。
| # git clone https://github.com/jasonchuang/nginx-rtmp-hls-demo |
Web HLS Player
以 Safari 瀏覽器為例，我們可以直接使用 HTML 5 的 Video tag 就可以開啟網頁直接來收看 HLS 直播串流，我們可以從 web/player_hls.html 的原始檔案看出短短幾行 Video tag 的使用方式。然後該檔案是我們在伺服器端安裝流程的時候順便也將他複製到 nginx html 資料夾下，以提供使用者後續可以直接使用網頁打開該 HLS 串流網頁：
| sudo cp web/player_hls.html /usr/local/nginx/html/ |
所以一般的使用者只需要於瀏覽器上輸入 http://yourserverip/player_hls.html，就可以在 Safari 上透過 HLS 協定來收看直播串流。這邊僅以支援 HLS 最好的 Safari 為例，可以很簡單的僅使用 HTML5 的 Video tag 就足以使用網頁來收看 HLS 直播串流，web 前端不需要太多的 coding 修改。這邊要注意的是，如果需要支援較多種類瀏覽器的話，需要另行研究其他的播放器函式庫。
iOS HLS Player
接下來要在 iOS 平台上播放 HLS 直播串流則是相對簡單，因為 HLS 串流協定正是 Apple 所提出，所以不管是瀏覽器還是 iOS 平台的 API (AVPlayer/AVPlayerItem ) 支援可以說是相當完整。我們可以直接使用 Apple 官方所提供的 HLS 播放程式範例 [3]，首先啟動 Xcode 的指令：
| # cd ios
# open HLSCatalog.xcodeproj |
這邊還需要修改兩個小地方，即可馬上用來收看我們所自建的 HLS 直播串流：
- 允許使用 HTTP 傳輸：由於 Apple 已經全面強制使用 HTTPS 協定，所以預設會不允許使用 HTTP 傳輸，但是這邊為了實驗目的，可以手動將 HTTP 選項打開：打開
HLSCatalog/Info.plist -> App Transport Security Settings -> Allow Arbitrary Loads to -> YES
- 替換 HLSCatalog/Streams.plist 檔案內 name key 為 Basic Stream 的 playlist_url 內容為你自己的目標 m3u8 URL：http://yourserverip/hls/index.m3u8
實際的執行結果如下圖 (Basic Stream)：
Android HLS Player
至於要在 Android 平台上觀看 HLS 直播串流的話，老舊的 MediaPlayer API 並不能滿足我們的需求，幸好一直以來 google 官方有在維護一通用型播放器 ExoPlayer [4]，所以這邊我們可以直接使用 ExoPlayer 的官方 deom 範例來播放特定的 HLS 串流，只需要修改/新增 demo 範例的 media.exolist.json 檔案，加上自己的目標 m3u8 URL。實際使用 gradle 來建置與安裝 ExoPlayer demo 程式的操作如下：
| # cd android
# ./gradlew installNoExtensionsDebug |
最後的實際執行截圖如下 (myhlsdemo)：
小結
本文示範了如何利用各種現有 API 與 open-source 之資源以達成在不同三個平台上觀看 HLS 直播串流之目標。在搭配上篇文章之後，相信大家對於整個直播系統之架構、伺服器端以及收看端都會有個大概的理解，這對於大家之後不管要往伺服器或是收看端來繼續鑽研進階的技術應用相信都是相當有幫助的。
參考資料