溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
「眾所周知，視頻可以 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 視頻添加濾鏡內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
