iOS从零开始学习直播之3.美颜

任何一款直播软件都必须进行美颜，不然哪来的那么多美女，所以技术改变世界，不只是说说而已。美颜在采集的时候就得就行，让主播实时看到直播的效果。

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 

@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 

@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