一.大前端

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）