笔记-GPUImage（三）短视频录制实时滤镜以及滤镜的切换

短视频实时滤镜（GPUImageVideoCamera）

demo下载地址：https://github.com/SXDgit/ZB_GPUImageVideoCamera

先看效果图：

直接上代码，后面解释：

- (void)createVideoCamera {
    // 建立画面捕获器
    self.videoCamera = [[GPUImageVideoCamera alloc]initWithSessionPreset:AVCaptureSessionPreset640x480 cameraPosition:AVCaptureDevicePositionBack];
    // 输出方向为竖屏
    self.videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;
    self.videoCamera.horizontallyMirrorRearFacingCamera = NO;
    self.videoCamera.horizontallyMirrorFrontFacingCamera = NO;
    self.videoCamera.runBenchmark = YES;
    
    // 构建组合滤镜
    [self addGPUImageFilter:self.sepiaFilter];
    [self addGPUImageFilter:self.monochromeFilter];
    
    // 建立画面呈现控件
    self.filterView = [[GPUImageView alloc]initWithFrame:self.view.frame];
    self.filterView.fillMode = kGPUImageFillModePreserveAspectRatio;
    self.view = self.filterView;
    
    [self.videoCamera addTarget:self.filterView];
    // 相机运行
    [self.videoCamera startCameraCapture];
    [self configMovie];
}

- (void)configMovie {
    // 设置写入地址
    self.pathToMovie = [NSHomeDirectory() stringByAppendingPathComponent:[NSString stringWithFormat:@"Documents/ZBMovied%u.mp4", arc4random() % 1000]];
    // movieUrl指视频写入的地址
    self.moviewURL = [NSURL fileURLWithPath:_pathToMovie];
    self.movieWriter = [[GPUImageMovieWriter alloc]initWithMovieURL:_moviewURL size:CGSizeMake(480.0, 640.0)];
    _movieWriter.encodingLiveVideo = YES;
    // 设置声音
    _videoCamera.audioEncodingTarget = _movieWriter;
}

- (void)addGPUImageFilter:(GPUImageFilter *)filter {
    [self.filterGroup addFilter:filter];
    
    GPUImageOutput<GPUImageInput> *newTerminalFilter = filter;
    NSInteger count = self.filterGroup.filterCount;
    if (count == 1) {
        self.filterGroup.initialFilters = @[newTerminalFilter];
        self.filterGroup.terminalFilter = newTerminalFilter;
    }else {
        GPUImageOutput<GPUImageInput> *terminalFilter = self.filterGroup.terminalFilter;
        NSArray *initialFilters = self.filterGroup.initialFilters;
        [terminalFilter addTarget:newTerminalFilter];
        self.filterGroup.initialFilters = @[initialFilters[0]];
        self.filterGroup.terminalFilter = newTerminalFilter;
    }
}

- (void)switchButtonAction {
    // 切换摄像头先后翻转
    [self.videoCamera rotateCamera];
    self.switchButton.selected = !self.switchButton.selected;
}
复制代码

GPUImageFilter是用来接收源图像，经过自定义的顶点、片元着色器来渲染新的图像，并在绘制完成后通知响应链的下一个对象。
GPUImageVideoCamera提供来自摄像头的图像数据做为源数据，是GPUImageOutput的子类，通常是响应链的源头。
GPUImageView通常用于显示GPUImage的图像，是响应链的终点。
GPUImageFilterGroup是多个filter的集合，terminalFilter为最终的filter，initialFilter是filter数组。自己不绘制图像，对它的添加删除Target操做，都会转为terminalFilter的操做。

GPUImageMovieWriter是和 GPUImageView处于同一地位的，都是视频输出类，只不过一个是输出到文件，一个输出到屏幕。 GPUImageBeautifyFilter是 基于GPUImage的实时美颜滤镜中的美颜滤镜，来自琨君。它是继承于 GPUImageFilterGroup。包括了 GPUImageBilateralFilter、 GPUImageCannyEdgeDetectionFilter、 GPUImageCombinationFilter、 GPUImageHSBFilter。

绘制流程

来自GPUImage详细解析（三）- 实时美颜滤镜

• 一、GPUImageVideoCamera捕获摄像头图像调用newFrameReadyAtTime: atIndex:通知GPUImageBeautifyFilter；
• 二、GPUImageBeautifyFilter调用newFrameReadyAtTime: atIndex:通知GPUImageBilateralFliter输入纹理已经准备好；
• 三、GPUImageBilateralFliter 绘制图像后在informTargetsAboutNewFrameAtTime()，调用setInputFramebufferForTarget: atIndex:把绘制的图像设置为GPUImageCombinationFilter输入纹理，并通知GPUImageCombinationFilter纹理已经绘制完毕；
• 四、GPUImageBeautifyFilter调用newFrameReadyAtTime: atIndex:通知 GPUImageCannyEdgeDetectionFilter输入纹理已经准备好；
• 五、同3，GPUImageCannyEdgeDetectionFilter 绘制图像后，把图像设置为GPUImageCombinationFilter输入纹理；
• 六、GPUImageBeautifyFilter调用newFrameReadyAtTime: atIndex:通知 GPUImageCombinationFilter输入纹理已经准备好；
• 七、GPUImageCombinationFilter判断是否有三个纹理，三个纹理都已经准备好后调用GPUImageThreeInputFilter的绘制函数renderToTextureWithVertices: textureCoordinates:，图像绘制完后，把图像设置为GPUImageHSBFilter的输入纹理，通知GPUImageHSBFilter纹理已经绘制完毕；
• 八、GPUImageHSBFilter调用renderToTextureWithVertices: textureCoordinates:绘制图像，完成后把图像设置为GPUImageView的输入纹理，并通知GPUImageView输入纹理已经绘制完毕；
• 九、GPUImageView把输入纹理绘制到本身的帧缓存，而后经过[self.context presentRenderbuffer:GL_RENDERBUFFER]显示到UIView上。

核心思路

经过GPUImageVideoCamera采集音视频的信息，音频信息直接发送给GPUImageMovieWriter，视频信息传入响应链做为源头，渲染后的视频信息再写入GPUImageMovieWriter，同时GPUImageView显示再屏幕上。

经过源码能够知道GPUImage是使用AVFoundation框架来获取视频的。
AVCaptureSession类从AV输入设备的采集数据到制定的输出。
为了实现实时的图像捕获，要实现AVCaptureSession类，添加合适的输入（AVCaptureDeviceInput）和输出（好比AVCaptureMovieFileOutput）调用startRunning开始输入到输出的数据流，调用stopRunning中止数据流。须要注意的是startingRunning函数会花费必定的时间，因此不能在主线程调用，防止卡顿。

流程解析：
一、找到物理设备摄像头 _inputCamera、麦克风 _microphone，建立摄像头输入 videoInput和麦克风输入 audioInput。
二、设置 videoInput和 audioInput为 _captureSession的输入，同时设置 videoOutput和 audioOutput为 _captureSession的输出，而且设置 videoOutput和 audioOutput的输出 delegate。
三、 _captureSession调用 startRunning，开始捕获信号。
四、音频数据到达，把数据转发给以前设置的 audioEncodingTarget，并经过调用 assetWriterAudioInput的 appendSampleBuffer方法写入音频数据。
五、视频数据到达，视频数据传入响应链，通过处理后经过 assetWriterPixelBufferInput的 appendSampleBuffer方法写入视频数据。
六、视频录制完成，保存写入手机相册。

踩过的坑

一、录制后保存在相册里的视频是白屏？
在初始化movieWriter的过程当中，使用addTarget:增长了滤镜致使。

二、录制完视频后，再次点击录制，会crash？
报错的缘由是[AVAssetWriter startWriting] Cannot call method when status is 3，报错是在[self.movieWriter startRecording];这行代码，追溯源码，能够看到GPUImageMovieWriter是对AssetWriter进行了一次封装，其核心的写文件仍是由AssetWriter完成。 经过源码能够发现[self.movieWriter finishRecording];之后并无新建一个AssetWriter实例。因此能够保存视频到相册成功后，加入下面几行代码：

- (void)videoCameraReset {
    [_videoCamera removeTarget:_movieWriter];
    [[NSFileManager defaultManager] removeItemAtURL:_moviewURL error:nil];
    [self initMovieWriter];
    [_videoCamera addTarget:_movieWriter];
}

- (void)initMovieWriter {
    _movieWriter = [[GPUImageMovieWriter alloc]initWithMovieURL:_moviewURL size:CGSizeMake(480.0, 640.0)];
    _movieWriter.encodingLiveVideo = YES;
}
复制代码

一、摄像头实例取消对GPUImageMovieWriter的绑定，由于从新实例化新的GPUImageMovieWriter之后原来的实例就没用了。
二、删除原来已经写好的影片文件，若是新的实例直接写入已存在的文件会报错AVAssetWriterStatusFailed。
三、从新实例化一个GPUImageMovieWriter。
四、把新的GPUImageMovieWriter绑定到摄像头实例。

这样之后就能够不一样的录制保存了。参考[绍棠] GPUImageMovieWriter 没法2次录像 报错：[AVAssetWriter startWriting] Cannot call method when status is 3

参考资料：落影大佬的GPUImage文集