任何一款直播软件都必须进行美颜，不然哪来的那么多美女，所以技术改变世界，不只是说说而已。美颜在采集的时候就得就行，让主播实时看到直播的效果。
1.美颜原理
其实美颜的本质就是美白和磨皮，分别通过提高亮度和模糊像素点进行。我们一般用GPUImage这个开源的图像处理库来实现。视频的本质就是一张张连续的图片，磨皮就是对于图片上的像素点的取值与周边的像素点取值相关联。常见的有高斯模糊和双边滤波(Bilateral Filter)。
高斯模糊是最常见的一种模糊方式，像素点取值是由周边像素点求加权平均所得，而权重系数则是像素间的距离的高斯函数，大致关系是距离越小、权重系数越大。高斯模糊会导致边缘不清晰。
双边滤波是有针对点的模糊像素点，能保证边缘不被模糊。
2.GPUImage介绍
GPUImage 是一个开源的基于GPU的图片或视频的处理框架，其本身内置了多达120多种常见的滤镜效果。有了它，添加实时的滤镜只需要简单地添加几行代码,非常强大。想研究源码的同学上，可以去GitHub上下载。
3.效果
UI.png
&esmp;&esmp;请原谅这篇只有UI效果图。用两个Slider来控制磨皮和美白的效果，从上到下取值范围分别为[-1,1] [0,100];
4.GPUImage使用方法
1.用CocoaPods集成到项目中。
pod 'GPUImage', '~> 0.1.7'
2.代码演示
#import "FHUImageFilterViewController.h"
#import <GPUImage/GPUImage.h>
@interface FHUImageFilterViewController ()
// 视频源
@property (nonatomic, strong)GPUImageVideoCamera *videoCamera;
// 磨皮滤镜
@property (nonatomic, weak)GPUImageBilateralFilter *bilateralFilter;
// 美白滤镜
@property (nonatomic, weak)GPUImageBrightnessFilter *brightnessFilter;
@end
@implementation FHUImageFilterViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 创建视屏源
/*
* sessionPreset : 屏幕分辨率
* cameraPosition： 摄像头位置
**/
GPUImageVideoCamera *videoCamera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPresetHigh cameraPosition:AVCaptureDevicePositionFront];
// 设置输出图像方向
videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;
self.videoCamera = videoCamera;
// 创建最终预览View
GPUImageView *captureVideoPreview = [[GPUImageView alloc] initWithFrame:self.view.bounds];
captureVideoPreview.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view insertSubview:captureVideoPreview atIndex:0];
// 创建滤镜：磨皮，美白，组合滤镜
GPUImageFilterGroup *groupFilter = [[GPUImageFilterGroup alloc] init];
// 磨皮滤镜
GPUImageBilateralFilter *bilateraFilter = [[GPUImageBilateralFilter alloc] init];
[groupFilter addTarget:bilateraFilter];
_bilateralFilter = bilateraFilter;
// 美白滤镜
GPUImageBrightnessFilter *brightnessFilter = [[GPUImageBrightnessFilter alloc] init];
[groupFilter addTarget:brightnessFilter];
_brightnessFilter = brightnessFilter;
// 设置滤镜组链
[bilateraFilter addTarget:brightnessFilter];
[groupFilter setInitialFilters:@[bilateraFilter]];
groupFilter.terminalFilter = brightnessFilter;
// 设置GPUImage的响应链， 从数据源 ==> 滤镜 ==> 最终界面效果
[videoCamera addTarget:groupFilter];
[groupFilter addTarget:captureVideoPreview];
// 必须采用startCameraCapture, 底层才会把采集到的视频源，渲染到GPUImageView中，就能显示了。
[videoCamera startCameraCapture];
}
备注：手机分辨率(sessionPreset)有13个值可选，但最好设置成AVCaptureSessionPresetHigh，手机会自动识别。如果设置的太高，手机不支持，会直接报错。
- (IBAction)brightnessFiller:(id)sender {
UISlider *slider = (UISlider *)sender;
// 亮度(brightness)
_brightnessFilter.brightness = slider.value;
}
- (IBAction)bilateralFilter:(id)sender {
UISlider *slider = (UISlider *)sender;
CGFloat maxValue = 100;
//平滑因子(distanceNormalizationFactor)
_bilateralFilter.distanceNormalizationFactor = maxValue - slider.value;
NSLog(@"distanceNormalizationFactor=%f",_bilateralFilter.distanceNormalizationFactor);
}
备注：(1)亮度(brightness)取值范围[-1,1],0为正常状态，默认。
(2)平滑因子(distanceNormalizationFactor)值越小，磨皮效果越好，默认为8。我为了演示效果，把最大值设置成100，这样几乎就没有磨皮效果了，平时最好10以内。最好大于0，不然就会变形。
5.自定义滤镜
如果你感觉GPUImage自带的滤镜不够用的话，也可以自定义滤镜，使用方式和上面的差不多。我以一个别人写的美颜滤镜为例。
1.demo下载地址。把GPUImageBeautifyFilter文件夹导入你的工程中。
2.代码演示
#import "FHBeautyViewController.h"
#import "GPUImageBeautifyFilter.h"
#import <GPUImage/GPUImage.h>
@interface FHBeautyViewController ()
//视频源一定要强引用
@property(nonatomic,strong) GPUImageVideoCamera *videoCamera;
@end
@implementation FHBeautyViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 创建视频源
_videoCamera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPresetHigh cameraPosition:AVCaptureDevicePositionFront];
_videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;
// 创建美颜滤镜
GPUImageBeautifyFilter *beautifyFilter = [[GPUImageBeautifyFilter alloc] init];
// 创建最终预览View
GPUImageView *captureVideoPreview = [[GPUImageView alloc] initWithFrame:self.view.bounds];
captureVideoPreview.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view insertSubview:captureVideoPreview atIndex:0];
// 设置GPUImage处理链，从数据源 => 滤镜 => 最终界面效果
[_videoCamera addTarget:beautifyFilter];
[beautifyFilter addTarget:captureVideoPreview];
// 开始采集视屏
[_videoCamera startCameraCapture];
}
6.demo下载
demo下载地址。下载下来运行，发现报错。
报错.png
那是因为我没有在工程里上传ijkplayer视屏直播框架，我能上传上去，但下载太慢了，什么原因大家都懂得。我把ijkplayer视屏直播框架放到百度云上了，没有密码，下载下来之后，放到LiveAppDemo-master文件夹里，重新打开就可以运行了。
文件夹.png
网友评论