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

時間 2019-11-26

標籤直播技術體驗簡單實現不一樣階段简体版

原文原文鏈接

1、前言

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

2、階段

一、客戶端拿到服務器分配好的 URL 直接解碼播放直播視頻。直接客戶端拉流
二、本身搭建服務器，播放的流本身控制。服務器推流，客戶端拉流
三、調用客戶端攝像頭等進行錄製，客戶端推流，服務器接受流

3、各階段簡要說明

一、拿到 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;
}

二、本身搭建服務器，服務器推流，客戶端拉流

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 暫時可隨便寫，具體怎麼分配還不是很清楚
  - 開啓後以下
  - 測試：
  - 一、就能夠在 VLC 中打開網絡 URL，輸入 rtmp 地址就能夠測試了
  - 二、也可在 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
+ 測試方法
    一、用 safari 瀏覽測試
    二、也可在 Xcode 項目中用 ijkplayer框架在模擬器中測試該地址（拉流）

三、客戶端推流

相關第三方框架：
- 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