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

標籤：

 

來源：袁崢Seemygo

連結：http://www.jianshu.com/p/4646894245ba

 

前言

 

在看這篇之前，如果您還不瞭解直播原理，請查看這篇文章如何快速的開發一個完整的iOS直播app(原理篇)

 

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

 

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

 

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

   

美顏原理.png

美顏基本概念

 

GPU：（Graphic Processor Unit圖形處理器）手機或者電腦用於影像處理和渲染的硬體

 

GPU工作原理：CPU指定顯示控制器工作，顯示控制器根據CPU的控制到指定的地方去取資料和指令， 目前的資料一般是從顯存裡取，如果顯存裡存不下，則從記憶體裡取， 記憶體也放不下，則從硬碟裡取，當然也不是記憶體放不下，而是為了節省記憶體的話，可以放在硬碟裡，然後通過指令控制顯示控制器去取。

 

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

 

GPUImage:是一個基於OpenGL ES 2.0映像和視頻處理的開源iOS架構，提供各種各樣的影像處理濾鏡，並且支援照相機和攝像機的即時濾鏡，內建120多種濾鏡效果，並且能夠自訂映像濾鏡。

 

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

 

GPUImage處理畫面原理

 

• GPUImage採用鏈式方式來處理畫面,通過addTarget:方法為鏈條添加每個環節的對象，處理完一個target,就會把上一個環節處理好的映像資料傳遞下一個target去處理，稱為GPUImage處理鏈。

• 中間環節的target, 一般是各種filter, 是GPUImageFilter或者是子類.

• 最終環節的target, GPUImageView：用於顯示到螢幕上, 或者GPUImageMovieWriter：寫成視頻檔案。

• 比如：墨鏡原理，從外界傳來光線，會經過墨鏡過濾，在傳給我們的眼睛，就能感受到大白天也是烏黑一片，哈哈。

• 一般的target可分為兩類

• GPUImage處理主要分為3個環節

• GPUImageVideoCamera：用於即時拍攝視頻

• GPUImageStillCamera：用於即時拍攝照片

• GPUImagePicture：用於處理已經拍攝好的圖片，比如png,jpg圖片

• GPUImageMovie：用於處理已經拍攝好的視頻,比如mp4檔案

• source(視頻、圖片源) -> filter（濾鏡） -> final target (處理後視頻、圖片)

• GPUImaged的Source:都繼承GPUImageOutput的子類，作為GPUImage的資料來源,就好比外界的光線，作為眼睛的輸出源

• GPUImage的filter:GPUimageFilter類或者子類，這個類繼承自GPUImageOutput,並且遵守GPUImageInput協議，這樣既能流進，又能流出，就好比我們的墨鏡，光線通過墨鏡的處理，最終進入我們眼睛

• GPUImage的final target:GPUImageView,GPUImageMovieWriter就好比我們眼睛，最終輸入目標。

GPUImage處理原理.png

美顏原理

 

• 磨皮(GPUImageBilateralFilter)：本質就是讓像素點模糊，可以使用高斯模糊，但是可能導致邊緣會不清晰，用雙邊濾波(Bilateral Filter) ，有針對性的模糊像素點，能保證邊緣不被模糊。

• 美白(GPUImageBrightnessFilter)：本質就是提高亮度。

 

美顏效果

 

• 關注效果，忽悠本人

 

GPUImage原生美顏效果

 

GPUImage原生.gif

利用美顏濾鏡實現效果

 

（提示：由於 GIF 動圖超過最大限制，無法上傳）

 

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擴充

 

• GPUImage所有濾鏡介紹

  http://www.360doc.com/content/15/0907/10/19175681_497418716.shtml

• 美顏濾鏡

  http://www.jianshu.com/p/945fc806a9b4

• 美圖秀秀濾鏡大匯總

  http://www.tuicool.com/articles/6bIbQbQ

 

源碼下載

 

源碼 https://github.com/iThinkerYZ/GPUImgeDemo

注意：第一次開啟需要 pod install

 

結束語

 

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

 

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