到目前，H5似乎已經(jīng)成為品牌宣傳最重要的表現(xiàn)方式。H5技術(shù)開發(fā)簡單，研發(fā)周期短，且成本低廉。尤其強(qiáng)化了web網(wǎng)頁的表現(xiàn)性能，通過H5技術(shù)搭建的直播系統(tǒng)不僅能夠在網(wǎng)頁實(shí)現(xiàn)高清流暢播放，還能加入很多的交互功能。下面，我們就針對H5直播源碼做一些技術(shù)掃盲。

一、H5直播源碼中的關(guān)鍵技術(shù)點(diǎn)：WebRTC

想要搭建H5直播系統(tǒng)，WebRTC必不可少。WebRTC即網(wǎng)頁即時(shí)通信，是一個(gè)支持網(wǎng)頁瀏覽器進(jìn)行實(shí)時(shí)語音對話或視頻對話的開源API。WebRTC中包括了音頻引擎，視頻引擎、傳輸引擎等，瀏覽器把最底層的音視頻渲染和網(wǎng)絡(luò)傳輸?shù)牡讓幽芰﹂_放給開發(fā)者，開發(fā)者可以根據(jù)自己的需求選擇是否進(jìn)行重載。

音頻引擎中，包括了兩個(gè)編解碼器：iSAC和iLBC，前者針對寬帶和超寬帶的音頻編解碼，后者針對窄帶音頻編解碼。音頻引擎還包括了音頻抖動緩沖，回聲消除和噪音抑制模塊等。

視頻引擎中，包括了VP8和VP9的視頻編解碼器，甚至是即將到來的AV1，視頻引擎還包括視頻抖動緩沖和圖像質(zhì)量增強(qiáng)等模塊。

傳輸引擎中，WebRTC使用的是SRTP安全實(shí)時(shí)傳輸協(xié)議，采取的是P2P的通信方式，沒有媒體服務(wù)器等后端的實(shí)現(xiàn)。

這些預(yù)定的引擎配置為H5直播源碼提供了強(qiáng)悍的技術(shù)基礎(chǔ)。不過，WebRTC只是應(yīng)用于視頻錄制，視頻播放還得需要HLS的支持。

二、什么是HLS協(xié)議？.m3u8是干啥用的？這倆有什么聯(lián)系？

HLS是一種常見的視頻播放協(xié)議。簡單通俗點(diǎn)來講，就是把整個(gè)視頻流分成一小塊一小塊的基于HTTP的文件來下載播放。通常，在代碼上說明HLS協(xié)議時(shí)，會引入一個(gè)用于H5播放視頻的.m3u8文件，這個(gè)文件就是基于HLS協(xié)議，存放視頻流元數(shù)據(jù)的文件。每一個(gè).m3u8文件，分別對應(yīng)若干個(gè)ts文件，這些ts文件才是真正存放視頻的數(shù)據(jù)，m3u8文件只是存放了一些ts文件的配置信息和相關(guān)路徑，當(dāng)視頻播放時(shí)，.m3u8是動態(tài)改變的，video標(biāo)簽會解析這個(gè)文件，并找到對應(yīng)的ts文件來播放，所以一般為了加快速度，.m3u8放在web服務(wù)器上，ts文件放在cdn上。

那么，HLS協(xié)議的請求流程是：

1、http請求.m3u8的url。

2、服務(wù)端返回一個(gè).m3u8的播放列表，這個(gè)播放列表是實(shí)時(shí)更新的，一般一次給出3段數(shù)據(jù)的url。

3、客戶端解析.m3u8的播放列表，再按序請求每一段的url，從而獲取ts數(shù)據(jù)流。

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

前面提到，HLS協(xié)議是將直播流分成一段一段的視頻去下載播放的。假設(shè)列表里面的包含5個(gè)TS文件，每個(gè)TS文件包含5秒的視頻內(nèi)容，那么整體的延遲就是25秒。因?yàn)楫?dāng)用戶看到這些視頻時(shí)，主播已經(jīng)將視頻錄制好上傳了，所以產(chǎn)生了延遲。當(dāng)然可以縮短列表的長度和單個(gè)TS文件的大小來降低延遲，極致來說可以所見列表長度為1，并且TS的時(shí)長為1s。但如果這多就會造成請求次數(shù)增加，增大服務(wù)器壓力，當(dāng)網(wǎng)速慢時(shí)會造成更多的緩沖，所以一般推薦的ts時(shí)長為10s，這樣大概有30s的延遲。

以上就是關(guān)于H5直播源碼的一些技術(shù)掃盲點(diǎn)。