關於H5直播原始碼的技術掃盲

到目前，H5似乎已經成為品牌宣傳最重要的表現方式。H5技術開發簡單，研發週期短，且成本低廉。尤其強化了web網頁的表現效能，透過H5技術搭建的直播系統不僅能夠在網頁實現高畫質流暢播放，還能加入很多的互動功能。下面，我們就針對H5直播原始碼做一些技術掃盲。

一、H5直播原始碼中的關鍵技術點：WebRTC

想要搭建H5直播系統，WebRTC必不可少。WebRTC即網頁即時通訊，是一個支援網頁瀏覽器進行實時語音對話或影片對話的開源API。WebRTC中包括了音訊引擎，影片引擎、傳輸引擎等，瀏覽器把最底層的音影片渲染和網路傳輸的底層能力開放給開發者，開發者可以根據自己的需求選擇是否進行過載。

音訊引擎中，包括了兩個編解碼器：iSAC和iLBC，前者針對寬頻和超寬頻的音訊編解碼，後者針對窄帶音訊編解碼。音訊引擎還包括了音訊抖動緩衝，回聲消除和噪音抑制模組等。

影片引擎中，包括了VP8和VP9的影片編解碼器，甚至是即將到來的AV1，影片引擎還包括影片抖動緩衝和影像質量增強等模組。

傳輸引擎中，WebRTC使用的是SRTP安全實時傳輸協議，採取的是P2P的通訊方式，沒有媒體伺服器等後端的實現。

這些預定的引擎配置為H5直播原始碼提供了強悍的技術基礎。不過，WebRTC只是應用於影片錄製，影片播放還得需要HLS的支援。

二、什麼是HLS協議？.m3u8是幹啥用的？這倆有什麼聯絡？

HLS是一種常見的影片播放協議。簡單通俗點來講，就是把整個影片流分成一小塊一小塊的基於HTTP的檔案來下載播放。通常，在程式碼上說明HLS協議時，會引入一個用於H5播放影片的.m3u8檔案，這個檔案就是基於HLS協議，存放影片流後設資料的檔案。每一個.m3u8檔案，分別對應若干個ts檔案，這些ts檔案才是真正存放影片的資料，m3u8檔案只是存放了一些ts檔案的配置資訊和相關路徑，當影片播放時，.m3u8是動態改變的，video標籤會解析這個檔案，並找到對應的ts檔案來播放，所以一般為了加快速度，.m3u8放在web伺服器上，ts檔案放在cdn上。

那麼，HLS協議的請求流程是：

1、http請求.m3u8的url。

2、服務端返回一個.m3u8的播放列表，這個播放列表是實時更新的，一般一次給出3段資料的url。

3、客戶端解析.m3u8的播放列表，再按序請求每一段的url，從而獲取ts資料流。

三、直播延遲往往不可避免

前面提到，HLS協議是將直播流分成一段一段的影片去下載播放的。假設列表裡面的包含5個TS檔案，每個TS檔案包含5秒的影片內容，那麼整體的延遲就是25秒。因為當使用者看到這些影片時，主播已經將影片錄製好上傳了，所以產生了延遲。當然可以縮短列表的長度和單個TS檔案的大小來降低延遲，極致來說可以所見列表長度為1，並且TS的時長為1s。但如果這多就會造成請求次數增加，增大伺服器壓力，當網速慢時會造成更多的緩衝，所以一般推薦的ts時長為10s，這樣大概有30s的延遲。

以上就是關於H5直播原始碼的一些技術掃盲點。