android 直播Faceu,在直播应用中添加Faceu效果

在我写的上篇文章 中，介绍了美颜滤镜的实现原理，已经能够体会到[GPUImage](https://github.com/BradLarson/GPUImage) 的强大。本文将要介绍的Faceu贴纸效果也是基于GPUImage实现的，demo我放在了[GitHub](https://github.com/Guikunzhi/YLFaceuDemo)上。

1.核心原理

Faceu贴纸效果其实就是在人脸上贴一些图片，同时这些图片是跟随着人脸的位置改变的。如果我们不强调贴图的位置，这就是一个简单的水印需求。

Faceu原理.png

根据人脸检测的结果动态调整水印贴纸的位置即可实现简单的Faceu效果。

2.水印

在GPUImage的官方demo中就已经有文字水印的实现：

GPUImageFilter *filter = [[GPUImageFilter alloc] init];

[self.videoCamera addTarget:filter];

GPUImageAlphaBlendFilter *blendFilter = [[GPUImageAlphaBlendFilter alloc] init];

blendFilter.mix = 1.0;

NSDate *startTime = [NSDate date];

UIView *temp = [[UIView alloc] initWithFrame:self.view.frame];

UILabel *timeLabel = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 240.0f, 40.0f)];

timeLabel.font = [UIFont systemFontOfSize:17.0f];

timeLabel.text = @"Time: 0.0 s";

timeLabel.textAlignment = UITextAlignmentCenter;

timeLabel.backgroundColor = [UIColor clearColor];

timeLabel.textColor = [UIColor whiteColor];

[temp addSubview:timeLabel];

uiElementInput = [[GPUImageUIElement alloc] initWithView:temp];

[filter addTarget:blendFilter];

[uiElementInput addTarget:blendFilter];

[blendFilter addTarget:filterView];

__unsafe_unretained GPUImageUIElement *weakUIElementInput = uiElementInput;

[filter setFrameProcessingCompletionBlock:^(GPUImageOutput * filter, CMTime frameTime){

timeLabel.text = [NSString stringWithFormat:@"Time: %f s", -[startTime timeIntervalSinceNow]];

[weakUIElementInput update];

}];

要理解它的实现原理，需要搞懂GPUImageUIElement和GPUImageAlphaBlendFilter。GPUImageUIElement的作用是把一个视图的layer通过CALayer的renderInContext:方法把layer转化为image，然后作为OpenGL的纹理传给GPUImageAlphaBlendFilter。而GPUImageAlphaBlendFilter则是一个两输入的blend filter, 它的第一个输入是摄像头数据，第二个输入则是刚刚提到的GPUImageUIElement的数据，GPUImageAlphaBlendFilter将这两个输入做alpha blend，可以简单的理解为将第二个输入叠加到第一个的上面，更多关于[alpha blend](https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending)在维基百科上有介绍。下图是整个加水印的过程：

水印.png

3.人脸检测

利用CIDetector即可简单的实现人脸检测，首先是CIDetector的初始化:

NSDictionary *detectorOptions = [[NSDictionary alloc] initWithObjectsAndKeys:CIDetectorAccuracyLow, CIDetectorAccuracy, nil];

_faceDetector = [CIDetector detectorOfType:CIDetectorTypeFace context:nil options:detectorOptions];

然后通过将摄像头数据CMSampleBufferRef转化为CIImage，对CIImage用CIDetector进行人脸检测:

CVPixelBufferRef pixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);

CFDictionaryRef attachments = CMCopyDictionaryOfAttachments(kCFAllocatorDefault, sampleBuffer, kCMAttachmentMode_ShouldPropagate);

CIImage *convertedImage = [[CIImage alloc] initWithCVPixelBuffer:pixelBuffer options:(__bridge NSDictionary *)attachments];

NSArray *features = [self.faceDetector featuresInImage:convertedImage options:imageOptions];

上面得到的features数组里的每个元素都是CIFaceFeature对象，根据它就能计算出人脸的具体位置，从而调整中水印图像的位置，达到图像跟随人脸动的效果。

for ( CIFaceFeature *faceFeature in featureArray) {

// find the correct position for the square layer within the previewLayer

// the feature box originates in the bottom left of the video frame.

// (Bottom right if mirroring is turned on)

//Update face bounds for iOS Coordinate System

CGRect faceRect = [faceFeature bounds];

// flip preview width and height

CGFloat temp = faceRect.size.width;

faceRect.size.width = faceRect.size.height;

faceRect.size.height = temp;

temp = faceRect.origin.x;

faceRect.origin.x = faceRect.origin.y;

faceRect.origin.y = temp;

// scale coordinates so they fit in the preview box, which may be scaled

CGFloat widthScaleBy = previewBox.size.width / clap.size.height;

CGFloat heightScaleBy = previewBox.size.height / clap.size.width;

faceRect.size.width *= widthScaleBy;

faceRect.size.height *= heightScaleBy;

faceRect.origin.x *= widthScaleBy;

faceRect.origin.y *= heightScaleBy;

faceRect = CGRectOffset(faceRect, previewBox.origin.x, previewBox.origin.y);

//mirror

CGRect rect = CGRectMake(previewBox.size.width - faceRect.origin.x - faceRect.size.width, faceRect.origin.y, faceRect.size.width, faceRect.size.height);

if (fabs(rect.origin.x - self.faceBounds.origin.x) > 5.0) {

self.faceBounds = rect;

}

}

上面则是计算人脸位置faceBounds的方法，我们再根据faceBounds来更新水印图像的位置：

__weak typeof (self) weakSelf = self;

[filter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {

__strong typeof (self) strongSelf = weakSelf;

// update capImageView's frame

CGRect rect = strongSelf.faceBounds;

CGSize size = strongSelf.capImageView.frame.size;

strongSelf.capImageView.frame = CGRectMake(rect.origin.x + (rect.size.width - size.width)/2, rect.origin.y - size.height, size.width, size.height);

[strongSelf.element update];

}];

4.延伸

问题1：上面用的人脸检测是基于CIDetector的，实际实验发现，当人脸在摄像头中捕获不全时，有可能检测不出人脸，也就没法更新水印图像的位置。因此，更加精准、快速、细致的人脸检测是很有必要的，后面我会尝试使用一些其他的人脸检测方法。

问题2：上面的Faceu贴纸效果是静态图像的贴纸效果，如果要做动态效果的Faceu贴纸该怎么处理呢, Gif? CADisplayLink? 这个有待进一步研究，如果有这方面经验的朋友也欢迎在评论区留言，互相交流学习。