直播技術初體驗，簡單實現直播不同階段

一、前言

• 隨着時代的改變，人們對於內容的需求也不斷提高，從文字到圖片到音頻、視頻，可能到以后的 VR
• 直播是一個非常燒錢的項目，需要足夠多的帶寬，足夠好的服務器，比如負載均衡，這里還會扯到雲等等，保證大數據並發，百萬人同時訪問等等
• 涉及到一些專業的視頻相關的知識，也需要很長時間的學習，如解碼（硬解、軟解）、編碼、轉碼，還有底層的 ffmpeg（錄制、轉換以及流化音視頻的完整解決方案）
• 涉及到 即時通訊 和 美顏處理，其中美顏涉及到 OpenGL ，以及基於 OpenGL 的圖像/視頻處理框架 GPUImage
• 涉及到 CDN：(Content Delivery Network)，即內容分發網絡，將網站的內容發布到最接近用戶的網絡”邊緣”，使用戶可以就近取得所需的內容，解決 Internet 網絡擁擠的狀況，提高用戶訪問網站的響應速度.
• 一個簡單的模型：主播-->直播流媒體服務器--> 多個用戶同時觀看
• 簡單的流程：采集（流）-->編碼-->傳輸-->解碼-->播放
• 移動端主要協議
  • RTMP 協議 Macromedia(Adobe) 公司協議
  • HTTP Live Streaming（HLS） Apple 公司協議
  • HLS流和RTMP對比：
    HLS 主要是延時比較大 ，基於 HTTP
    RTMP 主要優勢在於延時低，基於 TCP

二、階段

• 1、客戶端拿到服務器分配好的 URL 直接解碼播放直播視頻。直接客戶端拉流
• 2、自己搭建服務器，播放的流自己控制。服務器推流，客戶端拉流
• 3、調用客戶端攝像頭等進行錄制，客戶端推流，服務器接受流

三、各階段簡要說明

1、拿到 URL 進行解碼播放直播的視頻

• 使用 ijkplayer ，可從網上找別人打包好的靜態庫，直接拖到工程中使用
• 直接用 IJKFFMoviePlayerController 創建 player，設置 player 中屬性 view 的尺寸，加入到控制器的 view 上
• 界面不播放，最好要記得結束播放

@interface ViewController ()
@property (nonatomic, strong) id<IJKMediaPlayback> player;
@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    self.player = [[IJKFFMoviePlayerController alloc]initWithContentURL:[NSURL URLWithString:@"rtmp://live.hkstv.hk.lxdns.com/live/hks"] withOptions:nil];
    // 設置 player 中 view 屬性的frame，且加入到控制器的 view 中
    self.player.view.frame = self.view.bounds;
    [self.view addSubview:self.player.view];
    // 設置 橫屏時自動伸縮
    self.player.view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    [self.player prepareToPlay];
    [self.player play];
}
- (void)viewDidDisappear:(BOOL)animated {
    [super viewDidDisappear:animated];
    [self.player stop];
    self.player = nil;
}

2、自己搭建服務器，服務器推流，客戶端拉流

• mac 環境推薦搭建 Nginx + rtmp ，可網上搜索怎么搭建的
• 配置 nginx.conf
  • 支持 rtmp

nginx.conf, 找到/usr/local/etc/nginx/nginx.conf 文件,

http {
    ……
}
# 在http節點下面(也就是文件的尾部)加上rtmp配置：
rtmp {
    server {
        listen 1935;
        application xxx {
            live on;
            record off;
        }
    }
}

說明:
rtmp是協議名稱
server 說明內部中是服務器相關配置
listen 監聽的端口號, rtmp協議的默認端口號是1935
application 訪問的應用路徑是 xxx
live on; 開啟實時
record off; 不記錄數據

• • 支持 hls

只是簡單的修改下配置文件 nginx.conf 即可
1.打開 /usr/local/etc/nginx/nginx.conf
2.找到 http 下的 server ，在花括號中增加
server {
        listen       8080;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }
       #HLS配置開始,這個配置為了`客戶端`能夠以http協議獲取HLS的拉流
        location /hls {
            # Serve HLS fragments
            types {
                application/vnd.apple.mpegurl m3u8;
                video/mp2t ts;
            }
            root html;
            add_header Cache-Control no-cache;
        }
       #HLS配置結束
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    找到rtmp 下的  server 在花括號中增加
    rtmp {
    server {
        listen 1935;
        application xxx {
            live on;
            record off;
        }
        #增加對HLS支持開始
        #推流必須是基於H264/AAC格式
        application hls {
            live on;
            hls on;
            hls_path /usr/local/var/www/hls;
        }
      #增加對HLS支持結束
    }
}

• 配置完 config 后
  nginx -s reload
• ffmpeg 命令測試 rtmp
  • 命令：該命令會開啟桌面分享、音頻、視頻

ffmpeg -f avfoundation -framerate 30 -i "1:0" -f avfoundation -framerate 30 -video_size 640x480 -i "0" -c:v libx264 -preset ultrafast -filter_complex 'overlay=main_w-overlay_w-10:main_h-overlay_h-10' -acodec libmp3lame -ar 44100 -ac 1  -f flv rtmp://192.168.33.245:1935/xxx/room

• • rtmp 地址

rtmp://192.168.33.245:1935/xxx/room

• • 該 rtmp 地址中，ip地址和 xxx/room 自行根據自己的配置替換，room 暫時可隨便寫，具體怎么分配還不是很清楚

+ 開啟后如下

+ 測試：
- 1、就可以在 VLC 中打開網絡 URL，輸入 rtmp 地址就可以測試了
- 2、也可在 Xcode 項目中用 ijkplayer框架在模擬器中測試該地址（拉流）

• ffmpeg 命令測試 hls
  • 轉換測試

ffmpeg -loglevel verbose -re -i /Users/HOWIE-CH/Desktop/1.mp4 -vcodec libx264 -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://localhost:1935/hls/1

• • 命令后如下
    

+ 查看 然后你就可以在這個目錄 /usr/local/var/www/hls 看到生成一個個ts的文件，還會生成一個你的 m3u8 的文件名稱.m3u8的文件 

+ 測試地址：http://localhost:8080/hls/你的m3u8的文件名稱.m3u8
+ 測試方法
    1、用 safari 瀏覽測試
    2、也可在 Xcode 項目中用 ijkplayer框架在模擬器中測試該地址（拉流）

3、客戶端推流

• 相關第三方框架：
  • GDLiveStreaming 是對開源框架 VideoCore 簡單封裝.提供視頻錄制,推送與存儲
  • https://github.com/goodow/GDLiveStreaming.git

#import "ViewController.h"
#import <GDLiveStreaming/GDLRawDataOutput.h>
#import <GPUImage/GPUImageVideoCamera.h>
#import <GPUImage/GPUImageView.h>
@interface ViewController ()
@property (nonatomic, strong) GPUImageVideoCamera *camera;
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    //  1. 創建視頻攝像頭
    self.camera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPreset1280x720
                                                      cameraPosition:AVCaptureDevicePositionBack];
    //  2. 設置攝像頭幀率
    self.camera.frameRate = 25;
    //  3. 設置攝像頭輸出視頻的方向
    self.camera.outputImageOrientation = UIInterfaceOrientationPortraitUpsideDown;

    
    //  4. 創建用於展示視頻的GPUImageView
    GPUImageView *imageView = [[GPUImageView alloc] init];
    imageView.frame = self.view.bounds;
    [self.view addSubview:imageView];

    //  4.1 添加GPUImageView為攝像頭的的輸出目標
    [self.camera addTarget:imageView];

    //  5. 創建原始數據輸出對象
    GDLRawDataOutput *output = [[GDLRawDataOutput alloc] initWithVideoCamera:self.camera withImageSize:CGSizeMake(720, 1280)];

    //  5.1 添加數據輸出對象為攝像頭輸出目標
    [self.camera addTarget:output];

    

    //  6.開啟前置攝像頭， 不寫這句代碼默認開啟的是后置攝像頭
    [self.camera rotateCamera];

    //  7.開始捕獲視頻
    [self.camera startCameraCapture];

    //  8.開始上傳視頻
    [output startUploadStreamWithURL:@"rtmp://192.168.33.245:1935/zhanghao" andStreamKey:@"room"];
}
@end

• mac 電腦(搭建 Nginx 服務器）網段和真機的網段最好是同一局域網網段下，或者用外網測試

• 真機做推流到 mac上(搭建 Nginx 服務器），然后用 Xcode 里模擬器當其他客戶端拉流

• 真機 debug 打印
  

• 模擬器中
  

四、其他

• 直播要考慮的問題很多
  • 主要是延遲：轉發環節越多，延遲越大；長連接會比短連接會降低延遲
  • 網絡不穩定時，斷線自動重連
  • ...
• 直播已有一些 SDK ，如暴風雲直播、七牛雲直播、網易雲信直播 SDK、騰訊直播 SDK 等，可選性比較多，第三方框架也比較多，當然也有通過自己封裝的協議進行直播的