在直播应用中添加Faceu效果

在我写的上篇文章中,介绍了美颜滤镜的实现原理,已经能够体会到 GPUImage 的强大。本文将要介绍的Faceu贴纸效果也是基于GPUImage实现的,demo我放在了GitHub上。

1.核心原理

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

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

2.水印

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

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

3.人脸检测

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

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

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

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

4.延伸

  • 问题1:上面用的人脸检测是基于CIDetector的,实际实验发现,当人脸在摄像头中捕获不全时,有可能检测不出人脸,也就没法更新水印图像的位置。因此,更加精准、快速、细致的人脸检测是很有必要的,后面我会尝试使用一些其他的人脸检测方法。
  • 问题2:上面的Faceu贴纸效果是静态图像的贴纸效果,如果要做动态效果的Faceu贴纸该怎么处理呢, Gif? CADisplayLink? 这个有待进一步研究,如果有这方面经验的朋友也欢迎在评论区留言,互相交流学习。

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

1 3 收藏 评论

关于作者:琨君

14年研究生毕业于清华大学电子工程系,至今一直从事iOS相关开发,目前在做一款移动视频直播APP 个人主页 · 我的文章 · 1 ·   

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部