1. 程式人生 > 其它 >如何快速的開發一個完整的iOS直播app(美顏篇)

如何快速的開發一個完整的iOS直播app(美顏篇)

開發一款直播app,美顏功能是很重要的,如果沒有美顏功能,可能分分鐘鍾掉粉千萬,本篇主要講解直播中美顏功能的實現原理,並且實現美顏功能。

利用GPUImage處理直播過程中美顏的流程

  • 採集視訊 => 獲取每一幀圖片 => 濾鏡處理 => GPUImageView展示

美顏基本概念

GPU:(Graphic Processor Unit圖形處理單元)手機或者電腦用於影象處理和渲染的硬體

GPU工作原理:採集資料-> 存入主記憶體(RAM) -> CPU(計算處理) -> 存入視訊記憶體(VRAM) -> GPU(完成影象渲染) -> 幀緩衝區 -> 顯示器

 

OpenGL ES:(Open Graphics Library For Embedded(嵌入的) Systems 開源嵌入式系統圖形處理框架),一套圖形與硬體介面,用於把處理好的圖片顯示到螢幕上。

GPUImage:是一個基於OpenGL ES 2.0影象和視訊處理的開源iOS框架,提供各種各樣的影象處理濾鏡,並且支援照相機和攝像機的實時濾鏡,內建120多種濾鏡效果,並且能夠自定義影象濾鏡。

濾鏡處理的原理:就是把靜態圖片或者視訊的每一幀進行圖形變換再顯示出來。它的本質就是畫素點的座標和顏色變化

GPUImage處理畫面原理

  • GPUImage採用鏈式方式來處理畫面,通過addTarget:方法為鏈條新增每個環節的物件,處理完一個target,就會把上一個環節處理好的影象資料傳遞下一個target去處理,稱為GPUImage處理鏈。
    • 比如:墨鏡原理,從外界傳來光線,會經過墨鏡過濾,在傳給我們的眼睛,就能感受到大白天也是烏黑一片,哈哈
    • 一般的target可分為兩類
      • 中間環節的target, 一般是各種filter, 是GPUImageFilter或者是子類.
      • 最終環節的target, GPUImageView:用於顯示到螢幕上, 或者GPUImageMovieWriter:寫成視訊檔案。
  • GPUImage處理主要分為3個環節
    • source(視訊、圖片源) -> filter(濾鏡) -> final target (處理後視訊、圖片)
    • GPUImaged的Source:都繼承GPUImageOutput的子類,作為GPUImage的資料來源,就好比外界的光線,作為眼睛的輸出源
      • GPUImageVideoCamera:用於實時拍攝視訊
      • GPUImageStillCamera:用於實時拍攝照片
      • GPUImagePicture:用於處理已經拍攝好的圖片,比如png,jpg圖片
      • GPUImageMovie:用於處理已經拍攝好的視訊,比如mp4檔案
    • GPUImage的filter:GPUimageFilter類或者子類,這個類繼承自GPUImageOutput,並且遵守GPUImageInput協議,這樣既能流進,又能流出,就好比我們的墨鏡,光線通過墨鏡的處理,最終進入我們眼睛
    • GPUImage的final target:GPUImageView,GPUImageMovieWriter就好比我們眼睛,最終輸入目標。

美顏原理

  • 磨皮(GPUImageBilateralFilter):本質就是讓畫素點模糊,可以使用高斯模糊,但是可能導致邊緣會不清晰,用雙邊濾波(Bilateral Filter) ,有針對性的模糊畫素點,能保證邊緣不被模糊。
  • 美白(GPUImageBrightnessFilter):本質就是提高亮度。

美顏效果

  • 關注效果,忽悠本人

GPUImage原生美顏效果

利用美顏濾鏡實現效果

GPUImage實戰

GPUImage原生美顏

  • 步驟一:使用Cocoapods匯入GPUImage
  • 步驟二:建立視訊源GPUImageVideoCamera
  • 步驟三:建立最終目的源:GPUImageView
  • 步驟四:建立濾鏡組(GPUImageFilterGroup),需要組合亮度(GPUImageBrightnessFilter)雙邊濾波(GPUImageBilateralFilter)這兩個濾鏡達到美顏效果.
  • 步驟五:設定濾鏡組鏈
  • 步驟六:設定GPUImage處理鏈,從資料來源 => 濾鏡 => 最終介面效果
  • 步驟七:開始採集視訊

注意點:

  • SessionPreset最好使用AVCaptureSessionPresetHigh,會自動識別,如果用太高解析度,當前裝置不支援會直接報錯
  • GPUImageVideoCamera必須要強引用,否則會被銷燬,不能持續採集視訊.
  • 必須呼叫startCameraCapture,底層才會把採集到的視訊源,渲染到GPUImageView中,就能顯示了。
  • GPUImageBilateralFilter的distanceNormalizationFactor值越小,磨皮效果越好,distanceNormalizationFactor取值範圍: 大於1
- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 建立視訊源
    // SessionPreset:螢幕解析度,AVCaptureSessionPresetHigh會自適應高解析度
    // cameraPosition:攝像頭方向
    GPUImageVideoCamera *videoCamera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPresetHigh cameraPosition:AVCaptureDevicePositionFront];
     videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;
    _videoCamera = videoCamera;

    // 建立最終預覽View
    GPUImageView *captureVideoPreview = [[GPUImageView alloc] initWithFrame:self.view.bounds];
    [self.view insertSubview:captureVideoPreview atIndex:0];
    
    // 建立濾鏡:磨皮,美白,組合濾鏡
    GPUImageFilterGroup *groupFilter = [[GPUImageFilterGroup alloc] init];
    
    // 磨皮濾鏡
    GPUImageBilateralFilter *bilateralFilter = [[GPUImageBilateralFilter alloc] init];
    [groupFilter addTarget:bilateralFilter];
    _bilateralFilter = bilateralFilter;
    
    // 美白濾鏡
    GPUImageBrightnessFilter *brightnessFilter = [[GPUImageBrightnessFilter alloc] init];
    [groupFilter addTarget:brightnessFilter];
    _brightnessFilter = brightnessFilter;
    
    // 設定濾鏡組鏈
    [bilateralFilter addTarget:brightnessFilter];
    [groupFilter setInitialFilters:@[bilateralFilter]];
    groupFilter.terminalFilter = brightnessFilter;
    
    // 設定GPUImage響應鏈,從資料來源 => 濾鏡 => 最終介面效果
    [videoCamera addTarget:groupFilter];
    [groupFilter addTarget:captureVideoPreview];
    
    // 必須呼叫startCameraCapture,底層才會把採集到的視訊源,渲染到GPUImageView中,就能顯示了。
    // 開始採集視訊
    [videoCamera startCameraCapture];
}

- (IBAction)brightnessFilter:(UISlider *)sender {
    _brightnessFilter.brightness = sender.value;
}

- (IBAction)bilateralFilter:(UISlider *)sender {
    // 值越小,磨皮效果越好
    CGFloat maxValue = 10;
    [_bilateralFilter setDistanceNormalizationFactor:(maxValue - sender.value)];
}

利用美顏濾鏡實現

  • 步驟一:使用Cocoapods匯入GPUImage
  • 步驟二:匯入GPUImageBeautifyFilter資料夾
  • 步驟三:建立視訊源GPUImageVideoCamera
  • 步驟四:建立最終目的源:GPUImageView
  • 步驟五:建立最終美顏濾鏡:GPUImageBeautifyFilter
  • 步驟六:設定GPUImage處理鏈,從資料來源 => 濾鏡 => 最終介面效果

注意:

  • 切換美顏效果原理:移除之前所有處理鏈,重新設定處理鏈
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    // 建立視訊源
    // SessionPreset:螢幕解析度,AVCaptureSessionPresetHigh會自適應高解析度
    // cameraPosition:攝像頭方向
    GPUImageVideoCamera *videoCamera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPresetHigh cameraPosition:AVCaptureDevicePositionFront];
    videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;
    _videoCamera = videoCamera;
    
    // 建立最終預覽View
    GPUImageView *captureVideoPreview = [[GPUImageView alloc] initWithFrame:self.view.bounds];
    [self.view insertSubview:captureVideoPreview atIndex:0];
    _captureVideoPreview = captureVideoPreview;
    
    // 設定處理鏈
    [_videoCamera addTarget:_captureVideoPreview];
    
    // 必須呼叫startCameraCapture,底層才會把採集到的視訊源,渲染到GPUImageView中,就能顯示了。
    // 開始採集視訊
    [videoCamera startCameraCapture];

}

- (IBAction)openBeautifyFilter:(UISwitch *)sender {
    
    // 切換美顏效果原理:移除之前所有處理鏈,重新設定處理鏈
    if (sender.on) {
        
        // 移除之前所有處理鏈
        [_videoCamera removeAllTargets];
        
        // 建立美顏濾鏡
        GPUImageBeautifyFilter *beautifyFilter = [[GPUImageBeautifyFilter alloc] init];
        
        // 設定GPUImage處理鏈,從資料來源 => 濾鏡 => 最終介面效果
        [_videoCamera addTarget:beautifyFilter];
        [beautifyFilter addTarget:_captureVideoPreview];
        
    } else {
        
        // 移除之前所有處理鏈
        [_videoCamera removeAllTargets];
        [_videoCamera addTarget:_captureVideoPreview];
    }
    
    
}

GPUImage擴充套件

原始碼下載

原始碼
注意:第一次開啟需要 pod install

結束語

後續還會講解GPUImage原理openGL ES,視訊編碼,推流,聊天室,禮物系統等更多功能,敬請關注!!!


作者:袁崢
連結:https://www.jianshu.com/p/4646894245ba
來源:簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。