在iOS中給視訊新增濾鏡的方法示例
「眾所周知，視訊可以 P」，今天我們來學習怎麼給視訊新增濾鏡。
在 iOS 中，對視訊進行影象處理一般有兩種方式： GPUImage 和 AVFoundation 。
一、GPUImage
在之前的文章中，我們對 GPUImage 已經有了一定的瞭解。之前一般使用它對攝像頭採集的影象資料進行處理，然而，它對本地視訊的處理也一樣方便。
直接看程式碼：
// movie NSString *path = [[NSBundle mainBundle] pathForResource:@"sample" ofType:@"mp4"]; NSURL *url = [NSURL fileURLWithPath:path]; GPUImageMovie *movie = [[GPUImageMovie alloc] initWithURL:url]; // filter GPUImageSmoothToonFilter *filter = [[GPUImageSmoothToonFilter alloc] init]; // view GPUImageView *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 負責視訊檔案的讀取， GPUImageSmoothToonFilter 負責濾鏡效果處理， GPUImageView 負責最終影象的展示。
通過濾鏡鏈將三者串起來，然後呼叫 GPUImageMovie 的 startProcessing 方法開始處理。
雖然 GPUImage 在使用上簡單，但是存在著 沒有聲音 、 在非主執行緒呼叫 UI 、 匯出檔案麻煩 、 無法進行播放控制 等諸多缺點。
小結：GPUImage 雖然使用很方便，但是存在諸多缺點，不滿足生產環境需要。
二、AVFoundation
1、 AVPlayer 的使用
首先來複習一下 AVPlayer 最簡單的使用方式：
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];
第一步先構建 AVPlayerItem ，然後通過 AVPlayerItem 建立 AVPlayer ，最後通過 AVPlayer 建立 AVPlayerLayer 。
AVPlayerLayer 是 CALayer 的子類，可以把它新增到任意的 Layer 上。當 AVPlayer 呼叫 play 方法時， AVPlayerLayer 上就能將影象渲染出來。
AVPlayer 的使用方式十分簡單。但是，按照上面的方式，最終只能在 AVPlayerLayer 上渲染出最原始的影象。如果我們希望在播放的同時，對原始影象進行處理，則需要修改 AVPlayer 的渲染過程。
2、修改 AVPlayer 的渲染過程
修改 AVPlayer 的渲染過程，要從 AVPlayerItem 下手，主要分為 四步 ：
第一步：自定義 AVVideoCompositing 類
AVVideoCompositing 是一個協議，我們的自定義類要實現這個協議。在這個自定義類中，可以獲取到每一幀的原始影象，進行處理並輸出。
在這個協議中，最關鍵是 startVideoCompositionRequest 方法的實現：
// 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 後輸出，看下這個方法的實現：
// 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;
}
}
在這個方法中，我們通過 trackID 從 AVAsynchronousVideoCompositionRequest 中獲取到 sourcePixelBuffer ，也就是當前幀的原始影象。
然後呼叫 videoCompositionInstruction 的 applyPixelBuffer 方法，將 sourcePixelBuffer 作為輸入，得到處理後的結果 resultPixelBuffer 。也就是說，我們對影象的處理操作，都發生在 applyPixelBuffer 方法中。
在 newRenderdPixelBufferForRequest 這個方法中，我們已經拿到了當前幀的原始影象 sourcePixelBuffer ，其實也可以直接在這個方法中對影象進行處理。
那為什麼還需要把處理操作放在 CustomVideoCompositionInstruction 中呢？
因為在實際渲染的時候，自定義 AVVideoCompositing 類的例項建立是系統內部完成的。也就是說，我們訪問不到最終的 AVVideoCompositing 物件。所以無法進行一些渲染引數的動態修改。而從 AVAsynchronousVideoCompositionRequest 中，可以獲取到 AVVideoCompositionInstruction 物件，所以我們需要自定義 AVVideoCompositionInstruction ，這樣就可以間接地通過修改 AVVideoCompositionInstruction 的屬性，來動態修改渲染引數。
第二步：自定義 AVVideoCompositionInstruction
這個類的關鍵點是 applyPixelBuffer 方法的實現：
// CustomVideoCompositionInstruction.m
- (CVPixelBufferRef)applyPixelBuffer:(CVPixelBufferRef)pixelBuffer {
self.filter.pixelBuffer = pixelBuffer;
CVPixelBufferRef outputPixelBuffer = self.filter.outputPixelBuffer;
CVPixelBufferRetain(outputPixelBuffer);
return outputPixelBuffer;
}
這裡把 OpenGL ES 的處理細節都封裝到了 filter 中。這個類的實現細節可以先忽略，只需要知道它接受 原始的 CVPixelBufferRef ，返回 處理後的 CVPixelBufferRef 。
第三步：構建 AVMutableVideoComposition
構建的程式碼如下：
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;
}
構建 AVMutableVideoComposition 的過程 主要做兩件事情 。
第一件事情，把 videoComposition 的 customVideoCompositorClass 屬性，設定為我們自定義的 CustomVideoCompositing 。
第二件事情，首先通過系統提供的方法 videoCompositionWithPropertiesOfAsset 構建出 AVMutableVideoComposition 物件，然後將它的 instructions 屬性修改為自定義的 CustomVideoCompositionInstruction 型別。（就像「第一步」提到的，後續可以在 CustomVideoCompositing 中，拿到 CustomVideoCompositionInstruction 物件。）
注意：這裡可以把 CustomVideoCompositionInstruction 儲存下來，然後通過修改它的屬性，去修改渲染引數。
第四步：構建 AVPlayerItem
有了 AVMutableVideoComposition 之後，後面的事情就簡單多了。
只需要在建立 AVPlayerItem 的時候，多賦值一個 videoComposition 屬性。
self.playerItem = [[AVPlayerItem alloc] initWithAsset:self.asset]; self.playerItem.videoComposition = self.videoComposition;
這樣，整條鏈路就串起來了， AVPlayer 在播放時，就能在 CustomVideoCompositionInstruction 的 applyPixelBuffer 方法中接收到 原始影象的 CVPixelBufferRef 。
3、應用濾鏡效果
這一步要做的事情是： 在 CVPixelBufferRef 上新增濾鏡效果，並輸出處理後的 CVPixelBufferRef 。
要做到這件事情，有很多種方式。包括但不限定於： OpenGL ES 、 CIImage 、 Metal 、 GPUImage 等。
為了同樣使用前面用到的 GPUImageSmoothToonFilter ，這裡介紹一下 GPUImage 的方式。
關鍵程式碼如下：
- (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 轉成 OpenGL 紋理。
(2)通過 GPUImageTextureInput 來構造濾鏡鏈起點， GPUImageSmoothToonFilter 來新增濾鏡效果， GPUImageTextureOutput 來構造濾鏡鏈終點，最終也是輸出 OpenGL 紋理。
(3)將處理後的 OpenGL 紋理轉化為 CVPixelBufferRef 。
另外，由於 CIImage 使用簡單，也順便提一下用法。
關鍵程式碼如下：
- (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 轉化為 CIImage 。
(2)建立一個帶透明度的 CIImage 。
(3)用系統方法將 CIImage 進行疊加。
(4)將疊加後的 CIImage 轉化為 CVPixelBufferRef 。
4、匯出處理後的視訊
視訊處理完成後，最終都希望能匯出並儲存。
匯出的程式碼也很簡單：
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:^{
// 儲存到相簿
// ...
}];
這裡關鍵的地方在於將 videoComposition 設定為前面構造的 AVMutableVideoComposition 物件，然後設定好輸出路徑和檔案格式後就可以開始匯出。匯出成功後，可以將視訊檔案轉存到相簿中。
小結： AVFoundation 雖然使用比較繁瑣，但是功能強大，可以很方便地匯出視訊處理的結果，是用來做視訊處理的不二之選。
原始碼
請到 GitHub 上檢視完整程式碼。
到此這篇關於在iOS中給視訊新增濾鏡的方法示例的文章就介紹到這了,更多相關iOS 視訊新增濾鏡內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！