本文介紹了如何使用 GPUImage 來實現(xiàn)一個簡單的相機。具體功能包括拍照敌卓、錄制視頻瘟檩、多段視頻合成抹缕、實時美顏、自定義濾鏡實現(xiàn)等墨辛。
前言
AVFoundation 是蘋果提供的用于處理基于時間的媒體數(shù)據(jù)的一個框架卓研。我們想要實現(xiàn)一個相機,需要從手機攝像頭采集數(shù)據(jù),離不開這個框架的支持奏赘。GPUImage 對 AVFoundation 做了一些封裝寥闪,使我們的采集工作變得十分簡單。
另外磨淌,GPUImage 的核心魅力還在于疲憋,它封裝了一個鏈路結(jié)構(gòu)的圖像數(shù)據(jù)處理流程,簡稱濾鏡鏈梁只。濾鏡鏈的結(jié)構(gòu)使得多層濾鏡的疊加功能變得很容易實現(xiàn)缚柳。
在下面介紹的功能中,有一些和 GPUImage 本身的關(guān)系并不大搪锣,我們是直接調(diào)用 AVFoundation 的 API 來實現(xiàn)的秋忙。但是,這些功能也是一個相機應用必不可少的一部分构舟。所以灰追,我們也會簡單講一下每個功能的實現(xiàn)方式和注意事項。
濾鏡鏈簡介
在 GPUImage 中旁壮,對圖像數(shù)據(jù)的處理都是通過建立濾鏡鏈來實現(xiàn)的监嗜。
這里就涉及到了一個類 GPUImageOutput
和一個協(xié)議 GPUImageInput
。對于繼承了 GPUImageOutput
的類抡谐,可以理解為具備輸出圖像數(shù)據(jù)的能力裁奇;對于實現(xiàn)了 GPUImageInput
協(xié)議的類,可以理解為具備接收圖像數(shù)據(jù)輸入的能力麦撵。
顧名思義刽肠,濾鏡鏈作為一個鏈路,具有起點和終點免胃。根據(jù)前面的描述音五,濾鏡鏈的起點應該只繼承了 GPUImageOutput
類,濾鏡鏈的終點應該只實現(xiàn)了 GPUImageInput
協(xié)議羔沙,而對于中間的結(jié)點應該同時繼承了 GPUImageOutput
類并實現(xiàn)了 GPUImageInput
協(xié)議躺涝,這樣才具備承上啟下的作用。
一扼雏、濾鏡鏈起點
在 GPUImage 中坚嗜,只繼承了 GPUImageOutput
,而沒有實現(xiàn) GPUImageInput
協(xié)議的類有六個诗充,也就是說有六種類型的輸入源:
1苍蔬、GPUImagePicture
GPUImagePicture
通過圖片來初始化,本質(zhì)上是先將圖片轉(zhuǎn)化為 CGImageRef
蝴蜓,然后將 CGImageRef
轉(zhuǎn)化為紋理碟绑。
2俺猿、GPUImageRawDataInput
GPUImageRawDataInput
通過二進制數(shù)據(jù)初始化,然后將二進制數(shù)據(jù)轉(zhuǎn)化為紋理格仲,在初始化的時候需要指明數(shù)據(jù)的格式(GPUPixelFormat
)押袍。
3、GPUImageTextureInput
GPUImageTextureInput
通過已經(jīng)存在的紋理來初始化抓狭。既然紋理已經(jīng)存在伯病,在初始化的時候就不會重新去生成,只是將紋理的索引保存下來否过。
4、GPUImageUIElement
GPUImageUIElement
可以通過 UIView
或者 CALayer
來初始化惭蟋,最后都是調(diào)用 CALayer
的 renderInContext:
方法苗桂,將當前顯示的內(nèi)容繪制到 CoreGraphics 的上下文中,從而獲取圖像數(shù)據(jù)告组。然后將數(shù)據(jù)轉(zhuǎn)化為紋理煤伟。簡單來說就是截屏,截取當前控件的內(nèi)容木缝。
這個類可以用來實現(xiàn)在視頻上添加文字水印的功能便锨。因為在 OpenGL 中不能直接進行文本的繪制,所以如果我們想把一個 UILabel
的內(nèi)容添加到濾鏡鏈里面去我碟,使用 GPUImageUIElement
來實現(xiàn)是很合適的放案。
5、GPUImageMovie
GPUImageMovie
通過本地的視頻來初始化矫俺。首先通過 AVAssetReader
來逐幀讀取視頻吱殉,然后將幀數(shù)據(jù)轉(zhuǎn)化為紋理,具體的流程大概是:AVAssetReaderOutput
-> CMSampleBufferRef
-> CVImageBufferRef
-> CVOpenGLESTextureRef
-> Texture
厘托。
6友雳、GPUImageVideoCamera
GPUImageVideoCamera
通過相機參數(shù)來初始化,通過屏幕比例和相機位置(前后置) 來初始化相機铅匹。這里主要使用 AVCaptureVideoDataOutput
來獲取持續(xù)的視頻流數(shù)據(jù)輸出押赊,在代理方法 captureOutput:didOutputSampleBuffer:fromConnection:
中可以拿到 CMSampleBufferRef
,將其轉(zhuǎn)化為紋理的過程與 GPUImageMovie
類似包斑。
然而流礁,我們在項目中使用的是它的子類 GPUImageStillCamera
。 GPUImageStillCamera
在原來的基礎上多了一個 AVCaptureStillImageOutput
舰始,它是我們實現(xiàn)拍照功能的關(guān)鍵崇棠,在 captureStillImageAsynchronouslyFromConnection:completionHandler:
方法的回調(diào)中,同樣能拿到我們熟悉 CMSampleBufferRef
丸卷。
簡單來說枕稀,GPUImageVideoCamera
只能錄制視頻,GPUImageStillCamera
還可以拍照, 因此我們使用 GPUImageStillCamera
萎坷。
二凹联、濾鏡
濾鏡鏈的關(guān)鍵角色是 GPUImageFilter
,它同時繼承了 GPUImageOutput
類并實現(xiàn)了 GPUImageInput
協(xié)議哆档。GPUImageFilter
實現(xiàn)承上啟下功能的基礎是「渲染到紋理」蔽挠,這個操作我們在 《使用 iOS OpenGL ES 實現(xiàn)長腿功能》 一文中已經(jīng)介紹過了,簡單來說就是將結(jié)果渲染到紋理而不是屏幕上瓜浸。
這樣澳淑,每一個濾鏡都能把輸出的紋理作為下一個濾鏡的輸入,實現(xiàn)多層濾鏡效果的疊加插佛。
三杠巡、濾鏡鏈終點
在 GPUImage 中,實現(xiàn)了 GPUImageInput
協(xié)議雇寇,而沒有繼承 GPUImageOutput
的類有四個:
1氢拥、GPUImageMovieWriter
GPUImageMovieWriter
封裝了 AVAssetWriter
,可以逐幀從幀緩存的渲染結(jié)果中讀取數(shù)據(jù)锨侯,最后通過 AVAssetWriter
將視頻文件保存到指定的路徑嫩海。
2、GPUImageRawDataOutput
GPUImageRawDataOutput
通過 rawBytesForImage
屬性囚痴,可以獲取到當前輸入紋理的二進制數(shù)據(jù)叁怪。
假設我們的濾鏡鏈在輸入源和終點之間,連接了三個濾鏡渡讼,而我們需要拿到第二個濾鏡渲染后的數(shù)據(jù)骂束,用來做人臉識別。那我們可以在第二個濾鏡后面再添加一個 GPUImageRawDataOutput
作為輸出成箫,則可以拿到對應的二進制數(shù)據(jù)展箱,且不會影響原來的渲染流程。
3蹬昌、GPUImageTextureOutput
這個類的實現(xiàn)十分簡單混驰,提供協(xié)議方法 newFrameReadyFromTextureOutput:
,在每一幀渲染結(jié)束后皂贩,將自身返回栖榨,通過 texture
屬性就可以拿到輸入紋理的索引。
4明刷、GPUImageView
GPUImageView
繼承自 UIView
婴栽,通過輸入的紋理,執(zhí)行一遍渲染流程辈末。這次的渲染目標不是新的紋理愚争,而是自身的 layer
映皆。
這個類是我們實現(xiàn)相機功能的重要組成部分,我們所有的濾鏡效果轰枝,都要依靠它來呈現(xiàn)捅彻。
功能實現(xiàn)
一、拍照
拍照功能只需調(diào)用一個接口就能搞定鞍陨,在回調(diào)方法中可以直接拿到 UIImage
薯蝎。代碼如下:
- (void)takePhotoWtihCompletion:(TakePhotoResult)completion {
GPUImageFilter *lastFilter = self.currentFilterHandler.lastFilter;
[self.camera capturePhotoAsImageProcessedUpToFilter:lastFilter withCompletionHandler:^(UIImage *processedImage, NSError *error) {
if (error && completion) {
completion(nil, error);
return;
}
if (completion) {
completion(processedImage, nil);
}
}];
}
值得注意的是肤频,相機的預覽頁面由 GPUImageView
承載,顯示的是整個濾鏡鏈作用的結(jié)果尉共。而我們的拍照接口却紧,可以傳入這個鏈路上的任意一個濾鏡钦扭,甚至可以在后面多加一個濾鏡兔乞,然后拍照接口會返回對應濾鏡的渲染結(jié)果传透。即我們的拍照結(jié)果不一定要和我們的預覽一致。
示意圖如下:
二韧衣、錄制視頻
1、單段錄制
錄制視頻首先要創(chuàng)建一個 GPUImageMovieWriter
作為鏈路的輸出购桑,與上面的拍照接口類似畅铭,這里錄制的視頻不一定和我們的預覽一樣。
整個過程比較簡單勃蜘,當我們調(diào)用停止錄制的接口并回調(diào)之后硕噩,視頻就被保存到我們指定的路徑了。
- (void)setupMovieWriter {
NSString *videoPath = [SCFileHelper randomFilePathInTmpWithSuffix:@".m4v"];
NSURL *videoURL = [NSURL fileURLWithPath:videoPath];
CGSize videoSize = self.videoSize;
self.movieWriter = [[GPUImageMovieWriter alloc] initWithMovieURL:videoURL
size:videoSize];
GPUImageFilter *lastFilter = self.currentFilterHandler.lastFilter;
[lastFilter addTarget:self.movieWriter];
self.camera.audioEncodingTarget = self.movieWriter;
self.movieWriter.shouldPassthroughAudio = YES;
self.currentTmpVideoPath = videoPath;
}
- (void)recordVideo {
[self setupMovieWriter];
[self.movieWriter startRecording];
}
- (void)stopRecordVideoWithCompletion:(RecordVideoResult)completion {
@weakify(self);
[self.movieWriter finishRecordingWithCompletionHandler:^{
@strongify(self);
[self removeMovieWriter];
if (completion) {
completion(self.currentTmpVideoPath);
}
}];
}
2缭贡、多段錄制
在 GPUImage
中并沒有提供多段錄制的功能炉擅,需要我們自己去實現(xiàn)。
首先阳惹,我們要重復單段視頻的錄制過程谍失,這樣我們就有了多段視頻的文件路徑。然后主要實現(xiàn)兩個功能莹汤,一個是 AVPlayer
的多段視頻循環(huán)播放快鱼;另一個是通過 AVComposition
來合并多段視頻,并用 AVAssetExportSession
來導出新的視頻纲岭。
整個過程邏輯并不復雜抹竹,出于篇幅的考慮,代碼就不貼了止潮,請到項目中查看窃判。
三、保存
在拍照或者錄視頻結(jié)束后喇闸,通過 PhotoKit
保存到相冊里袄琳。
1询件、保存圖片
- (void)writeImageToSavedPhotosAlbum:(UIImage *)image
completion:(void (^)(BOOL success))completion {
[[PHPhotoLibrary sharedPhotoLibrary] performChanges:^{
[PHAssetChangeRequest creationRequestForAssetFromImage:image];
} completionHandler:^(BOOL success, NSError * _Nullable error) {
if (completion) {
completion(success);
}
}];
}
2、保存視頻
- (void)saveVideo:(NSString *)path completion:(void (^)(BOOL success))completion {
NSURL *url = [NSURL fileURLWithPath:path];
[[PHPhotoLibrary sharedPhotoLibrary] performChanges:^{
[PHAssetChangeRequest creationRequestForAssetFromVideoAtFileURL:url];
} completionHandler:^(BOOL success, NSError * _Nullable error) {
dispatch_async(dispatch_get_main_queue(), ^{
if (completion) {
completion(success);
}
});
}];
}
四跨蟹、閃光燈
系統(tǒng)的閃光燈類型通過 AVCaptureDevice
的 flashMode
屬性來控制雳殊,其實只有三種,分別是:
- AVCaptureFlashModeOff 關(guān)閉
- AVCaptureFlashModeOn 開啟(在拍照的時候會閃一下)
- AVCaptureFlashModeAuto 自動(系統(tǒng)會自動判斷當前的環(huán)境是否需要閃光燈)
但是市面上的相機應用窗轩,一般還有一種常亮類型夯秃,這種類型在夜間的時候會比較適用。這個功能需要通過 torchMode
屬性來實現(xiàn)痢艺,它其實是指手電筒仓洼。
我們對這個兩個屬性做一下封裝,允許這四種類型來回切換堤舒,下面是根據(jù)封裝的類型來同步系統(tǒng)類型的代碼:
- (void)syncFlashState {
AVCaptureDevice *device = self.camera.inputCamera;
if (![device hasFlash] || self.camera.cameraPosition == AVCaptureDevicePositionFront) {
[self closeFlashIfNeed];
return;
}
[device lockForConfiguration:nil];
switch (self.flashMode) {
case SCCameraFlashModeOff:
device.torchMode = AVCaptureTorchModeOff;
device.flashMode = AVCaptureFlashModeOff;
break;
case SCCameraFlashModeOn:
device.torchMode = AVCaptureTorchModeOff;
device.flashMode = AVCaptureFlashModeOn;
break;
case SCCameraFlashModeAuto:
device.torchMode = AVCaptureTorchModeOff;
device.flashMode = AVCaptureFlashModeAuto;
break;
case SCCameraFlashModeTorch:
device.torchMode = AVCaptureTorchModeOn;
device.flashMode = AVCaptureFlashModeOff;
break;
default:
break;
}
[device unlockForConfiguration];
}
五色建、畫幅比例
相機的比例通過設置 AVCaptureSession
的 sessionPreset
屬性來實現(xiàn)。這個屬性并不只意味著比例舌缤,也意味著分辨率箕戳。
由于不是所有的設備都支持高分辨率,所以這里只使用 AVCaptureSessionPreset640x480
和 AVCaptureSessionPreset1280x720
這兩個分辨率国撵,分別用來作為 3:4
和 9:16
的輸出陵吸。
市面上的相機除了上面的兩個比例外,一般還支持 1:1
和 Full
(iPhoneX 系列的全屏)比例介牙,但是系統(tǒng)并沒有提供對應比例的 AVCaptureSessionPreset
壮虫。
這里可以通過 GPUImageCropFilter
來實現(xiàn),這是 GPUImage 的一個內(nèi)置濾鏡环础,可以對輸入的紋理進行裁剪囚似。使用時通過 cropRegion
屬性來傳入一個歸一化的裁剪區(qū)域。
切換比例的關(guān)鍵代碼如下:
- (void)setRatio:(SCCameraRatio)ratio {
_ratio = ratio;
CGRect rect = CGRectMake(0, 0, 1, 1);
if (ratio == SCCameraRatio1v1) {
self.camera.captureSessionPreset = AVCaptureSessionPreset640x480;
CGFloat space = (4 - 3) / 4.0; // 豎直方向應該裁剪掉的空間
rect = CGRectMake(0, space / 2, 1, 1 - space);
} else if (ratio == SCCameraRatio4v3) {
self.camera.captureSessionPreset = AVCaptureSessionPreset640x480;
} else if (ratio == SCCameraRatio16v9) {
self.camera.captureSessionPreset = AVCaptureSessionPreset1280x720;
} else if (ratio == SCCameraRatioFull) {
self.camera.captureSessionPreset = AVCaptureSessionPreset1280x720;
CGFloat currentRatio = SCREEN_HEIGHT / SCREEN_WIDTH;
if (currentRatio > 16.0 / 9.0) { // 需要在水平方向裁剪
CGFloat resultWidth = 16.0 / currentRatio;
CGFloat space = (9.0 - resultWidth) / 9.0;
rect = CGRectMake(space / 2, 0, 1 - space, 1);
} else { // 需要在豎直方向裁剪
CGFloat resultHeight = 9.0 * currentRatio;
CGFloat space = (16.0 - resultHeight) / 16.0;
rect = CGRectMake(0, space / 2, 1, 1 - space);
}
}
[self.currentFilterHandler setCropRect:rect];
self.videoSize = [self videoSizeWithRatio:ratio];
}
六线得、前后置切換
通過調(diào)用 GPUImageVideoCamera
的 rotateCamera
方法來實現(xiàn)饶唤。
另外,由于前置攝像頭不支持閃光燈框都,如果在前置的時候去切換閃光燈搬素,只能修改我們封裝的類型。所以在切換到后置的時候魏保,需要去同步一下系統(tǒng)的閃光燈類型:
- (void)rotateCamera {
[self.camera rotateCamera];
// 切換攝像頭熬尺,同步一下閃光燈
[self syncFlashState];
}
七、對焦
AVCaptureDevice
的 focusMode
用來設置聚焦模式谓罗,focusPointOfInterest
用來設置聚焦點粱哼;exposureMode
用來設置曝光模式,exposurePointOfInterest
用來設置曝光點檩咱。
前置攝像頭只支持設置曝光揭措,后置攝像頭支持設置曝光和聚焦胯舷,所以在設置之前要先判斷是否支持。
需要注意的是绊含,相機默認輸出的圖像是橫向的桑嘶,圖像向右偏轉(zhuǎn)。而前置攝像頭又是鏡像躬充,所以圖像是向左偏轉(zhuǎn)逃顶。我們從 UIView
獲得的觸摸點,要經(jīng)過相應的轉(zhuǎn)化充甚,才是正確的坐標以政。關(guān)鍵代碼如下:
- (void)setFocusPoint:(CGPoint)focusPoint {
_focusPoint = focusPoint;
AVCaptureDevice *device = self.camera.inputCamera;
// 坐標轉(zhuǎn)換
CGPoint currentPoint = CGPointMake(focusPoint.y / self.outputView.bounds.size.height, 1 - focusPoint.x / self.outputView.bounds.size.width);
if (self.camera.cameraPosition == AVCaptureDevicePositionFront) {
currentPoint = CGPointMake(currentPoint.x, 1 - currentPoint.y);
}
[device lockForConfiguration:nil];
if ([device isFocusPointOfInterestSupported] &&
[device isFocusModeSupported:AVCaptureFocusModeAutoFocus]) {
[device setFocusPointOfInterest:currentPoint];
[device setFocusMode:AVCaptureFocusModeAutoFocus];
}
if ([device isExposurePointOfInterestSupported] &&
[device isExposureModeSupported:AVCaptureExposureModeAutoExpose]) {
[device setExposurePointOfInterest:currentPoint];
[device setExposureMode:AVCaptureExposureModeAutoExpose];
}
[device unlockForConfiguration];
}
八、改變焦距
改變焦距簡單來說就是畫面的放大縮小伴找,通過設置 AVCaptureDevice
的 videoZoomFactor
屬性實現(xiàn)盈蛮。
值得注意的是,這個屬性有最大值和最小值技矮,設置之前需要做好判斷抖誉,否則會直接崩潰。代碼如下:
- (void)setVideoScale:(CGFloat)videoScale {
_videoScale = videoScale;
videoScale = [self availableVideoScaleWithScale:videoScale];
AVCaptureDevice *device = self.camera.inputCamera;
[device lockForConfiguration:nil];
device.videoZoomFactor = videoScale;
[device unlockForConfiguration];
}
- (CGFloat)availableVideoScaleWithScale:(CGFloat)scale {
AVCaptureDevice *device = self.camera.inputCamera;
CGFloat maxScale = kMaxVideoScale;
CGFloat minScale = kMinVideoScale;
if (@available(iOS 11.0, *)) {
maxScale = device.maxAvailableVideoZoomFactor;
}
scale = MAX(scale, minScale);
scale = MIN(scale, maxScale);
return scale;
}
九衰倦、濾鏡
1寸五、濾鏡的使用
當我們想使用一個濾鏡的時候,只需要把它加到濾鏡鏈里去耿币,通過 addTarget:
方法實現(xiàn)。來看一下這個方法的定義:
- (void)addTarget:(id<GPUImageInput>)newTarget;
可以看到韧拒,只要實現(xiàn)了 GPUImageInput
協(xié)議淹接,就可以成為濾鏡鏈的下一個結(jié)點。
2叛溢、美顏濾鏡
目前美顏效果已經(jīng)成為相機應用的標配塑悼,我們也來給自己的相機加上美顏的效果。
美顏效果本質(zhì)上是對圖片做模糊楷掉,想要達到比較好的效果厢蒜,需要結(jié)合人臉識別,只對人臉的部分進行模糊處理烹植。這里并不去探究美顏算法的實現(xiàn)斑鸦,直接找開源的美顏濾鏡來用。
目前找到的實現(xiàn)效果比較好的是 LFGPUImageBeautyFilter 草雕,雖然它的效果肯定比不上現(xiàn)在市面上的美顏類 APP巷屿,但是作為學習級別的 Demo 已經(jīng)足夠了。
效果展示:
3墩虹、自定義濾鏡
打開 GPUImageFilter
的頭文件嘱巾,可以看到有下面這個方法:
- (id)initWithVertexShaderFromString:(NSString *)vertexShaderString
fragmentShaderFromString:(NSString *)fragmentShaderString;
很容易理解憨琳,通過一個頂點著色器和一個片段著色器來初始化,并且可以看到是字符串類型旬昭。
另外篙螟,GPUImageFilter
中還內(nèi)置了簡單的頂點著色器和片段著色器,頂點著色器代碼如下:
NSString *const kGPUImageVertexShaderString = SHADER_STRING
(
attribute vec4 position;
attribute vec4 inputTextureCoordinate;
varying vec2 textureCoordinate;
void main()
{
gl_Position = position;
textureCoordinate = inputTextureCoordinate.xy;
}
);
這里用到了 SHADER_STRING
宏问拘,看一下它的定義:
#define STRINGIZE(x) #x
#define STRINGIZE2(x) STRINGIZE(x)
#define SHADER_STRING(text) @ STRINGIZE2(text)
在 #define
中的 #
是「字符串化」的意思遍略,返回 C 語言風格字符串,而 SHADER_STRING
在字符串前面加了一個 @
符號场梆,則 SHADER_STRING
的定義就是將括號中的內(nèi)容轉(zhuǎn)化為 OC 風格的字符串墅冷。
我們之前都是為著色器代碼單獨創(chuàng)建兩個文件,而在 GPUImageFilter
中直接以字符串的形式或油,寫死在代碼中寞忿,兩種方式本質(zhì)上沒什么區(qū)別。
當我們想自定義一個濾鏡的時候顶岸,只需要繼承 GPUImageFilter
來定義一個子類腔彰,然后用相同的方式來定義兩個保存著色器代碼的字符串,并且用這兩個字符串來初始化子類就可以了辖佣。
作為示例霹抛,我把之前實現(xiàn)的 抖音濾鏡 也添加到這個工程里,來看一下效果:
總結(jié)
通過上面的步驟卷谈,我們實現(xiàn)了一個具備基礎功能的相機杯拐。之后會在這個相機的基礎上,繼續(xù)做一些有趣的嘗試世蔗,歡迎持續(xù)關(guān)注~
源碼
請到 GitHub 上查看完整代碼端逼。
參考
- GPUImage(五):五種類型輸入源
- GPUImage源碼閱讀(六)
- GPUImage詳細解析(九)圖像的輸入輸出和濾鏡通道
- iOS 上的相機捕捉
- C語言宏高級用法 [總結(jié)]
- iOS美顏實現(xiàn)
獲取更佳的閱讀體驗,請訪問原文地址【Lyman's Blog】使用 GPUImage 實現(xiàn)一個簡單相機