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

轉自IMWeb社區，做者：Terrance， 原文連接

1、直播知識小科普

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格式根據編解碼的不一樣，又分爲nMP四、fMP4。nMP4是由嵌套的Boxes 組成，fMP4格式則是由一系列的片斷組成，所以只有後者不須要加載整個文件進行播放。
2. Codec：多媒體數字信號編碼解碼器，可以對音視頻進行壓縮（CO）與解壓縮( DEC ) 。CODEC技術能有效減小數字存儲佔用的空間，在計算機系統中，使用硬件完成CODEC能夠節省CPU的資源，提升系統的運行效率。
3. 經常使用視頻編碼：MPEG、H26四、RealVideo、WMV、QuickTime。。。
4. 經常使用音頻編碼：PCM、WAV、OGG、APE、AAC、MP三、Vorbis、Opus。。。

2、現有方案比較

RTMP協議

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

RTP協議

1. Real-time Transpo
   rt P
   rotocol，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協議

一、Google力推，已成爲W3C標準

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

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

方案	CPU佔用	幀率	碼率	延時	首幀
flv.js	0.4	30	700kbit/s	1.5s	2s
WebRTC	1.9	30	700kbit/s	0.7s	1.5s

四、支持Web上行能力

五、編碼爲H264+OPUS

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

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

3、小程序+直播

技術方案

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

推流url：

播放url：

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

前端核心代碼仍是至關簡潔的：

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

  <view id='video-box'>  
      <live-pusher
            id="pusher"
            mode="RTC"
            url="{{pusher.push_url}}" 
            autopush='true'
            bindstatechange="onPush">
      </live-pusher>  
   </view>
  複製代碼

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

  <view id='video-box'>  
      <live-player
          wx:for="{{player}}"
          id="player_{{index}}"
          mode="RTC"
          object-fit="fillCrop"
          src="{{item.playUrl}}" 
          autoplay='true'
          bindstatechange="onPlay">
     </live-player>
   </view>
  複製代碼

可否和WebRTC同時使用?

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

4、參考文章

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