前言
在看這篇之前，如果您還不瞭解直播原理，請檢視這篇文章如何快速的開發一個完整的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可分為兩類
中間環節的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就好比我們眼睛，最終輸入目標。
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。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
- (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處理鏈，從資料來源 => 濾鏡 => 最終介面效果
注意：
切換美顏效果原理：移除之前所有處理鏈，重新設定處理鏈
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
- (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，視訊編碼，推流，聊天室，禮物系統等更多功能，敬請關注！！！