WEB直播技術入門及在 Vue 中應用 video.js

簡介

視頻直播服務目前支持三種直播協議，分別是RTMP、HLS、FLV 如下內容來自阿里雲幫助中心

• RTMP 實時消息傳輸協議，由Adobe公司研發，但當前尚未收入國際標準（wikipedia）。協議比較全能，既能夠用來推送又能夠用來直播，其核心理念是將大塊的視頻幀和音頻幀「剁碎」，而後以小數據包的形式在互聯網上進行傳輸，且支持加密，所以隱私性相對比較理想，但拆包組包的過程比較複雜，因此在海量併發時容易出現一些不可預期的穩定性問題。
• HLS 協議：基於HTTP協議的流直播（wikipedia）。蘋果推出的解決方案，將視頻分紅 5-10 秒的視頻小分片，而後用 m3u8 索引表進行管理。因爲客戶端下載到的視頻都是 5-10 秒的完整數據，故視頻的流暢性很好，但也一樣引入了很大的延遲（HLS 的通常延遲在 10-30s 左右）。相比於 FLV， HLS 在iPhone 和大部分 Android 手機瀏覽器上的支持很是給力，因此經常使用於 QQ 和微信朋友圈的 URL 分享。
• HTTP-FLV 協議由 Adobe 公司主推，格式極其簡單，只是在大塊的視頻幀和音視頻頭部加入一些標記頭信息，因爲這種極致的簡潔，在延遲表現和大規模併發方面都很成熟。惟一的不足就是在手機瀏覽器上的支持很是有限，可是用做手機端 APP 直播協議卻異常合適。

下面看一下三種技術的對比：

在 Vue 中應用

咱們作的直播項目用 Vue 編寫，後臺主要輸出 RTMP 和 HLS 的直播流

播放器使用的是 vue-video-player，其實就是 video.js 集成到 vue 中

注意點

下面說說用這個插件來直播的一些坑和注意點吧：

首先，經常使用的 demo 在 vue-video-player 中官方已經給出了，按要求來就能夠，其中

1. 若是須要播放 HLS 流，須要安裝 videojs-contrib-hls 插件，非原生支持的瀏覽器，直播服務端須要開啓 CORS（後面會講到）
2. 若是須要播放 RTMP 流，須要安裝 videojs-flash 插件
3. 若是兩個流都須要播放，flash 插件須要安裝到 hls 插件以前

兼容性

下面說下這兩個直播流的兼容性問題

1. RTMP: 上面說了 RTMP 是 Adobe 公司研發的協議，目前主要的直播服務都主推 RTMP 流，它延時小，可是須要 flash 插件的支持，也須要的上面提到的安裝 videojs-flash 的插件。可是在 MAC 下對 flash 插件支持不友好，並且 MAC 下的 flash 插件 firefox 瀏覽器和 chrome 仍是兩個插件。。這就很尷尬。
2. HLS: 這個協議兼容性較好，可是最大的缺點是延遲較高，大概 20s 左右，因此只能當作備選方案。

說 HLS 兼容性較好，主要是指能夠經過 JS 讓用戶免配置（沒必要安裝flash），能夠在 caniuse 看下 HLS 的支持程度：http://caniuse.com/#search=HLS

只有 Edge 和 Safari 提供原生支持，其餘瀏覽器都須要 JS 插件支持。那是否是隻要引了 videojs-contrib-hls 就 ok 了呢？❌，這裏面還有個坑。這個坑在該插件的官方文檔有說明：

Unlike a native HLS implementation, the HLS tech has to comply with the browser's security policies. That means that all the files that make up the stream must be served from the same domain as the page hosting the video player or from a server that has appropriate CORS headers configured. Easy instructions are available for popular webservers and most CDNs should have no trouble turning CORS on for your account.

簡單的意思就是：除了原生支持 HLS 的瀏覽器，其餘瀏覽器要想播 HLS，須要直播流服務端開啓 CORS。

最後咱們使用的方案是。優先使用 RTMP 流，若是不支持，就切換到 HLS 流。好在這個切換過程 video.js 會自動替咱們作。下面貼一下相關配置代碼。

配置代碼

Vue 實例中的播放器 options，更多代碼見 https://github.com/savokiss/vue-videojs-demo

 

playerOptions: {
        autoplay: false, // 自動播放
        controls: true, // 是否顯示控制欄
        techOrder: ['flash', 'html5'], // 兼容順序
        sourceOrder: true, // 
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        sources: [{ // 流配置，數組形式，會根據兼容順序自動切換
          type: 'rtmp/mp4',
          src: 'rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov'
        }, {
          withCredentials: false,
          type: 'application/x-mpegURL',
          src: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
        }],
        poster: "/static/img/no_data.png", // 播放器默認圖片
        // controlBar: { // 配置控制欄
        //   timeDivider: false, // 時間分割線
        //   durationDisplay: false, // 總時間
        //   progressControl: true, // 進度條
        //   customControlSpacer: true, // 未知
        //   fullscreenToggle: true // 全屏
        // },
      },

最後

以上是最近研究直播項目的一些小的總結吧，直播中其餘的技術暫時尚未涉及到，之後涉及到也會總結出來，若是有問題能夠拍磚交流~
最後歡迎給個人 demo 項目 star 啊啊啊啊~

參考文檔

• My GitHub Demo
• vue-video-player Demo
• 常見推流協議
• 開啓CORS
• 原文連接