探索 GPUImage 音视频技术（4）：视频处理基础

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

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

GPUImage 通过 OpenGL ES Shader 在 GPU 上完成视频处理，性能远超 CPU。

iPhone 4 实例：Gamma 滤镜单帧耗时

• GPUImage：2.5 ms
• Core Image：106 ms
• CPU：460 ms

1、视频管线模型

可任意链式 / 分支，构建复杂管线。

2、输入源（Sources）

2.1、实时摄像头 GPUImageVideoCamera

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

GPUImageFilter *filter = [[GPUImageSepiaFilter alloc] init];
GPUImageView *preview  = [[GPUImageView alloc] initWithFrame:CGRectMake(0,0,w,h)];

[videoCamera addTarget:filter];   // 摄像头 → 滤镜
[filter addTarget:preview];       // 滤镜 → 屏幕
[videoCamera startCameraCapture];

2.2、本地文件 GPUImageMovie

GPUImageMovie *movieFile = [[GPUImageMovie alloc] initWithURL:movieURL];
GPUImagePixellateFilter *pixFilter = [[GPUImagePixellateFilter alloc] init];

[movieFile addTarget:pixFilter];  // 文件 → 滤镜
[movieFile startProcessing];

3、输出目标（Targets）

3.1、实时预览 GPUImageView

见上方摄像头示例。

3.2、录制文件 GPUImageMovieWriter

NSString *path = [NSHomeDirectory() stringByAppendingPathComponent:@"Documents/Filtered.m4v"];
unlink([path UTF8String]);                      // 删除旧文件
NSURL *outURL    = [NSURL fileURLWithPath:path];

GPUImageMovieWriter *writer =
    [[GPUImageMovieWriter alloc] initWithMovieURL:outURL
                                            size:CGSizeMake(640,480)];

[filter addTarget:writer];                      // 滤镜 → 文件
[writer startRecording];

/* 处理结束回调内 */
[filter removeTarget:writer];
[writer finishRecording];                       // 必须调用，否则文件不完整

4、音频同步

4.1、文件处理

writer.shouldPassthroughAudio = YES;            // 透传音频
movieFile.audioEncodingTarget = writer;
[movieFile enableSynchronizedEncodingUsingMovieWriter:writer];

4.2、摄像头录音

videoCamera.audioEncodingTarget = writer;

5、滤镜链与复杂效果

5.1、链式叠加

GPUImageVideoCamera *cam = [[GPUImageVideoCamera alloc]
    initWithSessionPreset:AVCaptureSessionPreset720p
           cameraPosition:AVCaptureDevicePositionBack];
cam.outputImageOrientation = UIInterfaceOrientationPortrait;

GPUImageGrayscaleFilter *gray  = [[GPUImageGrayscaleFilter alloc] init];
GPUImageBoxBlurFilter   *blur  = [[GPUImageBoxBlurFilter alloc] init];
GPUImageSobelEdgeDetectionFilter *edge = [[GPUImageSobelEdgeDetectionFilter alloc] init];

[cam addTarget:gray];
[gray addTarget:blur];
[blur addTarget:edge];
[edge addTarget:preview];
[cam startCameraCapture];

管线：摄像头 → 灰度 → 模糊 → 边缘 → 屏幕。

6、分支处理：一源多滤镜

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

GPUImageSepiaFilter   *sepia   = [[GPUImageSepiaFilter alloc] init];
GPUImagePixellateFilter *pixel = [[GPUImagePixellateFilter alloc] init];

GPUImageView *sepiaView   = [[GPUImageView alloc] initWithFrame:CGRectMake(0,0,w/2,h)];
GPUImageView *pixelView   = [[GPUImageView alloc] initWithFrame:CGRectMake(w/2,0,w/2,h)];

[cam addTarget:sepia];
[cam addTarget:pixel];
[sepia addTarget:sepiaView];
[pixel addTarget:pixelView];
[cam startCameraCapture];

效果：左右分屏实时展示两种滤镜。

7、性能建议

8、官方示例速览

以上示例位于仓库 examples/目录，可直接运行学习。

9、小结

1. 核心模式：Source → Filter → Target
2. 一行代码即可实现摄像头实时滤镜
3. 链式 / 分支让复杂效果成为可能
4. GPU 加速带来数十倍性能提升

掌握这些基础后，可继续深入自定义 Shader、OpenGL 混合等高级主题。

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