在直播应用中添加Faceu效果

本文将要介绍的Faceu贴纸效果，是基于GPUImage实现的。

1.核心原理

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

Faceu原理.png

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

2.水印

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

   

         要理解它的实现原理，需要搞懂GPUImageUIElement和GPUImageAlphaBlendFilter。GPUImageUIElement的作用是把一个视图的layer通过CALayer的renderInContext:方法把layer转化为image，然后作为OpenGL的纹理传给GPUImageAlphaBlendFilter。而GPUImageAlphaBlendFilter则是一个两输入的blend filter, 它的第一个输入是摄像头数据，第二个输入则是刚刚提到的

GPUImageUIElement的数据，GPUImageAlphaBlendFilter将这两个输入做alpha blend，可以简单的理解为将第二个输入叠加到第一个的上面，更多关于alpha blend在维基百科上有介绍。下图是整个加水印的过程：

 

水印.png

3.人脸检测

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

 

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

 

 

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

 

 

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

4.延伸

· 问题1：

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

· 问题2：

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

由于上传附件及文字限制，有时部分图片、文字可能显示不了，详情请见：http://mp.weixin.qq.com/s?__biz=MzI5ODI3NzY2MA==&mid=100000565&idx=3&sn=05a9867867cfcf45501e33e20e7a8c58#rd
欢迎大家一起交流。
扫描以下二维码，获取更多更精美文章！(扫码关注有意向不到的惊喜的哦！！）

 
关注我们微信订阅号（ uniguytech100） 与服务号（uniguytech），获取更多更精美文章！
也欢迎加入【大家技术网讨论QQ群】，群号码：256175955，请备注你个人的介绍！让我们一起聊聊it的那些事！

转载于:https://my.oschina.net/uniguy/blog/680398