使用 GPUImage 實現一個簡單相機

時間  2019-11-06
標籤 使用 gpuimage 實現 一個 簡單 相機 简体版
原文   原文鏈接

本文介紹瞭如何使用 GPUImage 來實現一個簡單的相機。具體功能包括拍照、錄製視頻、多段視頻合成、實時美顏、自定義濾鏡實現等。html

前言

AVFoundation 是蘋果提供的用於處理基於時間的媒體數據的一個框架。咱們想要實現一個相機，須要從手機攝像頭採集數據，離不開這個框架的支持。GPUImage 對 AVFoundation 作了一些封裝，使咱們的採集工做變得十分簡單。ios

另外，GPUImage 的核心魅力還在於，它封裝了一個鏈路結構的圖像數據處理流程，簡稱濾鏡鏈。濾鏡鏈的結構使得多層濾鏡的疊加功能變得很容易實現。git

在下面介紹的功能中，有一些和 GPUImage 自己的關係並不大，咱們是直接調用 AVFoundation 的 API 來實現的。可是，這些功能也是一個相機應用必不可少的一部分。因此，咱們也會簡單講一下每一個功能的實現方式和注意事項。github

濾鏡鏈簡介

在 GPUImage 中，對圖像數據的處理都是經過創建濾鏡鏈來實現的。算法

這裏就涉及到了一個類 GPUImageOutput 和一個協議 GPUImageInput 。對於繼承了 GPUImageOutput 的類，能夠理解爲具有輸出圖像數據的能力；對於實現了 GPUImageInput 協議的類，能夠理解爲具有接收圖像數據輸入的能力。spring

顧名思義，濾鏡鏈做爲一個鏈路，具備起點和終點。根據前面的描述，濾鏡鏈的起點應該只繼承了 GPUImageOutput 類，濾鏡鏈的終點應該只實現了 GPUImageInput 協議，而對於中間的結點應該同時繼承了 GPUImageOutput 類並實現了 GPUImageInput 協議，這樣才具有承上啓下的做用。緩存

1、濾鏡鏈起點

在 GPUImage 中，只繼承了 GPUImageOutput，而沒有實現 GPUImageInput 協議的類有六個，也就是說有六種類型的輸入源：session

一、GPUImagePicture框架

GPUImagePicture 經過圖片來初始化，本質上是先將圖片轉化爲 CGImageRef，而後將 CGImageRef 轉化爲紋理。dom

二、GPUImageRawDataInput

GPUImageRawDataInput 經過二進制數據初始化，而後將二進制數據轉化爲紋理，在初始化的時候須要指明數據的格式（GPUPixelFormat）。

三、GPUImageTextureInput

GPUImageTextureInput 經過已經存在的紋理來初始化。既然紋理已經存在，在初始化的時候就不會從新去生成，只是將紋理的索引保存下來。

四、GPUImageUIElement

GPUImageUIElement 能夠經過 UIView 或者 CALayer 來初始化，最後都是調用 CALayer 的 renderInContext: 方法，將當前顯示的內容繪製到 CoreGraphics 的上下文中，從而獲取圖像數據。而後將數據轉化爲紋理。簡單來講就是截屏，截取當前控件的內容。

這個類能夠用來實如今視頻上添加文字水印的功能。由於在 OpenGL 中不能直接進行文本的繪製，因此若是咱們想把一個 UILabel 的內容添加到濾鏡鏈裏面去，使用 GPUImageUIElement 來實現是很合適的。

五、GPUImageMovie

GPUImageMovie 經過本地的視頻來初始化。首先經過 AVAssetReader 來逐幀讀取視頻，而後將幀數據轉化爲紋理，具體的流程大概是：AVAssetReaderOutput -> CMSampleBufferRef -> CVImageBufferRef -> CVOpenGLESTextureRef -> Texture 。

六、GPUImageVideoCamera

GPUImageVideoCamera 經過相機參數來初始化，經過屏幕比例和相機位置（先後置） 來初始化相機。這裏主要使用 AVCaptureVideoDataOutput 來獲取持續的視頻流數據輸出，在代理方法 captureOutput:didOutputSampleBuffer:fromConnection: 中能夠拿到 CMSampleBufferRef ，將其轉化爲紋理的過程與 GPUImageMovie 相似。

然而，咱們在項目中使用的是它的子類 GPUImageStillCamera。 GPUImageStillCamera 在原來的基礎上多了一個 AVCaptureStillImageOutput，它是咱們實現拍照功能的關鍵，在 captureStillImageAsynchronouslyFromConnection:completionHandler: 方法的回調中，一樣能拿到咱們熟悉 CMSampleBufferRef。

簡單來講，GPUImageVideoCamera 只能錄製視頻，GPUImageStillCamera 還能夠拍照， 所以咱們使用 GPUImageStillCamera 。

2、濾鏡

濾鏡鏈的關鍵角色是 GPUImageFilter，它同時繼承了 GPUImageOutput 類並實現了 GPUImageInput 協議。GPUImageFilter 實現承上啓下功能的基礎是「渲染到紋理」，這個操做咱們在 《使用 iOS OpenGL ES 實現長腿功能》 一文中已經介紹過了，簡單來講就是將結果渲染到紋理而不是屏幕上。

這樣，每個濾鏡都能把輸出的紋理做爲下一個濾鏡的輸入，實現多層濾鏡效果的疊加。

3、濾鏡鏈終點

在 GPUImage 中，實現了 GPUImageInput 協議，而沒有繼承 GPUImageOutput 的類有四個：

一、GPUImageMovieWriter

GPUImageMovieWriter 封裝了 AVAssetWriter，能夠逐幀從幀緩存的渲染結果中讀取數據，最後經過 AVAssetWriter 將視頻文件保存到指定的路徑。

二、GPUImageRawDataOutput

GPUImageRawDataOutput 經過 rawBytesForImage 屬性，能夠獲取到當前輸入紋理的二進制數據。

假設咱們的濾鏡鏈在輸入源和終點之間，鏈接了三個濾鏡，而咱們須要拿到第二個濾鏡渲染後的數據，用來作人臉識別。那咱們能夠在第二個濾鏡後面再添加一個 GPUImageRawDataOutput 做爲輸出，則能夠拿到對應的二進制數據，且不會影響原來的渲染流程。

三、GPUImageTextureOutput

這個類的實現十分簡單，提供協議方法 newFrameReadyFromTextureOutput:，在每一幀渲染結束後，將自身返回，經過 texture 屬性就能夠拿到輸入紋理的索引。

四、GPUImageView

GPUImageView 繼承自 UIView，經過輸入的紋理，執行一遍渲染流程。此次的渲染目標不是新的紋理，而是自身的 layer 。

這個類是咱們實現相機功能的重要組成部分，咱們全部的濾鏡效果，都要依靠它來呈現。

功能實現

1、拍照

拍照功能只需調用一個接口就能搞定，在回調方法中能夠直接拿到 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 承載，顯示的是整個濾鏡鏈做用的結果。而咱們的拍照接口，能夠傳入這個鏈路上的任意一個濾鏡，甚至能夠在後面多加一個濾鏡，而後拍照接口會返回對應濾鏡的渲染結果。即咱們的拍照結果不必定要和咱們的預覽一致。

示意圖以下：

2、錄製視頻

一、單段錄製

錄製視頻首先要建立一個 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);
        }
    }];
}
複製代碼

二、多段錄製

在 GPUImage 中並無提供多段錄製的功能，須要咱們本身去實現。

首先，咱們要重複單段視頻的錄製過程，這樣咱們就有了多段視頻的文件路徑。而後主要實現兩個功能，一個是 AVPlayer 的多段視頻循環播放；另外一個是經過 AVComposition 來合併多段視頻，並用 AVAssetExportSession 來導出新的視頻。

整個過程邏輯並不複雜，出於篇幅的考慮，代碼就不貼了，請到項目中查看。

3、保存

在拍照或者錄視頻結束後，經過 PhotoKit 保存到相冊裏。

一、保存圖片

- (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);
        }
    }];
}
複製代碼

二、保存視頻

- (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);
            }
        });
    }];
}
複製代碼

4、閃光燈

系統的閃光燈類型經過 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];
}
複製代碼

5、畫幅比例

相機的比例經過設置 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];
}
複製代碼

6、先後置切換

經過調用 GPUImageVideoCamera 的 rotateCamera 方法來實現。

另外，因爲前置攝像頭不支持閃光燈，若是在前置的時候去切換閃光燈，只能修改咱們封裝的類型。因此在切換到後置的時候，須要去同步一下系統的閃光燈類型：

- (void)rotateCamera {
    [self.camera rotateCamera];
    // 切換攝像頭，同步一下閃光燈
    [self syncFlashState];
}
複製代碼

7、對焦

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];
}
複製代碼

8、改變焦距

改變焦距簡單來講就是畫面的放大縮小，經過設置 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;
}
複製代碼

9、濾鏡

一、濾鏡的使用

當咱們想使用一個濾鏡的時候，只須要把它加到濾鏡鏈裏去，經過 addTarget: 方法實現。來看一下這個方法的定義：

- (void)addTarget:(id<GPUImageInput>)newTarget;
複製代碼

能夠看到，只要實現了 GPUImageInput 協議，就能夠成爲濾鏡鏈的下一個結點。

二、美顏濾鏡

目前美顏效果已經成爲相機應用的標配，咱們也來給本身的相機加上美顏的效果。

美顏效果本質上是對圖片作模糊，想要達到比較好的效果，須要結合人臉識別，只對人臉的部分進行模糊處理。這裏並不去探究美顏算法的實現，直接找開源的美顏濾鏡來用。

目前找到的實現效果比較好的是 LFGPUImageBeautyFilter ，雖然它的效果確定比不上如今市面上的美顏類 APP，可是做爲學習級別的 Demo 已經足夠了。

效果展現：

三、自定義濾鏡

打開 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 來定義一個子類，而後用相同的方式來定義兩個保存着色器代碼的字符串，而且用這兩個字符串來初始化子類就能夠了。

做爲示例，我把以前實現的 抖音濾鏡 也添加到這個工程裏，來看一下效果：

總結

經過上面的步驟，咱們實現了一個具有基礎功能的相機。以後會在這個相機的基礎上，繼續作一些有趣的嘗試，歡迎持續關注～

源碼

請到 GitHub 上查看完整代碼。

參考

獲取更佳的閱讀體驗，請訪問原文地址【Lyman's Blog】使用 GPUImage 實現一個簡單相機

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程