GPUImage美颜

来源
【如何快速的开发一个完整的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：写成视频文件。
• 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方法中可以拿到处理后的数据，接下来就可以进行编码等下一步操作了