大前端介紹與直播原理

一.大前端

1.大前端需要掌握的技能

• 前端基本技能
  • Vue
  • React
  • Angular
  • Webpack
  • ES6
• 服務類
  • Node.js
  • express.js
  • koa.js
  • egg.js
• 3D資料圖像（用于遊戲）
  • three.js
• 二維圖像
  • d3.js
  • raphael.js
  • echart.js
• 視訊相關
  • video.js
  • hls.js
  • flv.js

二.直播原理

1.直播流程

2.視訊格式與浏覽器相容性

• hls更準确的說是一種視訊協定，檔案對應的字尾是ts，适配Safari浏覽器，是蘋果推出的視訊協定
• flv是早期的flash格式
• MP4和WEBM是偏點播使用的視訊格式（如愛奇藝）
• TS和FLV是偏直播使用的視訊格式（如鬥魚）

3.視訊直播常用協定1：HLS協定

• 播放器使用video作為點播和直播的基石（将M3U8索引檔案[是ts檔案的索引]給video進行播放，播放時會被解析成多個ts直播流片段，浏覽器會實時向伺服器請求M3U8檔案裡面是每個片段，之後會再次下載下傳，之後會再次請求M3U8等等，進而保證直播的實時和連續）

• 有事M3U8檔案中還會嵌套M3U8檔案（通常M3U8檔案就會索引各個TS檔案）

• M3U8的分類
  • event playlist靜态清單（不常用）
  • live playlist動态清單【常用于直播中，拿到M3U8檔案其中有TS檔案索引，TS檔案執行後，又會重新請求M3U8檔案，其中的内容發生變化，有新的流過來了】
  • vod playlist全量清單【常用于點播中，拿到M3U8檔案後，檔案中資訊不變化】
  • 如何知道M3U8是動态的還是靜态的？
    • 通常的M3U8動态清單檔案資訊，如下

      #EXTM3U    版本，與浏覽器有關，有的浏覽器無法播放對應版本
      #EXT-X-VERSION:6
      #EXT-X-TARGETDURATION:10 預設時長
      #EXT-X-MEDIA-SEQUENCE:26 序号
      #EXTINF:9.901, 時間戳，大概的視訊時長
      http://media.example.com/wifi/segment26.ts
      #EXTINF:9.901, 時間戳，大概的視訊時長
      http://media.example.com/wifi/segment27.ts
      #EXTINF:9.501, 時間戳，大概的視訊時長 
      http://media.example.com/wifi/segment28.ts
                 

    • 通常的M3U8靜态清單檔案資訊，如下

      #EXTM3U    版本，與浏覽器有關，有的浏覽器無法播放對應版本
      #EXT-X-VERSION:6
      #EXT-X-TARGETDURATION:10 預設時長
      #EXT-X-MEDIA-SEQUENCE:0
      #EXT-X-PLAYLIST-TYPE:EVENT 表示是靜态清單
      #EXTINF:9.901, 時間戳，大概的視訊時長
      http://media.example.com/wifi/segment26.ts
      #EXTINF:9.901, 時間戳，大概的視訊時長
      http://media.example.com/wifi/segment27.ts
      #EXTINF:9.501, 時間戳，大概的視訊時長 
      http://media.example.com/wifi/segment28.ts
                 

    • 通常的M3U8全量清單檔案資訊，如下

      #EXTM3U    版本，與浏覽器有關，有的浏覽器無法播放對應版本
      #EXT-X-VERSION:6
      #EXT-X-TARGETDURATION:10 預設時長
      #EXT-X-MEDIA-SEQUENCE:0
      #EXT-X-PLAYLIST-TYPE:VOD 表示全量清單
      #EXTINF:9.901, 時間戳，大概的視訊時長
      http://media.example.com/wifi/segment26.ts
      #EXTINF:9.901, 時間戳，大概的視訊時長
      http://media.example.com/wifi/segment27.ts
      #EXTINF:9.501, 時間戳，大概的視訊時長 
      http://media.example.com/wifi/segment28.ts
      #EXT-X-ENDLIST 表示清單結束，浏覽器不要在更新M3u8檔案啦
                 

• 每個ts檔案中是什麼内容

• 首先需要找PAT的包
• PAT包告訴你需要去找一個PMT的包
• PMT包告訴你後面解析的ts包哪些是視訊，哪些是音頻
• 多個ts包按照視訊和音頻分類将連續的包組合成一個PES檔案（幀）

4.視訊直播常用協定2：RTMP協定（開發用戶端通常采用）

• RTMP協定（傳輸的過程中也是flv視訊格式的，隻是傳輸手段不同）
  • RTMP是Real Time Messaging Protocol（實時消息傳輸協定）的首字母縮寫。該協定基于TCP，是一個協定族，包括RTMP基本協定及RTMPT/RTMPS/RTMPE等多種變種。RTMP是一種設計用來進行實時資料通信的網絡協定，主要用來在Flash、AIR平台和支援RTMP協定的流媒體/互動伺服器之間進行音視訊和資料通信。
• RTMP協定視圖

5.視訊直播常用協定3：HTTP-FLV協定（兼備RTMP低延時和HLS傳輸快的特性，視訊格式是FLV）

• RTMP協定更新版HTTP-FLV協定

  

• HTTP-FLV協定結合了HLS協定優點：純HTTP請求；結合RTMP低延時的特性，中間采用FLV長連接配接。
• HTTP-FLV協定與RTMP的差別與優勢
  • 可以在一定程度上避免防火牆的幹擾（如，有的機房隻允許80端口通過）
  • 可以很好的相容HTTP302跳轉，做到靈活排程
  • 可以使用HTTPS做加密通道
  • 很好的支援移動端（Android和IOS）