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

2019-11-06 09:44:10

字體：大中小

來源：轉載

供稿：網友

轉自:http://www.jianshu.com/p/4646894245ba

前言

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

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

如果喜歡我的文章，可以關注我微博:袁崢Seemygo,也可以來小碼哥，了解下我們的iOS培訓課程。后續還會更新更多內容,有任何問題，歡迎簡書留言袁崢Seemygo。。。

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

采集視頻 => 獲取每一幀圖片 => 濾鏡處理 => GPUImageView展示

美顏原理.png

美顏基本概念

GPU：（Graphic PRocessor Unit圖形處理單元）手機或者電腦用于圖像處理和渲染的硬件

GPU工作原理：采集數據-> 存入主內存(RAM) -> CPU(計算處理) -> 存入顯存(VRAM) -> GPU(完成圖像渲染) -> 幀緩沖區 -> 顯示器

GPU工作原理.jpg

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。- (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]; }}