H5直播開發(fā)：直播類H5如何實現(xiàn)，開發(fā)方案是什么

直播類H5開發(fā)目前是非?；鸬?，很多商家都急切的蹭一波熱度。

目前WEB上主流的H5視頻直播方案有HLS和RTMP移動WEB端目前以HLS為主（HLS存在延遲性問題，也可以借助video.js采用RTMP），PC端則以RTMP為主實時性較好，接下來將圍繞這兩種視頻流協(xié)議來展開H5直播實現(xiàn)方案解說。

- H5直播技術(shù)保障

采用動態(tài)云服務(wù)器擴容技術(shù)，可以接受大流量高并觀看，并保障觀看質(zhì)量，同時節(jié)約成本。

- H5直播畫面質(zhì)量

在上行網(wǎng)絡(luò)足夠保障清晰度傳輸?shù)那疤嵯?，平臺不設(shè)清晰度限制，您可以根據(jù)需要自己設(shè)定畫面的清晰格式。通過平臺低損耗轉(zhuǎn)、解碼傳輸，保障畫面質(zhì)量。

- 高并發(fā)支撐

不需要擔心觀看人數(shù)的太多會擠爆服務(wù)器，動態(tài)擴容技術(shù)讓可以保障觀看的同時，節(jié)省不必要的成本支出。

- CDN加速

使用阿里云直播CDN服務(wù)，將視頻內(nèi)容分發(fā)給全國500+節(jié)點，縮短用戶收看延時，提高視頻響應(yīng)速度。

- 動態(tài)負載

全部采用阿里云服務(wù)器，運用動態(tài)負載均衡技術(shù)，提供短時間服務(wù)器擴容能力，在出現(xiàn)高峰訪問時，可以從容應(yīng)對。

一、視頻流協(xié)議HLS與RTMP

1. HTTP Live Streaming

HTTP Live Streaming（簡稱 HLS）是一個基于 HTTP 的視頻流協(xié)議，由 Apple 公司實現(xiàn)，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari都能很好的支持 HLS，高版本 Android 也增加了對 HLS 的支持。一些常見的客戶端如：MPlayerX、VLC 也都支持 HLS 協(xié)議。

HLS 協(xié)議基于 HTTP，而一個提供 HLS 的服務(wù)器需要做兩件事：

編碼：以 H.263 格式對圖像進行編碼，以 MP3 或者 HE-AAC 對聲音進行編碼，最終打包到 MPEG-2 TS（Transport Stream）容器之中；

分割：把編碼好的 TS 文件等長切分成后綴為 ts 的小文件，并生成一個 .m3u8 的純文本索引文件；

瀏覽器使用的是 m3u8 文件。m3u8 跟音頻列表格式 m3u 很像，可以簡單的認為 m3u8 就是包含多個 ts 文件的播放列表。播放器按順序逐個播放，全部放完再請求一下 m3u8 文件，獲得包含最新 ts 文件的播放列表繼續(xù)播，周而復(fù)始。整個直播過程就是依靠一個不斷更新的 m3u8 和一堆小的 ts 文件組成，m3u8 必須動態(tài)更新，ts 可以走 CDN。

HLS 協(xié)議本質(zhì)還是一個個的 HTTP 請求 / 響應(yīng)，所以適應(yīng)性很好，不會受到防火墻影響。但它也有一個致命的弱點：延遲現(xiàn)象非常明顯。如果每個 ts 按照 5 秒來切分，一個 m3u8 放 6 個 ts 索引，那么至少就會帶來 30 秒的延遲。如果減少每個 ts 的長度，減少 m3u8 中的索引數(shù)，延時確實會減少，但會帶來更頻繁的緩沖，對服務(wù)端的請求壓力也會成倍增加。所以只能根據(jù)實際情況找到一個折中的點。

2. Real Time Messaging Protocol

Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發(fā)的一套視頻直播協(xié)議，現(xiàn)在屬于 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務(wù)如 Adobe Media Server，并且在瀏覽器中只能使用 Flash 實現(xiàn)播放器。它的實時性非常好，延遲很小，但無法支持移動端 WEB 播放是它的硬傷。

雖然無法在iOS的H5頁面播放，但是對于iOS原生應(yīng)用是可以自己寫解碼去解析的, RTMP 延遲低、實時性較好。

瀏覽器端，HTML5 video，標簽無法播放 RTMP 協(xié)議的視頻，可以通過 video.js 來實現(xiàn)。

3. 視頻流協(xié)議HLS與RTMP對比

二、H5直播形式

目前直播界面展示形式，頁面結(jié)構(gòu)通常可以看到其分成三層：

1. 背景視頻層

2. 關(guān)注、評論模塊

3. 點贊動畫

而現(xiàn)行H5直播頁面，其可以通過實現(xiàn)方式分為：

1. 底部視頻背景使用video視頻標簽實現(xiàn)播放。

2. 關(guān)注、評論模塊利用 WebScoket 來實時發(fā)送和接收新的消息通過DOM 和 CSS3 實現(xiàn)。

3. 點贊利用 CSS3 動畫。

了解完直播形式之后，接下來整體了解直播流程。

三、H5直播整體流程

直播整體流程大致可分為三大流程：

視頻采集端：可以是電腦上的音視頻輸入設(shè)備、或手機端的攝像頭、或麥克風，目前以移動端手機視頻為主。

直播流視頻服務(wù)端：一臺Nginx服務(wù)器，采集視頻錄制端傳輸?shù)囊曨l流(H264/ACC編碼)，由服務(wù)器端進行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。

視頻播放端：可以是電腦上的播放器（QuickTime Player、VLC），手機端的native播放器，還有就是 H5 的video標簽等，目前還是以手機端的native播放器為主。

四、H5錄制視頻

對于H5視頻錄制，可以使用強大的 webRTC （Web Real-Time Communication）是一個支持網(wǎng)頁瀏覽器進行實時語音對話或視頻對話的技術(shù)，缺點是只在 PC 的 Chrome 上支持較好，移動端支持不太理想。

雖然Google一直在推WebRTC，目前已有不少成型的產(chǎn)品出現(xiàn)，但是大部分移動端的瀏覽器還不支持 webRTC（最新iOS 10.0也不支持），所以真正的視頻錄制還是要靠客戶端（iOS,Android）來實現(xiàn),效果會好一些。

所以主播端建議用iOS原生應(yīng)用調(diào)用攝像頭錄制視頻，其流程大致為：

1. 音視頻的采集，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音視頻數(shù)據(jù)流。

2. 對視頻進行H264編碼，對音頻進行AAC編碼，在iOS中分別有已經(jīng)封裝好的編碼庫（x264編碼、faac編碼、ffmpeg編碼）來實現(xiàn)對音視頻的編碼。

3. 對編碼后的音、視頻數(shù)據(jù)進行組裝封包。

4. 建立RTMP連接并上推到服務(wù)端。

五、服務(wù)器端搭建Nginx+Rtmp直播流服務(wù)

六、直播流轉(zhuǎn)換格式、編碼推流

當服務(wù)器端接收到采集視頻錄制端傳輸過來的視頻流時，需要對其進行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。通常使用的常見編碼庫方案，如x264編碼、faac編碼、ffmpeg編碼等。

鑒于 FFmpeg 工具集合了多種音頻、視頻格式編碼，我們可以優(yōu)先選用FFmpeg進行轉(zhuǎn)換格式、編碼推流。

注意：當我們進行推流之后，可以安裝VLC、ffplay（支持rtmp協(xié)議的視頻播放器）本地拉流進行演示。

七、H5直播視頻播放

移動端iOS和 Android 都天然支持HLS協(xié)議，做好視頻采集端、視頻流推流服務(wù)之后，便可以直接在H5頁面配置 video 標簽播放直播視頻。

八、H5直播開發(fā)技術(shù)方案總結(jié)

本方案從視頻采集上傳，服務(wù)器處理視頻推流，以及H5頁面播放直播視頻一整套流程，具體闡述了直播實現(xiàn)原理，實現(xiàn)過程中會遇到很多性能優(yōu)化問題。

1. H5 HLS 限制必須是H264+AAC編碼。

2. H5 HLS 播放卡頓問題，server 端可以做好分片策略，將 ts 文件放在 CDN 上，前端可盡量做到 DNS 緩存等。

3. H5 直播為了達到更好的實時互動，也可以采用RTMP協(xié)議，通過video.js實現(xiàn)播放。