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

1.美颜原理

  其实美颜的本质就是美白和磨皮,分别通过提高亮度和模糊像素点进行。我们一般用GPUImage这个开源的图像处理库来实现。视频的本质就是一张张连续的图片,磨皮就是对于图片上的像素点的取值与周边的像素点取值相关联。常见的有高斯模糊和双边滤波(Bilateral Filter)。

  高斯模糊是最常见的一种模糊方式,像素点取值是由周边像素点求加权平均所得,而权重系数则是像素间的距离的高斯函数,大致关系是距离越小、权重系数越大。高斯模糊会导致边缘不清晰。

  双边滤波是有针对点的模糊像素点,能保证边缘不被模糊。

2.GPUImage介绍

  GPUImage 是一个开源的基于GPU的图片或视频的处理框架,其本身内置了多达120多种常见的滤镜效果。有了它,添加实时的滤镜只需要简单地添加几行代码,非常强大。想研究源码的同学上,可以去GitHub上下载。

3.效果



&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下载地址。下载下来运行,发现报错。

  那是因为我没有在工程里上传ijkplayer视屏直播框架,我能上传上去,但下载太慢了,什么原因大家都懂得。我把ijkplayer视屏直播框架放到百度云上了,没有密码,下载下来之后,放到LiveAppDemo-master文件夹里,重新打开就可以运行了。

iOS从零开始学习直播之3.美颜的更多相关文章

  1. iOS从零开始学习直播之2.采集

      直播的采集由采集的设备(摄像头.话筒)不同分为视频采集和音频采集,本篇文章会分别介绍. 1.采集步骤   1.创建捕捉会话(AVCaptureSession),iOS调用相机和话筒之前都需要创建捕 ...

  2. iOS从零开始学习直播之1.播放

      对于直播来说,客户端主要做两件事情,推流和播放.今天先讲播放. 播放流程 1.拉流:服务器已有直播内容,从指定地址进行拉取的过程.其实就是向服务器请求数据. 2.解码:对视屏数据进行解压缩. 3. ...

  3. iOS从零开始学习直播之音频1.播放本地音频文件

      现在直播越来越火,俨然已经成为了下一个红海.作为一个资深码农(我只喜欢这样称呼自己,不喜欢别人这样称呼我),我必须赶上时代的潮流,开始研究视频直播.发现视屏直播类的文章上来就讲拉流.推流.采集.美 ...

  4. iOS从零开始学习直播之音频4.歌词

      上一篇讲了歌曲的切换,这一篇主要讲歌词部分的实现.   先看效果图.当歌手唱到这句歌词时候,我们要标记出来,这里显示字体为黄色. 1.获取歌词   一般歌词都是一个链接.类似于"http ...

  5. iOS从零开始学习直播之音频3.歌曲切换

      上周迟到了,周末去参加OSC源创会了,还是有点启发的.但这不是重点,重点是 上一篇我只是实现了一首歌曲的在线播放,这肯定是不够的.这一篇博客主要是实现了多首歌曲的顺序播放以及上一首和下一首切换. ...

  6. iOS从零开始学习直播之音频2.后台播放和在线播放

    本篇主要讲音频的后台播放和在线播放. 后台播放   上一篇写的工程运行之后程序退至后台,发现运行不了,歌停止了,这显然不行,音乐后台播放是标配啊.今天就来讲一下后台播放. 1.在plist文件里,告诉 ...

  7. 【如何快速的开发一个完整的iOS直播app】(美颜篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...

  8. 【如何快速的开发一个完整的 iOS 直播 app】(美颜篇)

    来源:袁峥Seemygo 链接:http://www.jianshu.com/p/4646894245ba 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播 ...

  9. 从零开始学习CocoaPods安装和使用

    从零开始学习CocoaPods安装和使用   转载: Code4App原创:http://code4app.com/article/cocoapods-install-usage http://m.i ...

随机推荐

  1. 【.net 深呼吸】设置序列化中的最大数据量

    欢迎收看本期的<老周吹牛>节目,由于剧组严重缺钱,故本节目无视频无声音.好,先看下面一个类声明. [DataContract] public class DemoObject { [Dat ...

  2. accept_mutex与性能的关系 (nginx)

    注:运行环境CentOS 6+   背景      在对启动了20个worker的nginx进行压力测试的时候发现:如果把配置文件中event配置块中的accept_mutex开关打开(1.11.3版 ...

  3. 菜鸟Python学习笔记第一天:关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

  4. 04.LoT.UI 前后台通用框架分解系列之——轻巧的弹出框

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  5. AbpZero--1.如何开始

    1.加群 群号:104390185,下载这个文件并解压 用VS2015打开aspnet-zero-1.9.0.1 2.修改Web项目web.config连接字符串 <add name=" ...

  6. Tomcat常见问题及常用命令

    很长时间不用tomcat好多命令都忘记了,所以准备自己记录下来,以便参考.刚好也希望可以开始养成记博客的好习惯. 1.查看java的版本号 进入java的安装目录后,使用命令:java -versio ...

  7. 如何理解MySQL中auto_increment?

    1.auto_increment用于主键自动增长.比如从1开始增长,当把第一条数据删除,再插入第二条数据时,主键值为2,不是1.

  8. Tomcat 部署我的第一个程序

    idea 生成war包.先双击clean,再双击package.生成成功之后就会产生war包. 第二步:将生成好的war文件复制到tomcat文件夹下. 第三步:配置tomcat的server.xml ...

  9. SQLServer2005创建定时作业任务

    SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...

  10. BZOJ 2119: 股市的预测 [后缀数组 ST表]

    2119: 股市的预测 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 331  Solved: 153[Submit][Status][Discuss ...