任何一款直播软件都必须进行美颜,不然哪来的那么多美女,所以技术改变世界,不只是说说而已。美颜在采集的时候就得就行,让主播实时看到直播的效果。
其实美颜的本质就是美白和磨皮,分别通过提高亮度和模糊像素点进行。我们一般用 GPUImage 这个开源的图像处理库来实现。视频的本质就是一张张连续的图片,磨皮就是对于图片上的像素点的取值与周边的像素点取值相关联。常见的有高斯模糊和双边滤波 (Bilateral Filter)。
高斯模糊是最常见的一种模糊方式,像素点取值是由周边像素点求加权平均所得,而权重系数则是像素间的距离的高斯函数,大致关系是距离越小、权重系数越大。高斯模糊会导致边缘不清晰。
双边滤波是有针对点的模糊像素点,能保证边缘不被模糊。
GPUImage 是一个开源的基于 GPU 的图片或视频的处理框架,其本身内置了多达 120 多种常见的滤镜效果。有了它,添加实时的滤镜只需要简单地添加几行代码, 非常强大。想研究源码的同学上,可以去上下载。
&esmp;&esmp; 请原谅这篇只有 UI 效果图。用两个 Slider 来控制磨皮和美白的效果,从上到下取值范围分别为 [-1,1] [0,100];
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,不然就会变形。
如果你感觉 GPUImage 自带的滤镜不够用的话,也可以自定义滤镜,使用方式和上面的差不多。我以一个别人写的为例。
1.。把 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];
- }
。下载下来运行,发现报错。
那是因为我没有在工程里上传 ijkplayer 视屏直播框架,我能上传上去,但下载太慢了,什么原因大家都懂得。我把 ijkplayer 视屏直播框架放到上了,没有密码,下载下来之后,放到 LiveAppDemo-master 文件夹里,重新打开就可以运行了。
来源: