小視頻系統源碼H5 直播起航

一、視頻流協議HLS與RTMP

1. HTTP Live Streaming
   加粗樣式HTTP Live Streaming（簡稱 HLS）是一個基於 HTTP 的視頻流協議，由 Apple 公司實現，Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS，高版本 Android 也增加了對 HLS 的支持。一些常見的客戶端如：MPlayerX、VLC 也都支持 HLS 協議。

HLS 協議基於 HTTP，而一個提供 HLS 的服務器需要做兩件事：

編碼：以 H.263 格式對圖像進行編碼，以 MP3 或者 HE-AAC 對聲音進行編碼，最終打包到 MPEG-2 TS（Transport Stream）容器之中；
分割：把編碼好的 TS 文件等長切分成後綴爲 ts 的小文件，並生成一個 .m3u8 的純文本索引文件；
瀏覽器使用的是 m3u8 文件。m3u8 跟音頻列表格式 m3u 很像，可以簡單的認爲 m3u8 就是包含多個 ts 文件的播放列表。播放器按順序逐個播放，全部放完再請求一下 m3u8 文件，獲得包含最新 ts 文件的播放列表繼續播，週而復始。整個直播過程就是依靠一個不斷更新的 m3u8 和一堆小的 ts 文件組成，m3u8 必須動態更新，ts 可以走 CDN。一個典型的 m3u8 文件格式如下：

#EXTM3U

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000
gear1/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111
gear2/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=484444
gear3/prog_index.m3u8

#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777
gear4/prog_index.m3u8

可以看到 HLS 協議本質還是一個個的 HTTP 請求 / 響應，所以適應性很好，不會受到防火牆影響。但它也有一個致命的弱點：延遲現象非常明顯。如果每個 ts 按照 5 秒來切分，一個 m3u8 放 6 個 ts 索引，那麼至少就會帶來 30 秒的延遲。如果減少每個 ts 的長度，減少 m3u8 中的索引數，延時確實會減少，但會帶來更頻繁的緩衝，對服務端的請求壓力也會成倍增加。所以只能根據實際情況找到一個折中的點。

2. Real Time Messaging Protocol
Real Time Messaging Protocol（簡稱 RTMP）是 Macromedia 開發的一套視頻直播協議，現在屬於 Adobe。這套方案需要搭建專門的 RTMP 流媒體服務如 Adobe Media Server，並且在瀏覽器中只能使用 Flash 實現播放器。它的實時性非常好，延遲很小，但無法支持移動端 WEB 播放是它的硬傷。

雖然無法在iOS的H5頁面播放，但是對於iOS原生應用是可以自己寫解碼去解析的, RTMP 延遲低、實時性較好。

瀏覽器端，HTML5 video標籤無法播放 RTMP 協議的視頻，可以通過 video.js 來實現。

3. 視頻流協議HLS與RTMP對比

HLS，協議： 短鏈接Http ，原理：集合一段時間數據生成ts切片文件更新m3u8文件，延遲10s - 30s，優點： 跨平臺，使用場景：移動端爲主
RTMP，協議長鏈接Tcp，原理：每個時刻的數據收到後立即發送，延遲2s，優點：延時低、實時性好，使用場景： PC+直播+實時性要求高＋互動性強

二、直播形式
目前直播展示形式，通常以YY直播、映客直播這種頁面居多，可以看到其結構可以分成三層：① 背景視頻層 ② 關注、評論模塊 ③ 點贊動畫

而現行H5類似直播頁面，實現技術難點不大，其可以通過實現方式分爲：① 底部視頻背景使用video視頻標籤實現播放 ② 關注、評論模塊利用 WebScoket 來實時發送和接收新的消息通過DOM 和 CSS3 實現 ③ 點贊利用 CSS3 動畫

瞭解完直播形式之後，接下來整體瞭解直播流程。

三、直播整體流程
直播整體流程大致可分爲：

1.視頻採集端：可以是電腦上的音視頻輸入設備、或手機端的攝像頭、或麥克風，目前以移動端手機視頻爲主。

2.直播流視頻服務端：一臺Nginx服務器，採集視頻錄製端傳輸的視頻流(H264/ACC編碼)，由服務器端進行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。

3.視頻播放端：可以是電腦上的播放器（QuickTime Player、VLC），手機端的native播放器，還有就是 H5 的video標籤等，目前還是以手機端的native播放器爲主。

四、H5 錄製視頻
1. 使用 webRTC 錄製視頻基本流程
① 調用 window.navigator.webkitGetUserMedia() 獲取用戶的PC攝像頭視頻數據。
② 將獲取到視頻流數據轉換成 window.webkitRTCPeerConnection (一種視頻流數據格式)。
③ 利用 WebScoket 將視頻流數據傳輸到服務端。

注意：雖然Google一直在推WebRTC，目前已有不少成型的產品出現，但是大部分移動端的瀏覽器還不支持 webRTC（最新iOS 10.0也不支持），所以真正的視頻錄製還是要靠客戶端（iOS,Android）來實現,效果會好一些。

2. iOS原生應用調用攝像頭錄製視頻流程
① 音視頻的採集，利用AVCaptureSession和AVCaptureDevice可以採集到原始的音視頻數據流。
② 對視頻進行H264編碼，對音頻進行AAC編碼，在iOS中分別有已經封裝好的編碼庫（x264編碼、faac編碼、ffmpeg編碼）來實現對音視頻的編碼。
③ 對編碼後的音、視頻數據進行組裝封包。
④ 建立RTMP連接並上推到服務端。

五、搭建Nginx+Rtmp直播流服務
1. 安裝nginx、nginx-rtmp-module
① 先clone nginx項目到本地：

brew tap homebrew/nginx

② 執行安裝nginx-rtmp-module

brew install nginx-full --with-rtmp-module

2. nginx.conf配置文件，配置RTMP、HLS
查找到nginx.conf配置文件（路徑/usr/local/etc/nginx/nginx.conf），配置RTMP、HLS。

① 在http節點之前添加 rtmp 的配置內容：

rtmp {
  server {
     #監聽的端口
      listen 1935;
      # RTMP 直播流配置
      application rtmplive {
          live on;
	      #爲 rtmp 引擎設置最大連接數。默認爲 off
	      max_connections 1024;
       }
	  # HLS 直播流配置
      application hls{
          live on;
          hls on;
          hls_path /usr/local/var/www/hls;
          hls_fragment 1s;
      }
   }
}

② 在http中添加 hls 的配置

location /hls {  
       # Serve HLS fragments  
       types {  
           application/vnd.apple.mpegurl m3u8;  
           video/mp2t ts;  
       }  
       root /usr/local/var/www;  
       #add_header Cache-Controll no-cache;
       expires -1;
   }

3. 重啓nginx服務

nginx -s reload

六、直播流轉換格式、編碼推流
當服務器端接收到採集視頻錄製端傳輸過來的視頻流時，需要對其進行解析編碼，推送RTMP/HLS格式視頻流至視頻播放端。通常使用的常見編碼庫方案，如x264編碼、faac編碼、ffmpeg編碼等。

鑑於 FFmpeg 工具集合了多種音頻、視頻格式編碼，我們可以優先選用FFmpeg進行轉換格式、編碼推流。

1.安裝 FFmpeg 工具

brew install ffmpeg

2.推流MP4文件

視頻文件地址：/Users/gao/Desktop/video/test.mp4
推流拉流地址：rtmp://localhost:1935/rtmplive/home，rtmp://localhost:1935/rtmplive/home

//RTMP 協議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home
//HLS 協議流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44

3.FFmpeg推流命令

① 視頻文件進行直播

ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv  -q 10 rtmp://192.168.1.101:1935/hls/test
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv  -q 10 rtmp://10.14.221.17:1935/hls/test

② 推流攝像頭＋桌面+麥克風錄製進行直播

ffmpeg -f avfoundation -framerate 30 -i "1:0" \-f avfoundation -framerate 30 -video_size 640x480 -i