直播大火，H5直播技術你知道嗎辙培？H5直播方案分析講解
2017年視頻直播可謂是大火缅叠，各種視頻直播平臺陸續(xù)登場，H5直播也逐漸成熟虏冻，今天就來講解H5視頻直播可行性方案的分析肤粱。
目前 WEB 上主流的視頻直播方案有 HLS 和 RTMP，移動 WEB 端目前以 HLS 為主（HLS存在延遲性問題厨相，也可以借助 video.js 采用RTMP）领曼，PC端則以 RTMP 為主實時性較好鸥鹉，接下來將圍繞這兩種視頻流協(xié)議來展開H5直播方案講解。
一庶骄、視頻流協(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 的服務器需要做兩件事：
編碼：以 H.263 格式對圖像進行編碼逻淌，以 MP3 或者 HE-AAC 對聲音進行編碼么伯，最終打包到 MPEG-2 TS（Transport Stream）容器之中；
分割：把編碼好的 TS 文件等長切分成后綴為 ts 的小文件卡儒，并生成一個 .m3u8 的純文本索引文件田柔；
瀏覽器使用的是 m3u8 文件。m3u8 跟音頻列表格式 m3u 很像骨望，可以簡單的認為 m3u8 就是包含多個 ts 文件的播放列表硬爆。播放器按順序逐個播放，全部放完再請求一下 m3u8 文件擎鸠，獲得包含最新 ts 文件的播放列表繼續(xù)播缀磕，周而復始。整個直播過程就是依靠一個不斷更新的 m3u8 和一堆小的 ts 文件組成糠亩，m3u8 必須動態(tài)更新虐骑，ts 可以走 CDN。一個典型的 m3u8 文件格式如下：
可以看到 HLS 協(xié)議本質還是一個個的 HTTP 請求 / 響應赎线，所以適應性很好廷没，不會受到防火墻影響。但它也有一個致命的弱點：延遲現(xiàn)象非常明顯垂寥。如果每個 ts 按照 5 秒來切分颠黎，一個 m3u8 放 6 個 ts 索引，那么至少就會帶來 30 秒的延遲滞项。如果減少每個 ts 的長度狭归，減少 m3u8 中的索引數(shù)，延時確實會減少文判，但會帶來更頻繁的緩沖过椎，對服務端的請求壓力也會成倍增加。所以只能根據(jù)實際情況找到一個折中的點戏仓。
對于支持 HLS 的瀏覽器來說疚宇，直接這樣寫就能播放了：
注意：HLS 在 PC 端僅支持safari瀏覽器亡鼠，類似chrome瀏覽器使用HTML5 video標簽無法播放 m3u8 格式，可直接采用網(wǎng)上一些比較成熟的方案敷待，如：sewise-player间涵、MediaElement、videojs-contrib-hls榜揖、jwplayer勾哩。
2. Real Time Messaging Protocol
Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發(fā)的一套視頻直播協(xié)議，現(xiàn)在屬于 Adobe举哟。這套方案需要搭建專門的 RTMP 流媒體服務如 Adobe Media Server思劳，并且在瀏覽器中只能使用 Flash 實現(xiàn)播放器。它的實時性非常好炎滞，延遲很小敢艰，但無法支持移動端 WEB 播放是它的硬傷诬乞。
雖然無法在iOS的H5頁面播放册赛，但是對于iOS原生應用是可以自己寫解碼去解析的, RTMP 延遲低、實時性較好震嫉。
瀏覽器端森瘪，HTML5 video標簽無法播放 RTMP 協(xié)議的視頻，可以通過 video.js 來實現(xiàn)票堵。
3. 視頻流協(xié)議HLS與RTMP對比
二扼睬、直播形式
目前直播展示形式，通常以YY直播悴势、映客直播這種頁面居多窗宇，可以看到其結構可以分成三層：① 背景視頻層 ② 關注、評論模塊 ③ 點贊動畫
而現(xiàn)行H5類似直播頁面特纤，實現(xiàn)技術難點不大军俊，其可以通過實現(xiàn)方式分為：① 底部視頻背景使用video視頻標簽實現(xiàn)播放 ② 關注、評論模塊利用 WebScoket 來實時發(fā)送和接收新的消息通過DOM 和 CSS3 實現(xiàn) ③ 點贊利用 CSS3 動畫
了解完直播形式之后捧存，接下來整體了解直播流程粪躬。
三、直播整體流程
直播整體流程大致可分為：
視頻采集端：可以是電腦上的音視頻輸入設備昔穴、或手機端的攝像頭镰官、或麥克風，目前以移動端手機視頻為主吗货。
直播流視頻服務端：一臺Nginx服務器泳唠，采集視頻錄制端傳輸?shù)囊曨l流(H264/ACC編碼)，由服務器端進行解析編碼宙搬，推送RTMP/HLS格式視頻流至視頻播放端笨腥。
視頻播放端：可以是電腦上的播放器（QuickTime Player孙援、VLC），手機端的native播放器扇雕，還有就是 H5 的video標簽等拓售，目前還是以手機端的native播放器為主。
四镶奉、H5 錄制視頻
對于H5視頻錄制础淤，可以使用強大的 webRTC （Web Real-Time Communication）是一個支持網(wǎng)頁瀏覽器進行實時語音對話或視頻對話的技術，缺點是只在 PC 的 Chrome 上支持較好哨苛，移動端支持不太理想鸽凶。
1. 使用 webRTC 錄制視頻基本流程
① 調用 window.navigator.webkitGetUserMedia() 獲取用戶的PC攝像頭視頻數(shù)據(jù)。
② 將獲取到視頻流數(shù)據(jù)轉換成 window.webkitRTCPeerConnection (一種視頻流數(shù)據(jù)格式)建峭。
③ 利用 WebScoket 將視頻流數(shù)據(jù)傳輸?shù)椒斩恕?/p>
注意：雖然Google一直在推WebRTC玻侥，目前已有不少成型的產品出現(xiàn)，但是大部分移動端的瀏覽器還不支持 webRTC（最新iOS 10.0也不支持）亿蒸，所以真正的視頻錄制還是要靠客戶端（iOS,Android）來實現(xiàn),效果會好一些凑兰。
2. iOS原生應用調用攝像頭錄制視頻流程
① 音視頻的采集，利用AVCaptureSession和AVCaptureDevice可以采集到原始的音視頻數(shù)據(jù)流边锁。
② 對視頻進行H264編碼姑食，對音頻進行AAC編碼，在iOS中分別有已經封裝好的編碼庫（x264編碼茅坛、faac編碼音半、ffmpeg編碼）來實現(xiàn)對音視頻的編碼。
③ 對編碼后的音贡蓖、視頻數(shù)據(jù)進行組裝封包曹鸠。
④ 建立RTMP連接并上推到服務端。
五斥铺、搭建Nginx+Rtmp直播流服務
1. 安裝nginx彻桃、nginx-rtmp-module
① 先clone nginx項目到本地：
brew?tap homebrew/nginx
② 執(zhí)行安裝nginx-rtmp-module
brew install nginx-full --with-rtmp-module
2. nginx.conf配置文件，配置RTMP仅父、HLS
查找到nginx.conf配置文件（路徑/usr/local/etc/nginx/nginx.conf）叛薯，配置RTMP、HLS笙纤。
① 在http節(jié)點之前添加 rtmp 的配置內容：
② 在http中添加 hls 的配置
3. 重啟nginx服務
重啟nginx服務耗溜，瀏覽器中輸入 http://localhost:8080，是否出現(xiàn)歡迎界面確定nginx重啟成功省容。
nginx -s reload
六抖拴、直播流轉換格式、編碼推流
當服務器端接收到采集視頻錄制端傳輸過來的視頻流時，需要對其進行解析編碼阿宅，推送RTMP/HLS格式視頻流至視頻播放端候衍。通常使用的常見編碼庫方案，如x264編碼洒放、faac編碼蛉鹿、ffmpeg編碼等。
鑒于 FFmpeg 工具集合了多種音頻往湿、視頻格式編碼妖异，我們可以優(yōu)先選用FFmpeg進行轉換格式、編碼推流领追。
1.安裝 FFmpeg 工具
brew install?ffmpeg
2.推流MP4文件
視頻文件地址：/Users/gao/Desktop/video/test.mp4
推流拉流地址：rtmp://localhost:1935/rtmplive/home他膳，rtmp://localhost:1935/rtmplive/home
注意： 當我們進行推流之后，可以安裝VLC绒窑、ffplay（支持rtmp協(xié)議的視頻播放器）本地拉流進行演示
3.FFmpeg推流命令
① 視頻文件進行直播
② 推流攝像頭＋桌面+麥克風錄制進行直播
七棕孙、H5 直播視頻播放
移動端iOS和 Android 都天然支持HLS協(xié)議，做好視頻采集端些膨、視頻流推流服務之后蟀俊，便可以直接在H5頁面配置 video 標簽播放直播視頻。
ps：① video標簽添加webkit-playsinline屬性（iOS支持）是保證視頻在網(wǎng)頁中內嵌播放傀蓉。
② 針對微信瀏覽器欧漱，video標簽層級最高的問題职抡，需要申請?zhí)砑影酌麊巍?/p>
八葬燎、總結
本文從視頻采集上傳，服務器處理視頻推流缚甩，以及H5頁面播放直播視頻一整套流程,具體講解了直播實現(xiàn)原理谱净，實現(xiàn)過程中會遇到很多性能優(yōu)化問題。
① H5 HLS 限制必須是H264+AAC編碼擅威。
② H5 HLS 播放卡頓問題壕探，server 端可以做好分片策略，將 ts 文件放在 CDN 上郊丛，前端可盡量做到 DNS 緩存等李请。
③ H5 直播為了達到更好的實時互動，也可以采用RTMP協(xié)議厉熟，通過video.js實現(xiàn)播放导盅。
喜歡別忘了點贊關注+轉發(fā)哦！
對于H5直播你有什么新的看法嗎揍瑟？歡迎在下面留言哦白翻，寫得不好的地方也歡迎大家吐槽
