iOS AR之视频特效挂件(GPUImage)

在苹果开发者大会之后，苹果要在iOS 11 、Xcode9中添加ARKit框架，似乎AR没有那么神秘，我们早就用过了，比如QQ的视频挂件、花椒的礼物动画、还有支付宝的扫福都应该属于AR技术。今天我就浅谈视频特效挂件。

思路
- 1.通过摄像头捕获数据
- 2.回调数据CMSampleBufferRef
- 3.进行物体识别（人脸识别）这里用的是CoreImage的人脸识别CIDetector、也可用OpenCV等。
- 4.显示特效（视频、GIF、图片、文字等等）
- 5.视频本地写入
涉及到的技术
- 1.GPUImageVideoCamera的使用
- 2.GPUImageUIElement的使用
- 3.FLAnimatedImageView的使用
- 4.GPUImageMovie的使用
- 5.GPUImageFilter的使用
- 6.CIDetector的使用
我做的是显示GIF特效。效果图: 请忽略我的模样\（￣︶￣）/

Demo没有做美颜，可查看我GPUImage其他博客、应该会有收获

完整Demo地址：

https://coding.net/u/Xoxo_x/p/VideoAndAudio/git/blob/master/GPUImage%E7%9B%B8%E6%9C%BA%E7%89%B9%E6%95%88.zip

主要步骤：

    [self initGPUImageView];//初始化GPUImageView//初始化滤镜GPUImageAlphaBlendFilter,主要用来做半透明的混合的[self initFilter];[self initCamera];//初始化相机

GPUImageUIElement 是GPUImage提供的可以将我们的普通UI转化为纹理输出到视频中

- (UIView *)elementView {if (!_elementView) {gifImageView = [[FLAnimatedImageView alloc] init];gifImageView.frame                = CGRectMake(0, 0, 160, 160);[self.view addSubview:gifImageView];NSData   *gifImageData             = [NSData dataWithContentsOfFile:[[NSBundle mainBundle]pathForResource:[NSString stringWithFormat:@"hudie"] ofType:@"gif" inDirectory:nil]];[self animatedImageView:gifImageView data:gifImageData];[_elementView addSubview:gifImageView];}return _elementView;
}

FLAnimatedImageView 用于播放gif动画

    GPUImageFilter* progressFilter = [[GPUImageFilter alloc] init];[videoCamera addTarget:progressFilter];

将两个纹理输出到GPUImageView

[progressFilter addTarget:filter];[pictureView addTarget:filter];[filter addTarget:filterView];

设置处理回调

__strong typeof(self) strongSelf = self;[progressFilter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {// update capImageView's frameCGRect rect = strongSelf.faceBounds;CGSize size = gifImageView.frame.size;[UIView animateWithDuration:0.2 animations:^{gifImageView.frame = CGRectMake(rect.origin.x +  (rect.size.width - size.width)/2, rect.origin.y - size.height, size.width, size.height);}];[pictureView updateWithTimestamp:time];[strongSelf->pictureView updateWithTimestamp:time];}];

使用屏幕刷新频率

 CADisplayLink * displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(onDisplayLink:)];[displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];

视频回调代理、获取原始数据

- (void)willOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer {if (!_faceThinking) {CFAllocatorRef allocator = CFAllocatorGetDefault();CMSampleBufferRef sbufCopyOut;CMSampleBufferCreateCopy(allocator,sampleBuffer,&sbufCopyOut);[self performSelectorInBackground:@selector(grepFacesForSampleBuffer:) withObject:CFBridgingRelease(sbufCopyOut)];}
}

将CMSampleBufferRef进行图像转化识别、提取特征

    CVPixelBufferRef pixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);CFDictionaryRef attachments = CMCopyDictionaryOfAttachments(kCFAllocatorDefault, sampleBuffer, kCMAttachmentMode_ShouldPropagate);CIImage *convertedImage = [[CIImage alloc] initWithCVPixelBuffer:pixelBuffer options:(__bridge NSDictionary *)attachments];

imageOptions = [NSDictionary dictionaryWithObject:[NSNumber numberWithInt:exifOrientation] forKey:CIDetectorImageOrientation];NSArray *features = [self.faceDetector featuresInImage:convertedImage options:imageOptions];// get the clean aperture// the clean aperture is a rectangle that defines the portion of the encoded pixel dimensions// that represents image data valid for display.CMFormatDescriptionRef fdesc = CMSampleBufferGetFormatDescription(sampleBuffer);CGRect clap = CMVideoFormatDescriptionGetCleanAperture(fdesc, false /*originIsTopLeft == false*/);

进行识别

    dispatch_async(dispatch_get_main_queue(), ^{CGRect previewBox = self.view.frame;if (featureArray.count) {gifImageView.hidden = NO;}else {
//            gifImageView.hidden = YES;return ;}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 SystemCGRect faceRect = [faceFeature bounds];// flip preview width and heightCGFloat 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 scaledCGFloat 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);//mirrorCGRect 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;//                if (self.faceView) {//                    [self.faceView removeFromSuperview];//                    self.faceView =  nil;//                }////                // create a UIView using the bounds of the face//                self.faceView = [[UIView alloc] initWithFrame:self.faceBounds];////                // add a border around the newly created UIView//                self.faceView.layer.borderWidth = 1;//                self.faceView.layer.borderColor = [[UIColor redColor] CGColor];////                // add the new view to create a box around the face//                [self.view addSubview:self.faceView];}}});

然后再回到中更改蝴蝶的位置为头顶的位置

完整Demo地址：

https://coding.net/u/Xoxo_x/p/VideoAndAudio/git/blob/master/GPUImage%E7%9B%B8%E6%9C%BA%E7%89%B9%E6%95%88.zip

iOS AR之视频特效挂件(GPUImage)相关推荐

iphone ios 视频特效，视频合成
如果对av foundation 不熟悉得话,建议先看看wwdc 2010 关于av foundation得讲座.http://blog.csdn.net/linzhiji/article/detai ...
手把手实现火爆全网的视频特效 “蚂蚁呀嘿”，太魔性了
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达导读 Hi,大家好,今天是周末,今天给各位读者分享最近很火的视频特效. 将会依据现有的demo,一步步 ...
那么多短视频特效，凭什么抖音出的这么火
萧箫发自凹非寺量子位报道 | 公众号 QbitAI 说到短视频特效,你或许第一时间会想到"抖音特效". 没错,抖音的特效似乎总是火到出圈,像用一段视频让你"重返三 ...
美摄iOS端短视频SDK视频编辑的流程及方法
美摄短视频SDK提供视频编辑功能,支持视频图片素材混合导入.滤镜.配音.时间特效.画中画等丰富的编辑效果.本文介绍iOS端短视频SDK视频编辑的流程及方法. 短视频SDK主要包含"视频录制& ...
Android IOS WebRTC 音视频开发总结（三八）-- tx help
Android IOS WebRTC 音视频开发总结(三八)-- tx help 本文主要介绍帮一个程序员解决webrtc疑问的过程,文章来自博客园RTC.Blacker,支持原创,转载请说明出处(w ...
Android IOS WebRTC 音视频开发总结（二三）-- hurtc使用说明
Android IOS WebRTC 音视频开发总结(二三)-- hurtc使用说明本文主要介绍如何测试基于浏览器和手机的视频通话程序,转载请说明出处,文章来自博客园RTC.Blacker,更多详见 ...
Android IOS WebRTC 音视频开发总结（四二）-- webrtc开发者大会
Android IOS WebRTC 音视频开发总结(四二)-- webrtc开发者大会本文主要介绍11月要在北京举办的webrtc开发者全球大会,文章来自博客园RTC.Blacker,支持原创,转 ...
短视频APP开发：短视频特效SDK功能火爆来袭！
为什么短视频这么火呢?因为它符合了用户碎片化时间的需求,既娱乐了大众,又不会浪费用户太多时间. 短视频APP开发以互联网技术为核心,在原有的基础上不断进行创新,进而拥有多种强大的拍摄功能,让用户可以快 ...
Android IOS WebRTC 音视频开发总结（八十七）-- WebRTC中丢包重传NACK实现分析
Android IOS WebRTC 音视频开发总结(八十七)-- WebRTC中丢包重传NACK实现分析本文主要介绍WebRTC中丢包重传NACK的实现,作者:weizhenwei ,文章最早发表 ...

iOS AR之视频特效挂件(GPUImage)

完整Demo地址：

完整Demo地址：

iOS AR之视频特效挂件(GPUImage)相关推荐

最新文章

热门文章