「眾所周知，視頻可以 P」，今天我們來學(xué)習(xí)怎么給視頻添加濾鏡。

在 iOS 中，對(duì)視頻進(jìn)行圖像處理一般有兩種方式： GPUImage 和 AVFoundation 。

一、GPUImage

在之前的文章中，我們對(duì) GPUImage 已經(jīng)有了一定的了解。之前一般使用它對(duì)攝像頭采集的圖像數(shù)據(jù)進(jìn)行處理，然而，它對(duì)本地視頻的處理也一樣方便。

直接看代碼：

// movieNSString *path = [[NSBundle mainBundle] pathForResource:@'sample' ofType:@'mp4'];NSURL *url = [NSURL fileURLWithPath:path];GPUImageMovie *movie = [[GPUImageMovie alloc] initWithURL:url];// filterGPUImageSmoothToonFilter *filter = [[GPUImageSmoothToonFilter alloc] init];// viewGPUImageView *imageView = [[GPUImageView alloc] initWithFrame:CGRectMake(0, 80, self.view.frame.size.width, self.view.frame.size.width)];[self.view addSubview:imageView];// chain[movie addTarget:filter];[filter addTarget:imageView];// processing[movie startProcessing];

核心代碼一共就幾行。 GPUImageMovie 負(fù)責(zé)視頻文件的讀取， GPUImageSmoothToonFilter 負(fù)責(zé)濾鏡效果處理， GPUImageView 負(fù)責(zé)最終圖像的展示。

通過濾鏡鏈將三者串起來，然后調(diào)用 GPUImageMovie 的 startProcessing 方法開始處理。

雖然 GPUImage 在使用上簡(jiǎn)單，但是存在著 沒有聲音 、 在非主線程調(diào)用 UI 、 導(dǎo)出文件麻煩 、 無(wú)法進(jìn)行播放控制 等諸多缺點(diǎn)。

小結(jié)：GPUImage 雖然使用很方便，但是存在諸多缺點(diǎn)，不滿足生產(chǎn)環(huán)境需要。

二、AVFoundation

1、 AVPlayer 的使用

首先來復(fù)習(xí)一下 AVPlayer 最簡(jiǎn)單的使用方式：

NSURL *url = [[NSBundle mainBundle] URLForResource:@'sample' withExtension:@'mp4'];AVURLAsset *asset = [AVURLAsset assetWithURL:url];AVPlayerItem *playerItem = [[AVPlayerItem alloc] initWithAsset:asset]; AVPlayer *player = [[AVPlayer alloc] initWithPlayerItem:playerItem];AVPlayerLayer *playerLayer = [AVPlayerLayer playerLayerWithPlayer:player];

第一步先構(gòu)建 AVPlayerItem ，然后通過 AVPlayerItem 創(chuàng)建 AVPlayer ，最后通過 AVPlayer 創(chuàng)建 AVPlayerLayer 。

AVPlayerLayer 是 CALayer 的子類，可以把它添加到任意的 Layer 上。當(dāng) AVPlayer 調(diào)用 play 方法時(shí)， AVPlayerLayer 上就能將圖像渲染出來。

AVPlayer 的使用方式十分簡(jiǎn)單。但是，按照上面的方式，最終只能在 AVPlayerLayer 上渲染出最原始的圖像。如果我們希望在播放的同時(shí)，對(duì)原始圖像進(jìn)行處理，則需要修改 AVPlayer 的渲染過程。

2、修改 AVPlayer 的渲染過程

修改 AVPlayer 的渲染過程，要從 AVPlayerItem 下手，主要分為 四步 ：

第一步：自定義 AVVideoCompositing 類

AVVideoCompositing 是一個(gè)協(xié)議，我們的自定義類要實(shí)現(xiàn)這個(gè)協(xié)議。在這個(gè)自定義類中，可以獲取到每一幀的原始圖像，進(jìn)行處理并輸出。

在這個(gè)協(xié)議中，最關(guān)鍵是 startVideoCompositionRequest 方法的實(shí)現(xiàn)：

// CustomVideoCompositing.m- (void)startVideoCompositionRequest:(AVAsynchronousVideoCompositionRequest *)asyncVideoCompositionRequest { dispatch_async(self.renderingQueue, ^{ @autoreleasepool { if (self.shouldCancelAllRequests) {[asyncVideoCompositionRequest finishCancelledRequest]; } else {CVPixelBufferRef resultPixels = [self newRenderdPixelBufferForRequest:asyncVideoCompositionRequest];if (resultPixels) { [asyncVideoCompositionRequest finishWithComposedVideoFrame:resultPixels]; CVPixelBufferRelease(resultPixels);} else { // print error} } } });}

通過 newRenderdPixelBufferForRequest 方法從 AVAsynchronousVideoCompositionRequest 中獲取到處理后的 CVPixelBufferRef 后輸出，看下這個(gè)方法的實(shí)現(xiàn)：

// CustomVideoCompositing.m- (CVPixelBufferRef)newRenderdPixelBufferForRequest:(AVAsynchronousVideoCompositionRequest *)request { CustomVideoCompositionInstruction *videoCompositionInstruction = (CustomVideoCompositionInstruction *)request.videoCompositionInstruction; NSArray<AVVideoCompositionLayerInstruction *> *layerInstructions = videoCompositionInstruction.layerInstructions; CMPersistentTrackID trackID = layerInstructions.firstObject.trackID; CVPixelBufferRef sourcePixelBuffer = [request sourceFrameByTrackID:trackID]; CVPixelBufferRef resultPixelBuffer = [videoCompositionInstruction applyPixelBuffer:sourcePixelBuffer]; if (!resultPixelBuffer) { CVPixelBufferRef emptyPixelBuffer = [self createEmptyPixelBuffer]; return emptyPixelBuffer; } else { return resultPixelBuffer; }}

在這個(gè)方法中，我們通過 trackID 從 AVAsynchronousVideoCompositionRequest 中獲取到 sourcePixelBuffer ，也就是當(dāng)前幀的原始圖像。

然后調(diào)用 videoCompositionInstruction 的 applyPixelBuffer 方法，將 sourcePixelBuffer 作為輸入，得到處理后的結(jié)果 resultPixelBuffer 。也就是說，我們對(duì)圖像的處理操作，都發(fā)生在 applyPixelBuffer 方法中。

在 newRenderdPixelBufferForRequest 這個(gè)方法中，我們已經(jīng)拿到了當(dāng)前幀的原始圖像 sourcePixelBuffer ，其實(shí)也可以直接在這個(gè)方法中對(duì)圖像進(jìn)行處理。

那為什么還需要把處理操作放在 CustomVideoCompositionInstruction 中呢？

因?yàn)樵趯?shí)際渲染的時(shí)候，自定義 AVVideoCompositing 類的實(shí)例創(chuàng)建是系統(tǒng)內(nèi)部完成的。也就是說，我們?cè)L問不到最終的 AVVideoCompositing 對(duì)象。所以無(wú)法進(jìn)行一些渲染參數(shù)的動(dòng)態(tài)修改。而從 AVAsynchronousVideoCompositionRequest 中，可以獲取到 AVVideoCompositionInstruction 對(duì)象，所以我們需要自定義 AVVideoCompositionInstruction ，這樣就可以間接地通過修改 AVVideoCompositionInstruction 的屬性，來動(dòng)態(tài)修改渲染參數(shù)。

第二步：自定義 AVVideoCompositionInstruction

這個(gè)類的關(guān)鍵點(diǎn)是 applyPixelBuffer 方法的實(shí)現(xiàn)：

// CustomVideoCompositionInstruction.m- (CVPixelBufferRef)applyPixelBuffer:(CVPixelBufferRef)pixelBuffer { self.filter.pixelBuffer = pixelBuffer; CVPixelBufferRef outputPixelBuffer = self.filter.outputPixelBuffer; CVPixelBufferRetain(outputPixelBuffer); return outputPixelBuffer;}

這里把 OpenGL ES 的處理細(xì)節(jié)都封裝到了 filter 中。這個(gè)類的實(shí)現(xiàn)細(xì)節(jié)可以先忽略，只需要知道它接受 原始的 CVPixelBufferRef ，返回 處理后的 CVPixelBufferRef 。

第三步：構(gòu)建 AVMutableVideoComposition

構(gòu)建的代碼如下：

self.videoComposition = [self createVideoCompositionWithAsset:self.asset];self.videoComposition.customVideoCompositorClass = [CustomVideoCompositing class];- (AVMutableVideoComposition *)createVideoCompositionWithAsset:(AVAsset *)asset { AVMutableVideoComposition *videoComposition = [AVMutableVideoComposition videoCompositionWithPropertiesOfAsset:asset]; NSArray *instructions = videoComposition.instructions; NSMutableArray *newInstructions = [NSMutableArray array]; for (AVVideoCompositionInstruction *instruction in instructions) { NSArray *layerInstructions = instruction.layerInstructions; // TrackIDs NSMutableArray *trackIDs = [NSMutableArray array]; for (AVVideoCompositionLayerInstruction *layerInstruction in layerInstructions) { [trackIDs addObject:@(layerInstruction.trackID)]; } CustomVideoCompositionInstruction *newInstruction = [[CustomVideoCompositionInstruction alloc] initWithSourceTrackIDs:trackIDs timeRange:instruction.timeRange]; newInstruction.layerInstructions = instruction.layerInstructions; [newInstructions addObject:newInstruction]; } videoComposition.instructions = newInstructions; return videoComposition;}

構(gòu)建 AVMutableVideoComposition 的過程 主要做兩件事情 。

第一件事情，把 videoComposition 的 customVideoCompositorClass 屬性，設(shè)置為我們自定義的 CustomVideoCompositing 。

第二件事情，首先通過系統(tǒng)提供的方法 videoCompositionWithPropertiesOfAsset 構(gòu)建出 AVMutableVideoComposition 對(duì)象，然后將它的 instructions 屬性修改為自定義的 CustomVideoCompositionInstruction 類型。（就像「第一步」提到的，后續(xù)可以在 CustomVideoCompositing 中，拿到 CustomVideoCompositionInstruction 對(duì)象。）

注意：這里可以把 CustomVideoCompositionInstruction 保存下來，然后通過修改它的屬性，去修改渲染參數(shù)。

第四步：構(gòu)建 AVPlayerItem

有了 AVMutableVideoComposition 之后，后面的事情就簡(jiǎn)單多了。

只需要在創(chuàng)建 AVPlayerItem 的時(shí)候，多賦值一個(gè) videoComposition 屬性。

self.playerItem = [[AVPlayerItem alloc] initWithAsset:self.asset];self.playerItem.videoComposition = self.videoComposition;

這樣，整條鏈路就串起來了， AVPlayer 在播放時(shí)，就能在 CustomVideoCompositionInstruction 的 applyPixelBuffer 方法中接收到 原始圖像的 CVPixelBufferRef 。

3、應(yīng)用濾鏡效果

這一步要做的事情是： 在 CVPixelBufferRef 上添加濾鏡效果，并輸出處理后的 CVPixelBufferRef 。

要做到這件事情，有很多種方式。包括但不限定于： OpenGL ES 、 CIImage 、 Metal 、 GPUImage 等。

為了同樣使用前面用到的 GPUImageSmoothToonFilter ，這里介紹一下 GPUImage 的方式。

關(guān)鍵代碼如下：

- (CVPixelBufferRef)renderByGPUImage:(CVPixelBufferRef)pixelBuffer { CVPixelBufferRetain(pixelBuffer); __block CVPixelBufferRef output = nil; runSynchronouslyOnVideoProcessingQueue(^{ [GPUImageContext useImageProcessingContext];// (1) GLuint textureID = [self.pixelBufferHelper convertYUVPixelBufferToTexture:pixelBuffer]; CGSize size = CGSizeMake(CVPixelBufferGetWidth(pixelBuffer), CVPixelBufferGetHeight(pixelBuffer));[GPUImageContext setActiveShaderProgram:nil]; // (2) GPUImageTextureInput *textureInput = [[GPUImageTextureInput alloc] initWithTexture:textureID size:size]; GPUImageSmoothToonFilter *filter = [[GPUImageSmoothToonFilter alloc] init]; [textureInput addTarget:filter]; GPUImageTextureOutput *textureOutput = [[GPUImageTextureOutput alloc] init]; [filter addTarget:textureOutput]; [textureInput processTextureWithFrameTime:kCMTimeZero];// (3) output = [self.pixelBufferHelper convertTextureToPixelBuffer:textureOutput.texture textureSize:size];[textureOutput doneWithTexture];glDeleteTextures(1, &textureID); }); CVPixelBufferRelease(pixelBuffer); return output;}

(1)一開始讀入的視頻幀是 YUV 格式的，首先把 YUV 格式的 CVPixelBufferRef 轉(zhuǎn)成 OpenGL 紋理。

(2)通過 GPUImageTextureInput 來構(gòu)造濾鏡鏈起點(diǎn)， GPUImageSmoothToonFilter 來添加濾鏡效果， GPUImageTextureOutput 來構(gòu)造濾鏡鏈終點(diǎn)，最終也是輸出 OpenGL 紋理。

(3)將處理后的 OpenGL 紋理轉(zhuǎn)化為 CVPixelBufferRef 。

另外，由于 CIImage 使用簡(jiǎn)單，也順便提一下用法。

關(guān)鍵代碼如下：

- (CVPixelBufferRef)renderByCIImage:(CVPixelBufferRef)pixelBuffer { CVPixelBufferRetain(pixelBuffer); CGSize size = CGSizeMake(CVPixelBufferGetWidth(pixelBuffer), CVPixelBufferGetHeight(pixelBuffer)); // (1) CIImage *image = [[CIImage alloc] initWithCVPixelBuffer:pixelBuffer]; // (2) CIImage *filterImage = [CIImage imageWithColor:[CIColor colorWithRed:255.0 / 255 green:245.0 / 255 blue:215.0 / 255 alpha:0.1]]; // (3) image = [filterImage imageByCompositingOverImage:image]; // (4) CVPixelBufferRef output = [self.pixelBufferHelper createPixelBufferWithSize:size]; [self.context render:image toCVPixelBuffer:output]; CVPixelBufferRelease(pixelBuffer); return output;}

(1)將 CVPixelBufferRef 轉(zhuǎn)化為 CIImage 。

(2)創(chuàng)建一個(gè)帶透明度的 CIImage 。

(3)用系統(tǒng)方法將 CIImage 進(jìn)行疊加。

(4)將疊加后的 CIImage 轉(zhuǎn)化為 CVPixelBufferRef 。

4、導(dǎo)出處理后的視頻

視頻處理完成后，最終都希望能導(dǎo)出并保存。

導(dǎo)出的代碼也很簡(jiǎn)單：

self.exportSession = [[AVAssetExportSession alloc] initWithAsset:self.asset presetName:AVAssetExportPresetHighestQuality];self.exportSession.videoComposition = self.videoComposition;self.exportSession.outputFileType = AVFileTypeMPEG4;self.exportSession.outputURL = [NSURL fileURLWithPath:self.exportPath];[self.exportSession exportAsynchronouslyWithCompletionHandler:^{ // 保存到相冊(cè) // ...}];

這里關(guān)鍵的地方在于將 videoComposition 設(shè)置為前面構(gòu)造的 AVMutableVideoComposition 對(duì)象，然后設(shè)置好輸出路徑和文件格式后就可以開始導(dǎo)出。導(dǎo)出成功后，可以將視頻文件轉(zhuǎn)存到相冊(cè)中。

小結(jié)： AVFoundation 雖然使用比較繁瑣，但是功能強(qiáng)大，可以很方便地導(dǎo)出視頻處理的結(jié)果，是用來做視頻處理的不二之選。

源碼

請(qǐng)到 GitHub 上查看完整代碼。

到此這篇關(guān)于在iOS中給視頻添加濾鏡的方法示例的文章就介紹到這了,更多相關(guān)iOS 視頻添加濾鏡內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！