1小时学会：最简单的iOS直播推流（四）如何使用GPUImage，如何美颜

最简单的iOS 推流代码，视频捕获，软编码(faac，x264)，硬编码（aac，h264），美颜，flv编码，rtmp协议，陆续更新代码解析，你想学的知识这里都有，愿意懂直播技术的同学快来看！！

源代码：https://github.com/hardman/AWLive

上一篇文章介绍了如何使用系统方法捕获视频数据，但是更多的时候，为了使用美颜滤镜，我们会选择GPUImage来获取视频数据。

GPUImage是一个可以为录制视频添加实时滤镜的一个著名第三方库。

该框架大概原理是，使用OpenGL着色器对视频图像进行颜色处理，然后存到frameBuffer，之后可以对此数据再次处理。重复上述过程，即可达到多重滤镜效果。

具体实现不细说，这里简要介绍一下GPUImage的使用，如何美颜，如何获取音视频数据。

使用GPUImage

GPUImage的主要代码在 AWGPUImageAVCapture 这个类中。

初始化AWAVCaptureManager对象时将captureType设为AWAVCaptureTypeGPUImage，就会自动调用AWGPUImageAVCapture类来捕获视频数据。

代码在 onInit 方法中：

-(void)onInit{
    //摄像头初始化
    // AWGPUImageVideoCamera 继承自 GPUImageVideoCamera。继承是为了获取音频数据，原代码中，默认情况下音频数据发送给了 audioEncodingTarget。
    // 这个东西一看类型是GPUImageMovieWriter，应该是文件写入功能。果断覆盖掉processAudioSampleBuffer方法，拿到音频数据后自己处理。
    // 音频就这样可以了，GPUImage主要工作还是在视频处理这里。
    // 设置预览分辨率 self.captureSessionPreset是根据AWVideoConfig的设置，获取的分辨率。设置前置、后置摄像头。
    _videoCamera = [[AWGPUImageVideoCamera alloc] initWithSessionPreset:self.captureSessionPreset cameraPosition:AVCaptureDevicePositionFront];

    //开启捕获声音
    [_videoCamera addAudioInputsAndOutputs];

    //设置输出图像方向，可用于横屏推流。
    _videoCamera.outputImageOrientation = UIInterfaceOrientationPortrait;

    //镜像策略，这里这样设置是最自然的。跟系统相机默认一样。
    _videoCamera.horizontallyMirrorRearFacingCamera = NO;
    _videoCamera.horizontallyMirrorFrontFacingCamera = YES;

    //设置预览view
    _gpuImageView = [[GPUImageView alloc] initWithFrame:self.preview.bounds];
    [self.preview addSubview:_gpuImageView];

    //初始化美颜滤镜
    _beautifyFilter = [[GPUImageBeautifyFilter alloc] init];

    //相机获取视频数据输出至美颜滤镜
    [_videoCamera addTarget:_beautifyFilter];

    //美颜后输出至预览
    [_beautifyFilter addTarget:_gpuImageView];

    // 到这里我们已经能够打开相机并预览了。
    // 因为要推流，除了预览之外，我们还要截取到视频数据。这就需要使用GPUImage中的GPUImageRawDataOutput，它能将美颜后的数据输出，便于我们处理后发送出去。
    // AWGPUImageAVCaptureDataHandler继承自GPUImageRawDataOutput，从 newFrameReadyAtTime 方法中就可以获取到美颜后输出的数据。
    // 输出的图片格式为BGRA。
    _dataHandler = [[AWGPUImageAVCaptureDataHandler alloc] initWithImageSize:CGSizeMake(self.videoConfig.width, self.videoConfig.height) resultsInBGRAFormat:YES capture:self];
    [_beautifyFilter addTarget:_dataHandler];

    // 令AWGPUImageAVCaptureDataHandler实现AWGPUImageVideoCameraDelegate协议，并且让camera的awAudioDelegate指向_dataHandler对象。
    // 将音频数据转到_dataHandler中处理。然后音视频数据就可以都在_dataHandler中处理了。
    _videoCamera.awAudioDelegate = _dataHandler;

    //开始捕获视频
    [self.videoCamera startCameraCapture];

    //修改帧率
    [self updateFps:self.videoConfig.fps];
}
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
   
   

    
    
   
   
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

美颜滤镜使用的是：https://github.com/Guikunzhi/BeautifyFaceDemo
感谢Guikunzhi的分享。想了解美颜详细算法的同学，可以自行学习。

AWGPUImageAVCaptureDataHandler中音视频处理方法：

// 获取到音频数据，通过sendAudioSampleBuffer发送出去
-(void)processAudioSample:(CMSampleBufferRef)sampleBuffer{
    if(!self.capture || !self.capture.isCapturing){
        return;
    }
    [self.capture sendAudioSampleBuffer:sampleBuffer];
}

// 获取到视频数据，转换格式后，使用sendVideoYuvData 发送出去。
-(void)newFrameReadyAtTime:(CMTime)frameTime atIndex:(NSInteger)textureIndex{
    [super newFrameReadyAtTime:frameTime atIndex:textureIndex];
    if(!self.capture || !self.capture.isCapturing){
        return;
    }
    // GPUImage获取到的数据是BGRA格式。
    // 而各种编码器最适合编码的格式还是yuv。
    // 所以在此将BGRA格式的视频数据转成yuv格式。(后面会介绍yuv和pcm格式)
    // 将bgra转为yuv
    int width = imageSize.width;
    int height = imageSize.height;
    int w_x_h = width * height;
    // 1帧yuv数据长度为 宽x高 * 3 / 2
    int yuv_len = w_x_h * 3 / 2;

    uint8_t *yuv_bytes = malloc(yuv_len);

    //使用libyuv库，做格式转换。libyuv中的格式都是大端(高位存高位，低位存低位)，而iOS设备是小端(高位存低位，低位存高位)，小端为BGRA，则大端为ARGB，所以这里使用ARGBToNV12。
    //self.rawBytesForImage就是美颜后的图片数据，格式是BGRA。
    //关于大端小端，请自行baidu。
    [self lockFramebufferForReading];
    ARGBToNV12(self.rawBytesForImage, width * 4, yuv_bytes, width, yuv_bytes + w_x_h, width, width, height);
    [self unlockFramebufferAfterReading];

    NSData *yuvData = [NSData dataWithBytesNoCopy:yuv_bytes length:yuv_len];

    //将获取到的yuv420数据发送出去
    [self.capture sendVideoYuvData:yuvData];
}
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
   
   

    
    
   
   
   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

至此，已经成功使用GPUImage获取视频，美颜，格式转换，准备发送数据。还是很简单的。

我们现在能够使用2种方法来获取音频数据，接下来会介绍音视频编码相关内容。

文章列表

1. 1小时学会：最简单的iOS直播推流（一）项目介绍
2. 1小时学会：最简单的iOS直播推流（二）代码架构概述
3. 1小时学会：最简单的iOS直播推流（三）使用系统接口捕获音视频
4. 1小时学会：最简单的iOS直播推流（四）如何使用GPUImage，如何美颜
5. 1小时学会：最简单的iOS直播推流（五）yuv、pcm数据的介绍和获取
6. 1小时学会：最简单的iOS直播推流（六）h264、aac、flv介绍
7. 1小时学会：最简单的iOS直播推流（七）h264/aac 硬编码
8. 软编码
9. flv 编码与音视频时间戳同步
10. rtmp协议
11. sps/pps 与 AudioSpecificConfig
12. libaw库介绍

$(function () {$('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var$numbering = $('

').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i