来源
【如何快速的开发一个完整的iOS直播app】(美颜篇)
利用GPUImage处理直播过程中美颜的流程
- 采集视频 => 获取每一帧图片 => 滤镜处理 => GPUImageView展示
304825-5faefe55f9296071.png
GPU : Graphic Processor Unit图形处理单元）手机或者电脑用于图像处理和渲染的硬件
GPU工作原理 : 采集数据-> 存入主内存(RAM) -> CPU(计算处理) -> 存入显存(VRAM) -> GPU(完成图像渲染) -> 帧缓冲区 -> 显示器
304825-67fd2250df30924d.jpg
GPUImage处理画面原理
- GPUImage采用链式方式来处理画面,通过addTarget:方法为链条添加每个环节的对象，处理完一个target,就会把上一个环节处理好的图像数据传递下一个target去处理，称为GPUImage处理链。
- 一般的target可分为两类
-
中间环节的target, 一般是各种filter, 是GPUImageFilter或者是子类. -
最终环节的target, GPUImageView：用于显示到屏幕上, 或者GPUImageMovieWriter：写成视频文件。
-
- 一般的target可分为两类
- GPUImage处理主要分为3个环节
source(视频、图片源) -> filter（滤镜） -> final target (处理后视频、图片)-
GPUImaged的Source:都继承GPUImageOutput的子类，作为GPUImage的数据源,就好比外界的光线，作为眼睛的输出源-
GPUImageVideoCamera：用于实时拍摄视频 -
GPUImageStillCamera：用于实时拍摄照片 -
GPUImagePicture：用于处理已经拍摄好的图片，比如png,jpg图片 -
GPUImageMovie：用于处理已经拍摄好的视频,比如mp4文件
-
-
GPUImage的filter:GPUimageFilter类或者子类，这个类继承自GPUImageOutput,并且遵守GPUImageInput协议，这样既能流进，又能流出，就好比我们的墨镜，光线通过墨镜的处理，最终进入我们眼睛 -
GPUImage的finaltarget:GPUImageView,GPUImageMovieWriter就好比我们眼睛，最终输入目标。
304825-84ff54fb516a70ce.png
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];
}
}
如何拿到美颜后的data数据呢
GPUImage 也是使用的系统的avcapture, 所以数据的接受也是
- (void) captureOutput:(AVCaptureOutput *)captureOutput didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection;方法，
在这个方法中，做了添加滤镜的处理。其中newFrameReadyAtTime：atIndex:方法是每个target都要调的方法，因为GPUImage采用的是链式方式处理画面，最后一个target是GPUImageRawDataOutput，所以在GPUImageRawDataOutput的newFrameReadyAtTime方法中可以拿到处理后的数据，接下来就可以进行编码等下一步操作了
