探索 GPUImage 音视频技术（2）：快速入门

这个系列文章我们来介绍一位海外工程师如何探索 GPUImage 音视频技术，对于想要开始学习音视频技术的朋友，这些文章是份不错的入门资料，本篇介绍 GPUImage 快速入门。

——来自公众号“关键帧Keyframe”的分享

GPUImage 是一个专为 iOS / macOS 设计的 GPU 加速图像与视频处理框架。只需少量代码即可实现：

• 静态图片滤镜
• 实时摄像头滤镜
• 视频文件滤镜

在 iPhone 等设备上，GPUImage 可比 CPU 提速 40–100×，轻松实现实时视频特效。

1、安装

必需系统框架

• CoreMedia
• CoreVideo
• OpenGLES
• AVFoundation
• QuartzCore

2、基础用法

2.1、静态图片加滤镜

2.1.1、写法 A：显式链式（可扩展）

#import "GPUImage.h"

UIImage *inputImage = [UIImage imageNamed:@"sample.jpg"];

GPUImagePicture *stillImageSource = [[GPUImagePicture alloc] initWithImage:inputImage];
GPUImageSepiaFilter *sepiaFilter   = [[GPUImageSepiaFilter alloc] init];

[stillImageSource addTarget:sepiaFilter];
[sepiaFilter useNextFrameForImageCapture];
[stillImageSource processImage];

UIImage *filteredImage = [sepiaFilter imageFromCurrentFramebuffer];

2.1.2、写法 B：一行搞定

GPUImageSepiaFilter *filter = [[GPUImageSepiaFilter alloc] init];
UIImage *filteredImage      = [filter imageByFilteringImage:inputImage];

2.2、实时摄像头滤镜

GPUImageVideoCamera *videoCamera =
    [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPreset640x480
                                        cameraPosition:AVCaptureDevicePositionBack];
videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;

GPUImageFilter *filter    = [[GPUImageSepiaFilter alloc] init];
GPUImageView *filterView  = [[GPUImageView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:filterView];

[videoCamera addTarget:filter];
[filter addTarget:filterView];

[videoCamera startCameraCapture];     // Camera → Filter → Display

2.3、视频文件加滤镜并导出

NSURL *sampleURL = [[NSBundle mainBundle] URLForResource:@"sample" withExtension:@"mp4"];
GPUImageMovie *movieFile = [[GPUImageMovie alloc] initWithURL:sampleURL];

GPUImagePixellateFilter *pixellateFilter = [[GPUImagePixellateFilter alloc] init];
[movieFile addTarget:pixellateFilter];

NSString *pathToMovie = [NSHomeDirectory() stringByAppendingPathComponent:@"Documents/FilteredMovie.mp4"];
NSURL *movieURL       = [NSURL fileURLWithPath:pathToMovie];
GPUImageMovieWriter *movieWriter =
    [[GPUImageMovieWriter alloc] initWithMovieURL:movieURL size:CGSizeMake(640, 480)];

[pixellateFilter addTarget:movieWriter];

// 如需保留音频
movieWriter.shouldPassthroughAudio = YES;
movieFile.audioEncodingTarget      = movieWriter;
[movieFile enableSynchronizedEncodingUsingMovieWriter:movieWriter];

[movieWriter startRecording];
[movieFile startProcessing];

// 完成后回调
[pixellateFilter removeTarget:movieWriter];
[movieWriter finishRecording];

2.4、拍照并实时加滤镜

GPUImageStillCamera *stillCamera = [[GPUImageStillCamera alloc] init];
stillCamera.outputImageOrientation = UIInterfaceOrientationPortrait;

GPUImageFilter *filter = [[GPUImageGammaFilter alloc] init];
[stillCamera addTarget:filter];

GPUImageView *filterView = (GPUImageView *)self.view;
[filter addTarget:filterView];

[stillCamera startCameraCapture];

// 拍照
[stillCamera capturePhotoProcessedUpToFilter:filter
                         withCompletionHandler:^(UIImage *processedImage, NSError *error) {
    if (!error) {
        UIImageWriteToSavedPhotosAlbum(processedImage, nil, nil, nil);
    }
}];

3、滤镜链（Filter Chaining）

将多个滤镜串成流水线：

GPUImageVideoCamera *videoCamera = [[GPUImageVideoCamera alloc] initWithSessionPreset:AVCaptureSessionPreset640x480
                                                                    cameraPosition:AVCaptureDevicePositionBack];

GPUImageSepiaFilter *sepiaFilter     = [[GPUImageSepiaFilter alloc] init];
GPUImageVignetteFilter *vignetteFilter = [[GPUImageVignetteFilter alloc] init];
GPUImageView *filterView             = [[GPUImageView alloc] initWithFrame:self.view.bounds];

[videoCamera addTarget:sepiaFilter];
[sepiaFilter addTarget:vignetteFilter];
[vignetteFilter addTarget:filterView];

[videoCamera startCameraCapture];   // Camera → Sepia → Vignette → Display

4、继续探索

1. 体验 125+ 内置滤镜
   • 色彩：亮度 / 对比度 / 饱和度
   • 混合模式
   • 视觉：像素化、暗角、移轴
   • 计算机视觉：边缘检测、人脸识别
2. 跑官方示例
   • FilterShowcase：全部滤镜演示
   • SimpleVideoFilter：实时视频滤镜
   • BenchmarkSuite：与 CPU 性能对比
3. 自定义滤镜：编写 GLSL Shader 扩展 GPUImage 功能。

学习和提升音视频开发技术，推荐你加入我们的知识星球：【关键帧的音视频开发圈】，加入后你就能：

• 下载 30+ 个开箱即用的「音视频及渲染 Demo 源代码」
• 下载包含 500+ 知识条目的完整版「音视频知识图谱」
• 下载包含 200+ 题目的完整版「音视频面试题集锦」
• 技术和职业发展咨询 100% 得到回答
• 获得简历优化建议和大厂内推