直播大火，HTML5直播技術你知道嗎？H5直播方案分析講解
2017年視訊直播可謂是大火，各種視訊直播平臺陸續登場，H5直播也逐漸成熟，今天就來講解H5視訊直播可行性方案的分析。
目前 WEB 上主流的視訊直播方案有 HLS 和 RTMP，移動 WEB 端目前以 HLS 為主（HLS存在延遲性問題，也可以藉助 video.js 採用RTMP），PC端則以 RTMP 為主實時性較好，接下來將圍繞這兩種視訊流協議來展開H5直播方案講解。
如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習
一、視訊流協議HLS與RTMP
1. HTTP Live Streaming
HTTP Live Streaming（簡稱 HLS）是一個基於 HTTP 的視訊流協議，由 Apple 公司實現，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支援 HLS，高版本 Android 也增加了對 HLS 的支援。一些常見的客戶端如：MPlayerX、VLC 也都支援 HLS 協議。
HLS 協議基於 HTTP，而一個提供 HLS 的伺服器需要做兩件事：
-
編碼：以 H.263 格式對影象進行編碼，以 MP3 或者 HE-AAC 對聲音進行編碼，最終打包到 MPEG-2 TS（Transport Stream）容器之中；
-
分割：把編碼好的 TS 檔案等長切分成字尾為 ts 的小檔案，並生成一個 .m3u8 的純文字索引檔案；
瀏覽器使用的是 m3u8 檔案。m3u8 跟音訊列表格式 m3u 很像，可以簡單的認為 m3u8 就是包含多個 ts 檔案的播放列表。播放器按順序逐個播放，全部放完再請求一下 m3u8 檔案，獲得包含最新 ts 檔案的播放列表繼續播，周而復始。整個直播過程就是依靠一個不斷更新的 m3u8 和一堆小的 ts 檔案組成，m3u8 必須動態更新，ts 可以走
可以看到 HLS 協議本質還是一個個的 HTTP 請求 / 響應，所以適應性很好，不會受到防火牆影響。但它也有一個致命的弱點：延遲現象非常明顯。如果每個 ts 按照 5 秒來切分，一個 m3u8 放 6 個 ts 索引，那麼至少就會帶來 30 秒的延遲。如果減少每個 ts 的長度，減少 m3u8 中的索引數，延時確實會減少，但會帶來更頻繁的緩衝，對服務端的請求壓力也會成倍增加。所以只能根據實際情況找到一個折中的點。
對於支援 HLS 的瀏覽器來說，直接這樣寫就能播放了：
注意：HLS 在 PC 端僅支援safari瀏覽器，類似chrome瀏覽器使用HTML5 video標籤無法播放 m3u8 格式，可直接採用網上一些比較成熟的方案，如：sewise-player、MediaElement、videojs-contrib-hls、jwplayer。
2. Real Time Messaging Protocol
Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發的一套視訊直播協議，現在屬於 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務如 Adobe Media Server，並且在瀏覽器中只能使用 Flash 實現播放器。它的實時性非常好，延遲很小，但無法支援移動端 WEB 播放是它的硬傷。
雖然無法在iOS的H5頁面播放，但是對於iOS原生應用是可以自己寫解碼去解析的, RTMP 延遲低、實時性較好。
瀏覽器端，HTML5 video標籤無法播放 RTMP 協議的視訊，可以通過 video.js 來實現。
3. 視訊流協議HLS與RTMP對比
二、直播形式
目前直播展示形式，通常以YY直播、映客直播這種頁面居多，可以看到其結構可以分成三層：① 背景視訊層 ② 關注、評論模組 ③ 點贊動畫
而現行H5類似直播頁面，實現技術難點不大，其可以通過實現方式分為：① 底部視訊背景使用video視訊標籤實現播放 ② 關注、評論模組利用 WebScoket 來實時傳送和接收新的訊息通過DOM 和 CSS3 實現 ③ 點贊利用 CSS3 動畫
瞭解完直播形式之後，接下來整體瞭解直播流程。
三、直播整體流程
直播整體流程大致可分為：
-
直播流視訊服務端：一臺Nginx伺服器，採集視訊錄製端傳輸的視訊流(H264/ACC編碼)，由伺服器端進行解析編碼，推送RTMP/HLS格式視訊流至視訊播放端。
-
視訊播放端：可以是電腦上的播放器（QuickTime Player、VLC），手機端的native播放器，還有就是 H5 的video標籤等，目前還是以手機端的native播放器為主。
四、H5 錄製視訊
對於H5視訊錄製，可以使用強大的 webRTC （Web Real-Time Communication）是一個支援網頁瀏覽器進行實時語音對話或視訊對話的技術，缺點是隻在 PC 的 Chrome 上支援較好，移動端支援不太理想。
1. 使用 webRTC 錄製視訊基本流程
① 呼叫 window.navigator.webkitGetUserMedia 獲取使用者的PC攝像頭視訊資料。
② 將獲取到視訊流資料轉換成 window.webkitRTCPeerConnection (一種視訊流資料格式)。
③ 利用 WebScoket 將視訊流資料傳輸到服務端。
注意：雖然Google一直在推WebRTC，目前已有不少成型的產品出現，但是大部分移動端的瀏覽器還不支援 webRTC（最新iOS 10.0也不支援），所以真正的視訊錄製還是要靠客戶端（iOS,Android）來實現,效果會好一些。
2. iOS原生應用呼叫攝像頭錄製視訊流程
① 音視訊的採集，利用AVCaptureSession和AVCaptureDevice可以採集到原始的音視訊資料流。
② 對視訊進行H264編碼，對音訊進行AAC編碼，在iOS中分別有已經封裝好的編碼庫（x264編碼、faac編碼、ffmpeg編碼）來實現對音視訊的編碼。
③ 對編碼後的音、視訊資料進行組裝封包。
④ 建立RTMP連線並上推到服務端。
五、搭建Nginx+Rtmp直播流服務
1. 安裝nginx、nginx-rtmp-module
① 先clone nginx專案到本地：
brew tap homebrew/nginx
② 執行安裝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節點之前新增 rtmp 的配置內容：
② 在http中新增 hls 的配置
3. 重啟nginx服務
重啟nginx服務，瀏覽器中輸入 http://localhost:8080，是否出現歡迎介面確定nginx重啟成功。
nginx -s reload
六、直播流轉換格式、編碼推流
當伺服器端接收到採集視訊錄製端傳輸過來的視訊流時，需要對其進行解析編碼，推送RTMP/HLS格式視訊流至視訊播放端。通常使用的常見編碼庫方案，如x264編碼、faac編碼、ffmpeg編碼等。
鑑於 FFmpeg 工具集合了多種音訊、視訊格式編碼，我們可以優先選用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協議的視訊播放器）本地拉流進行演示
3.FFmpeg推流命令
① 視訊檔案進行直播
② 推流攝像頭＋桌面+麥克風錄製進行直播
七、H5 直播視訊播放
移動端iOS和 Android 都天然支援HLS協議，做好視訊採集端、視訊流推流服務之後，便可以直接在H5頁面配置 video 標籤播放直播視訊。
ps：① video標籤新增webkit-playsinline屬性（iOS支援）是保證視訊在網頁中內嵌播放。
② 針對微信瀏覽器，video標籤層級最高的問題，需要申請新增白名單。
八、總結
本文從視訊採集上傳，伺服器處理視訊推流，以及H5頁面播放直播視訊一整套流程,具體講解了直播實現原理，實現過程中會遇到很多效能優化問題。
① H5 HLS 限制必須是H264+AAC編碼。
② H5 HLS 播放卡頓問題，server 端可以做好分片策略，將 ts 檔案放在 CDN 上，前端可儘量做到 DNS 快取等。
③ H5 直播為了達到更好的實時互動，也可以採用RTMP協議，通過video.js實現播放。
最後，如果有想一起學習web前端，HTML5及JavaScript的可以來一下我的前端群733581373，好友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會準時的講一些前端的炫酷特效，及前端直播課程學習
如果想看到更加系統的文章和學習方法經驗可以關注的微訊號：‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊