本文介紹了如何使用 GPUImage 來實現一個簡單的相機。具體功能包括拍照、錄制視頻、多段視頻合成、實時美顏、自定義濾鏡實現等。
前言
AVFoundation 是蘋果提供的用于處理基于時間的媒體數據的一個框架。我們想要實現一個相機，需要從手機攝像頭采集數據，離不開這個框架的支持。GPUImage 對 AVFoundation 做了一些封裝，使我們的采集工作變得十分簡單。
另外，GPUImage 的核心魅力還在于，它封裝了一個鏈路結構的圖像數據處理流程，簡稱濾鏡鏈。濾鏡鏈的結構使得多層濾鏡的疊加功能變得很容易實現。
在下面介紹的功能中，有一些和 GPUImage 本身的關系并不大，我們是直接調用 AVFoundation 的 API 來實現的。但是，這些功能也是一個相機應用必不可少的一部分。所以，我們也會簡單講一下每個功能的實現方式和注意事項。
濾鏡鏈簡介
在 GPUImage 中，對圖像數據的處理都是通過建立濾鏡鏈來實現的。
這里就涉及到了一個類 GPUImageOutput 和一個協議 GPUImageInput 。對于繼承了 GPUImageOutput 的類，可以理解為具備輸出圖像數據的能力；對于實現了 GPUImageInput 協議的類，可以理解為具備接收圖像數據輸入的能力。
顧名思義，濾鏡鏈作為一個鏈路，具有起點和終點。根據前面的描述，濾鏡鏈的起點應該只繼承了 GPUImageOutput 類，濾鏡鏈的終點應該只實現了 GPUImageInput 協議，而對于中間的結點應該同時繼承了 GPUImageOutput 類并實現了 GPUImageInput 協議，這樣才具備承上啟下的作用。
一、濾鏡鏈起點
在 GPUImage 中，只繼承了 GPUImageOutput，而沒有實現 GPUImageInput 協議的類有六個，也就是說有六種類型的輸入源：
1、GPUImagePicture
GPUImagePicture 通過圖片來初始化，本質上是先將圖片轉化為 CGImageRef，然后將 CGImageRef 轉化為紋理。
2、GPUImageRawDataInput
GPUImageRawDataInput 通過二進制數據初始化，然后將二進制數據轉化為紋理，在初始化的時候需要指明數據的格式（GPUPixelFormat）。
3、GPUImageTextureInput
GPUImageTextureInput 通過已經存在的紋理來初始化。既然紋理已經存在，在初始化的時候就不會重新去生成，只是將紋理的索引保存下來。
4、GPUImageUIElement
GPUImageUIElement 可以通過 UIView 或者 CALayer 來初始化，最后都是調用 CALayer 的 renderInContext: 方法，將當前顯示的內容繪制到 CoreGraphics 的上下文中，從而獲取圖像數據。然后將數據轉化為紋理。簡單來說就是截屏，截取當前控件的內容。
這個類可以用來實現在視頻上添加文字水印的功能。因為在 OpenGL 中不能直接進行文本的繪制，所以如果我們想把一個 UILabel 的內容添加到濾鏡鏈里面去，使用 GPUImageUIElement 來實現是很合適的。
5、GPUImageMovie
GPUImageMovie 通過本地的視頻來初始化。首先通過 AVAssetReader 來逐幀讀取視頻，然后將幀數據轉化為紋理，具體的流程大概是：AVAssetReaderOutput -> CMSampleBufferRef -> CVImageBufferRef -> CVOpenGLESTextureRef -> Texture 。
6、GPUImageVideoCamera
GPUImageVideoCamera 通過相機參數來初始化，通過屏幕比例和相機位置（前后置） 來初始化相機。這里主要使用 AVCaptureVideoDataOutput 來獲取持續的視頻流數據輸出，在代理方法 captureOutput:didOutputSampleBuffer:fromConnection: 中可以拿到 CMSampleBufferRef ，將其轉化為紋理的過程與 GPUImageMovie 類似。
然而，我們在項目中使用的是它的子類 GPUImageStillCamera。 GPUImageStillCamera 在原來的基礎上多了一個 AVCaptureStillImageOutput，它是我們實現拍照功能的關鍵，在 captureStillImageAsynchronouslyFromConnection:completionHandler: 方法的回調中，同樣能拿到我們熟悉 CMSampleBufferRef。
簡單來說，GPUImageVideoCamera 只能錄制視頻，GPUImageStillCamera 還可以拍照， 因此我們使用 GPUImageStillCamera 。
二、濾鏡
濾鏡鏈的關鍵角色是 GPUImageFilter，它同時繼承了 GPUImageOutput 類并實現了 GPUImageInput 協議。GPUImageFilter 實現承上啟下功能的基礎是「渲染到紋理」，這個操作我們在 《使用 iOS OpenGL ES 實現長腿功能》 一文中已經介紹過了，簡單來說就是將結果渲染到紋理而不是屏幕上。
這樣，每一個濾鏡都能把輸出的紋理作為下一個濾鏡的輸入，實現多層濾鏡效果的疊加。
三、濾鏡鏈終點
在 GPUImage 中，實現了 GPUImageInput 協議，而沒有繼承 GPUImageOutput 的類有四個：
1、GPUImageMovieWriter
GPUImageMovieWriter 封裝了 AVAssetWriter，可以逐幀從幀緩存的渲染結果中讀取數據，最后通過 AVAssetWriter 將視頻文件保存到指定的路徑。
2、GPUImageRawDataOutput
GPUImageRawDataOutput 通過 rawBytesForImage 屬性，可以獲取到當前輸入紋理的二進制數據。
假設我們的濾鏡鏈在輸入源和終點之間，連接了三個濾鏡，而我們需要拿到第二個濾鏡渲染后的數據，用來做人臉識別。那我們可以在第二個濾鏡后面再添加一個 GPUImageRawDataOutput 作為輸出，則可以拿到對應的二進制數據，且不會影響原來的渲染流程。
3、GPUImageTextureOutput
這個類的實現十分簡單，提供協議方法 newFrameReadyFromTextureOutput:，在每一幀渲染結束后，將自身返回，通過 texture 屬性就可以拿到輸入紋理的索引。
4、GPUImageView
GPUImageView 繼承自 UIView，通過輸入的紋理，執行一遍渲染流程。這次的渲染目標不是新的紋理，而是自身的 layer 。
這個類是我們實現相機功能的重要組成部分，我們所有的濾鏡效果，都要依靠它來呈現。
功能實現
一、拍照
拍照功能只需調用一個接口就能搞定，在回調方法中可以直接拿到 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 承載，顯示的是整個濾鏡鏈作用的結果。而我們的拍照接口，可以傳入這個鏈路上的任意一個濾鏡，甚至可以在后面多加一個濾鏡，然后拍照接口會返回對應濾鏡的渲染結果。即我們的拍照結果不一定要和我們的預覽一致。
示意圖如下：
[圖片上傳失敗...(image-68bb82-1610618344597)]
<figcaption style="box-sizing: border-box; display: block;"></figcaption>
二、錄制視頻
1、單段錄制
錄制視頻首先要創建一個 GPUImageMovieWriter 作為鏈路的輸出，與上面的拍照接口類似，這里錄制的視頻不一定和我們的預覽一樣。
整個過程比較簡單，當我們調用停止錄制的接口并回調之后，視頻就被保存到我們指定的路徑了。
- (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 中并沒有提供多段錄制的功能，需要我們自己去實現。
首先，我們要重復單段視頻的錄制過程，這樣我們就有了多段視頻的文件路徑。然后主要實現兩個功能，一個是 AVPlayer 的多段視頻循環播放；另一個是通過 AVComposition 來合并多段視頻，并用 AVAssetExportSession 來導出新的視頻。
整個過程邏輯并不復雜，出于篇幅的考慮，代碼就不貼了，請到項目中查看。
三、保存
在拍照或者錄視頻結束后，通過 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);
}
});
}];
}
四、閃光燈
系統的閃光燈類型通過 AVCaptureDevice 的 flashMode 屬性來控制，其實只有三種，分別是：
- AVCaptureFlashModeOff 關閉
- AVCaptureFlashModeOn 開啟（在拍照的時候會閃一下）
- AVCaptureFlashModeAuto 自動（系統會自動判斷當前的環境是否需要閃光燈）
但是市面上的相機應用，一般還有一種常亮類型，這種類型在夜間的時候會比較適用。這個功能需要通過 torchMode 屬性來實現，它其實是指手電筒。
我們對這個兩個屬性做一下封裝，允許這四種類型來回切換，下面是根據封裝的類型來同步系統類型的代碼：
- (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 屬性來實現。這個屬性并不只意味著比例，也意味著分辨率。
由于不是所有的設備都支持高分辨率，所以這里只使用 AVCaptureSessionPreset640x480 和 AVCaptureSessionPreset1280x720 這兩個分辨率，分別用來作為 3:4 和 9:16 的輸出。
市面上的相機除了上面的兩個比例外，一般還支持 1:1 和 Full （iPhoneX 系列的全屏）比例，但是系統并沒有提供對應比例的 AVCaptureSessionPreset 。
這里可以通過 GPUImageCropFilter 來實現，這是 GPUImage 的一個內置濾鏡，可以對輸入的紋理進行裁剪。使用時通過 cropRegion 屬性來傳入一個歸一化的裁剪區域。
切換比例的關鍵代碼如下：
- (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];
}
六、前后置切換
通過調用 GPUImageVideoCamera 的 rotateCamera 方法來實現。
另外，由于前置攝像頭不支持閃光燈，如果在前置的時候去切換閃光燈，只能修改我們封裝的類型。所以在切換到后置的時候，需要去同步一下系統的閃光燈類型：
- (void)rotateCamera {
[self.camera rotateCamera];
// 切換攝像頭，同步一下閃光燈
[self syncFlashState];
}
七、對焦
AVCaptureDevice 的 focusMode 用來設置聚焦模式，focusPointOfInterest 用來設置聚焦點；exposureMode 用來設置曝光模式，exposurePointOfInterest 用來設置曝光點。
前置攝像頭只支持設置曝光，后置攝像頭支持設置曝光和聚焦，所以在設置之前要先判斷是否支持。
需要注意的是，相機默認輸出的圖像是橫向的，圖像向右偏轉。而前置攝像頭又是鏡像，所以圖像是向左偏轉。我們從 UIView 獲得的觸摸點，要經過相應的轉化，才是正確的坐標。關鍵代碼如下：
- (void)setFocusPoint:(CGPoint)focusPoint {
_focusPoint = focusPoint;
AVCaptureDevice *device = self.camera.inputCamera;
// 坐標轉換
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 屬性實現。
值得注意的是，這個屬性有最大值和最小值，設置之前需要做好判斷，否則會直接崩潰。代碼如下：
- (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: 方法實現。來看一下這個方法的定義：
- (void)addTarget:(id<GPUImageInput>)newTarget;
可以看到，只要實現了 GPUImageInput 協議，就可以成為濾鏡鏈的下一個結點。
2、美顏濾鏡
目前美顏效果已經成為相機應用的標配，我們也來給自己的相機加上美顏的效果。
美顏效果本質上是對圖片做模糊，想要達到比較好的效果，需要結合人臉識別，只對人臉的部分進行模糊處理。這里并不去探究美顏算法的實現，直接找開源的美顏濾鏡來用。
目前找到的實現效果比較好的是 LFGPUImageBeautyFilter ，雖然它的效果肯定比不上現在市面上的美顏類 APP，但是作為學習級別的 Demo 已經足夠了。
效果展示：
[圖片上傳失敗...(image-173148-1610618344596)]
<figcaption style="box-sizing: border-box; display: block;"></figcaption>
3、自定義濾鏡
打開 GPUImageFilter 的頭文件，可以看到有下面這個方法：
- (id)initWithVertexShaderFromString:(NSString *)vertexShaderString
fragmentShaderFromString:(NSString *)fragmentShaderString;
很容易理解，通過一個頂點著色器和一個片段著色器來初始化，并且可以看到是字符串類型。
另外，GPUImageFilter 中還內置了簡單的頂點著色器和片段著色器，頂點著色器代碼如下:
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 的定義就是將括號中的內容轉化為 OC 風格的字符串。
我們之前都是為著色器代碼單獨創建兩個文件，而在 GPUImageFilter 中直接以字符串的形式，寫死在代碼中，兩種方式本質上沒什么區別。
當我們想自定義一個濾鏡的時候，只需要繼承 GPUImageFilter 來定義一個子類，然后用相同的方式來定義兩個保存著色器代碼的字符串，并且用這兩個字符串來初始化子類就可以了。
作為示例，我把之前實現的 抖音濾鏡 也添加到這個工程里，來看一下效果：
[圖片上傳失敗...(image-28bd40-1610618344595)]
<figcaption style="box-sizing: border-box; display: block;"></figcaption>
總結
通過上面的步驟，我們實現了一個具備基礎功能的相機。之后會在這個相機的基礎上，繼續做一些有趣的嘗試，歡迎持續關注～
源碼
請到 GitHub 上查看完整代碼。
參考
獲取更佳的閱讀體驗，請訪問原文地址【Lyman's Blog】使用 GPUImage 實現一個簡單相機
