Web直播，你需要先知道這些

來自專欄 IMWeb前端社區17 人贊了文章

Web直播，你需要先知道這些

直播知識小科普

1. 一個典型的直播流程：錄製->編碼->網路傳輸（推流->伺服器處理->CDN分發）->解碼->播放
2. IPB：一種常用的視頻壓縮方案，用I幀表示關鍵幀，B幀表示前向差別幀，P幀表示雙向差別幀
3. GOP (Group of Pictures)：GOP 越長（I幀之間的間隔越大），B 幀所佔比例越高，編碼的率失真性能越高。雖然B幀壓縮率高，但解碼時CPU壓力會更大。
4. 音視頻直播質量好壞的主要指標：內容延時、卡頓（流暢度）、首幀時長
5. 音視頻直播需要克服的主要問題：網路環境、多人連麥、主輔路、瀏覽器兼容性、CDN支持等
6. MSE(Media Source Extensions)：W3C 標準API，解決 HTML5 的流問題（HTML5 原生僅支持播放 mp4/webm 非流格式，不支持 FLV），允許JavaScript動態構建 <video> 和 <audio> 的媒體流。可以用MediaSource.isTypeSupported() 判斷是否支持某種MINE類型。在ios Safari中不支持。

1. 文件格式/封裝格式/容器格式：一種承載視頻的格式，比如flv、avi、mpg、vob、mov、mp4等。而視頻是用什麼方式進行編解碼的，則與Codec相關。舉個栗子，MP4格式根據編解碼的不同，又分為nMP4、fMP4。nMP4是由嵌套的Boxes 組成，fMP4格式則是由一系列的片段組成，因此只有後者不需要載入整個文件進行播放。
2. Codec：多媒體數字信號編碼解碼器，能夠對音視頻進行壓縮（CO）與解壓縮( DEC ) 。CODEC技術能有效減少數字存儲佔用的空間，在計算機系統中，使用硬體完成CODEC可以節省CPU的資源，提高系統的運行效率。
3. 常用視頻編碼：MPEG、H264、RealVideo、WMV、QuickTime。。。
4. 常用音頻編碼：PCM、WAV、OGG、APE、AAC、MP3、Vorbis、Opus。。。

現有方案比較

RTMP協議

1. 基於TCP
2. adobe壟斷，國內支持度高
3. 瀏覽器端依賴Flash進行播放
4. 2~5秒的延遲

RTP協議

1. Real-time Transport Protocol，IETF於1996提出的一個標準
2. 基於UDP
3. 實時性強
4. 用於視頻監控、視頻會議、IP電話
5. CDN廠商、瀏覽器不支持

HLS 協議

1. Http Live Streaming，蘋果提出的基於HTTP的流媒體傳輸協議
2. HTML5直接支持(video)，適合APP直播，PC斷只有Safari、Edge支持
3. 必須是H264+AAC編碼
4. 因為傳輸的是切割後的音視頻片段，導致內容延時較大

flv.js

1. Bilibli開源，解析flv數據，通過MSE封裝成fMP4餵給video標籤
2. 編碼為H264+AAC
3. 使用HTTP的流式IO(fetch或stream)或WebSocket協議流式的傳輸媒體內容
4. 2~5秒的延遲，首幀比RTMP更快

WebRTC協議

1、Google力推，已成為W3C標準

2、現代瀏覽器支持趨勢，X5也支持（微信、QQ）

3、基於UDP，低延遲，弱網抗性強，比flv.js更有優勢

方案CPU佔用幀率碼率延時首幀flv.js0.430700kbit/s1.5s2sWebRTC1.930700kbit/s0.7s1.5s

4、支持Web上行能力

5、編碼為H264+OPUS

6、提供NAT穿透技術（ICE）

實際情況下，當用戶數量很大時，對推流設備的性能要求很高，複雜的許可權管理也難以實現，採用P2P的架構基本不可行。對於個別用戶提供上行流、海量用戶只進行拉流的場景，騰訊課堂實現了一種P2S的解決方案。進一步學習可閱讀jaychen的系列文章《WebRTC直播技術》。

小程序+直播

技術方案

1. 基於RTMP，官方說底層使用HTTP/2的一種內部傳輸機制，但又說是基於UDP的，這就搞不懂了。。。
2. live-pusher 和 live-player 沒有限制第三方雲服務
3. 可直接使用騰訊雲視頻直播能力，只需配置好推流url、播放url即可

推流url：

播放url：

下面是我根據官網教程搭建的一個音視頻小程序，搭建過程簡單，同一個區域網下直播體驗也很流暢（讀者也可直接搜索騰訊視頻雲小程序進行體驗）：

前端核心代碼還是相當簡潔的：

• live-pusher組件：設置好url推流地址（僅支持 flv, rtmp 格式）等參數即可，使用bindstatechange獲取播放狀態變化

• live-player組件：設置後src音視頻地址（僅支持 flv, rtmp 格式）等參數即可，使用bindstatechange獲取播放狀態變化

能否和WebRTC同時使用?

對於騰訊課堂的應用場景，老師上課推流採用的是RTMP協議，考慮到WebRTC目前只能用於PC端拉流，那麼在移動端能否讓用戶可以直接通過小程序來觀看直播課呢？我覺得在技術層面可行的，接入小程序直播對於擴大平台影響力、社交圈分享、提高收費轉化都會產生很大的幫助。難點在於複雜的許可權控制、多路音視頻流、多人連麥等問題，比如許可權控制只能單獨放到房間控制邏輯中完成，而音視頻流本身缺乏這種校驗；主輔路的切換還需要添加單獨的信令控制，同時在小程序中加入相應的判斷邏輯。

參考文章

1. HTTP 協議入門
2. 使用flv.js做直播
3. 面向未來的直播技術-WebRTC【視頻、PPT】
4. 小程序音視頻能力技術負責人解讀「小程序直播」
5. 小程序開發簡易教程
6. 小程序音視頻解讀

推薦閱讀：