Osho 相机是我独立开发上架的一个相机 App，App Store地址：点我。它支持1:1，4:3，16:9多种分辨率拍摄，滤镜可在取景框的实时预览，拍摄过程可与滤镜实时合成，支持分段拍摄，支持回删等特性。下面先分享分享开发这个 App 的一些心得体会，文末会给出项目的下载地址，阅读本文可能需要一点点 AVFoundation 开发的基础。
1、GLKView和GPUImageVideoCamera
一开始取景框的预览我是基于 GLKView 做的，GLKView 是苹果对OpenGL的封装，我们可以使用它的回调函数-glkView:drawInRect:进行对处理后的samplebuffer渲染的工作（samplebuffer是在相机回调didOutputSampleBuffer产生的），附上当初简版代码：
Objective-C
- (CIImage *)renderImageInRect:(CGRect)rect {
CMSampleBufferRef sampleBuffer = _sampleBufferHolder.sampleBuffer;
if (sampleBuffer != nil) {
UIImage *originImage = [self imageFromSamplePlanerPixelBuffer:sampleBuffer];
if (originImage) {
if (self.filterName && self.filterName.length > 0) {
GPUImageOutput<GPUImageInput> *filter;
if ([self.filterType isEqual: @"1"]) {
Class class = NSClassFromString(self.filterName);
filter = [[class alloc] init];
} else {
NSBundle *bundle = [NSBundle bundleForClass:self.class];
NSURL *filterAmaro = [NSURL fileURLWithPath:[bundle pathForResource:self.filterName ofType:@"acv"]];
filter = [[GPUImageToneCurveFilter alloc] initWithACVURL:filterAmaro];
}
[filter forceProcessingAtSize:originImage.size];
GPUImagePicture *pic = [[GPUImagePicture alloc] initWithImage:originImage];
[pic addTarget:filter];
[filter useNextFrameForImageCapture];
[filter addTarget:self.gpuImageView];
[pic processImage];
UIImage *filterImage = [filter imageFromCurrentFramebuffer];
//UIImage *filterImage = [filter imageByFilteringImage:originImage];
_CIImage = [[CIImage alloc] initWithCGImage:filterImage.CGImage options:nil];
} else {
_CIImage = [CIImage imageWithCVPixelBuffer:CMSampleBufferGetImageBuffer(sampleBuffer)];
}
}
CIImage *image = _CIImage;
if (image != nil) {
image = [image imageByApplyingTransform:self.preferredCIImageTransform];
if (self.scaleAndResizeCIImageAutomatically) {
image = [self scaleAndResizeCIImage:image forRect:rect];
}
}
return image;
}
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
@autoreleasepool {
rect = CGRectMultiply(rect, self.contentScaleFactor);
glClearColor(0, 0, 0, 0);
glClear(GL_COLOR_BUFFER_BIT);
CIImage *image = [self renderImageInRect:rect];
if (image != nil) {
[_context.CIContext drawImage:image inRect:rect fromRect:image.extent];
}
}
}
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
49
50
51
52
53
54
55
56
57
58-(CIImage*)renderImageInRect:(CGRect)rect{
CMSampleBufferRefsampleBuffer=_sampleBufferHolder.sampleBuffer;
if(sampleBuffer!=nil){
UIImage*originImage=[selfimageFromSamplePlanerPixelBuffer:sampleBuffer];
if(originImage){
if(self.filterName&&self.filterName.length>0){
GPUImageOutput<GPUImageInput>*filter;
if([self.filterTypeisEqual:@"1"]){
Classclass=NSClassFromString(self.filterName);
filter=[[classalloc]init];
}else{
NSBundle*bundle=[NSBundlebundleForClass:self.class];
NSURL*filterAmaro=[NSURLfileURLWithPath:[bundlepathForResource:self.filterNameofType:@"acv"]];
filter=[[GPUImageToneCurveFilteralloc]initWithACVURL:filterAmaro];
}
[filterforceProcessingAtSize:originImage.size];
GPUImagePicture*pic=[[GPUImagePicturealloc]initWithImage:originImage];
[picaddTarget:filter];
[filteruseNextFrameForImageCapture];
[filteraddTarget:self.gpuImageView];
[picprocessImage];
UIImage*filterImage=[filterimageFromCurrentFramebuffer];
//UIImage *filterImage = [filter imageByFilteringImage:originImage];
_CIImage=[[CIImagealloc]initWithCGImage:filterImage.CGImageoptions:nil];
}else{
_CIImage=[CIImageimageWithCVPixelBuffer:CMSampleBufferGetImageBuffer(sampleBuffer)];
}
}
CIImage*image=_CIImage;
if(image!=nil){
image=[imageimageByApplyingTransform:self.preferredCIImageTransform];
if(self.scaleAndResizeCIImageAutomatically){
image=[selfscaleAndResizeCIImage:imageforRect:rect];
}
}
returnimage;
}
-(void)glkView:(GLKView*)viewdrawInRect:(CGRect)rect{
@autoreleasepool{
rect=CGRectMultiply(rect,self.contentScaleFactor);
glClearColor(0,0,0,0);
glClear(GL_COLOR_BUFFER_BIT);
CIImage*image=[selfrenderImageInRect:rect];
if(image!=nil){
[_context.CIContextdrawImage:imageinRect:rectfromRect:image.extent];
}
}
}
这样的实现在低端机器上取景框会有明显的卡顿，而且 ViewController 上的列表几乎无法滑动，虽然手势倒是还可以支持。 因为要实现分段拍摄与回删等功能，采用这种方式的初衷是期望更高度的自定义，而不去使用GPUImageVideoCamera， 毕竟我得在AVCaptureVideoDataOutputSampleBufferDelegate，AVCaptureAudioDataOutputSampleBufferDelegate这两个回调做文章，为了满足需求，所以得在不侵入GPUImage源代码的前提下点功夫。
怎么样才能在不破坏GPUImageVideoCamera的代码呢？我想到两个方法，第一个是创建一个类，然后把GPUImageVideoCamera里的代码拷贝过来，这么做简单粗暴，缺点是若以后GPUImage升级了，代码维护起来是个小灾难；再来说说第二个方法——继承，继承是个挺优雅的行为，可它的麻烦在于获取不到私有变量，好在有强大的 runtime，解决了这个棘手的问题。下面是用 runtime 获取私有变量：
Objective-C
- (AVCaptureAudioDataOutput *)gpuAudioOutput {
Ivar var = class_getInstanceVariable([super class], "audioOutput");
id nameVar = object_getIvar(self, var);
return nameVar;
}
1
2
3
4
5
6-(AVCaptureAudioDataOutput*)gpuAudioOutput{
Ivarvar=class_getInstanceVariable([superclass],"audioOutput");
idnameVar=object_getIvar(self,var);
returnnameVar;
}
至此取景框实现了滤镜的渲染并保证了列表的滑动帧率。
2、实时合成以及 GPUImage 的 outputImageOrientation
顾名思义，outputImageOrientation属性和图像方向有关的。GPUImage的这个属性是对不同设备的在取景框的图像方向做过优化的，但这个优化会与 videoOrientation 产生冲突，它会导致切换摄像头导致图像方向不对，也会造成拍摄完之后的视频方向不对。 最后的解决办法是确保摄像头输出的图像方向正确，所以将其设置为UIInterfaceOrientationPortrait，而不对videoOrientation进行设置，剩下的问题就是怎样处理拍摄完成之后视频的方向。
先来看看视频的实时合成，因为这里包含了对用户合成的CVPixelBufferRef资源处理。还是使用继承的方式继承GPUImageView，其中使用了 runtime 调用私有方法：
Objective-C
SEL s = NSSelectorFromString(@"textureCoordinatesForRotation:");
IMP imp = [[GPUImageView class] methodForSelector:s];
GLfloat *(*func)(id, SEL, GPUImageRotationMode) = (void *)imp;
GLfloat *result = [GPUImageView class] ? func([GPUImageView class], s, inputRotation) : nil;
......
glVertexAttribPointer(self.gpuDisplayTextureCoordinateAttribute, 2, GL_FLOAT, 0, 0, result);
1
2
3
4
5
6
7
8
9SELs=NSSelectorFromString(@"textureCoordinatesForRotation:");
IMPimp=[[GPUImageViewclass]methodForSelector:s];
GLfloat*(*func)(id,SEL,GPUImageRotationMode)=(void*)imp;
GLfloat*result=[GPUImageViewclass]?func([GPUImageViewclass],s,inputRotation): nil;
......
glVertexAttribPointer(self.gpuDisplayTextureCoordinateAttribute,2,GL_FLOAT,0,0,result);
直奔重点——CVPixelBufferRef的处理，将 renderTarget 转换为 CGImageRef 对象，再使用 UIGraphics 获得经CGAffineTransform处理过方向的 UIImage，此时 UIImage 的方向并不是正常的方向，而是旋转过90度的图片，这么做的目的是为 videoInput 的 transform 属性埋下伏笔。下面是 CVPixelBufferRef 的处理代码：
Objective-C
int width = self.gpuInputFramebufferForDisplay.size.width;
int height = self.gpuInputFramebufferForDisplay.size.height;
renderTarget = self.gpuInputFramebufferForDisplay.gpuBufferRef;
NSUInteger paddedWidthOfImage = CVPixelBufferGetBytesPerRow(renderTarget) / 4.0;
NSUInteger paddedBytesForImage = paddedWidthOfImage * (int)height * 4;
glFinish();
CVPixelBufferLockBaseAddress(renderTarget, 0);
GLubyte *data = (GLubyte *)CVPixelBufferGetBaseAddress(renderTarget);
CGDataProviderRef ref = CGDataProviderCreateWithData(NULL, data, paddedBytesForImage, NULL);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGImageRef iref = CGImageCreate((int)width, (int)height, 8, 32, CVPixelBufferGetBytesPerRow(renderTarget), colorspace, kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst, ref, NULL, NO, kCGRenderingIntentDefault);
UIGraphicsBeginImageContext(CGSizeMake(height, width));
CGContextRef cgcontext = UIGraphicsGetCurrentContext();
CGAffineTransform transform = CGAffineTransformIdentity;
transform = CGAffineTransformMakeTranslation(height / 2.0, width / 2.0);
transform = CGAffineTransformRotate(transform, M_PI_2);
transform = CGAffineTransformScale(transform, 1.0, -1.0);
CGContextConcatCTM(cgcontext, transform);
CGContextSetBlendMode(cgcontext, kCGBlendModeCopy);
CGContextDrawImage(cgcontext, CGRectMake(0.0, 0.0, width, height), iref);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.img = image;
CFRelease(ref);
CFRelease(colorspace);
CGImageRelease(iref);
CVPixelBufferUnlockBaseAddress(renderTarget, 0);
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
34intwidth=self.gpuInputFramebufferForDisplay.size.width;
intheight=self.gpuInputFramebufferForDisplay.size.height;
renderTarget=self.gpuInputFramebufferForDisplay.gpuBufferRef;
NSUIntegerpaddedWidthOfImage=CVPixelBufferGetBytesPerRow(renderTarget)/4.0;
NSUIntegerpaddedBytesForImage=paddedWidthOfImage*(int)height*4;
glFinish();
CVPixelBufferLockBaseAddress(renderTarget,0);
GLubyte*data=(GLubyte*)CVPixelBufferGetBaseAddress(renderTarget);
CGDataProviderRefref=CGDataProviderCreateWithData(NULL,data,paddedBytesForImage,NULL);
CGColorSpaceRefcolorspace=CGColorSpaceCreateDeviceRGB();
CGImageRefiref=CGImageCreate((int)width,(int)height,8,32,CVPixelBufferGetBytesPerRow(renderTarget),colorspace,kCGBitmapByteOrder32Little|kCGImageAlphaPremultipliedFirst,ref,NULL,NO,kCGRenderingIntentDefault);
UIGraphicsBeginImageContext(CGSizeMake(height,width));
CGContextRefcgcontext=UIGraphicsGetCurrentContext();
CGAffineTransformtransform=CGAffineTransformIdentity;
transform=CGAffineTransformMakeTranslation(height/2.0,width/2.0);
transform=CGAffineTransformRotate(transform,M_PI_2);
transform=CGAffineTransformScale(transform,1.0,-1.0);
CGContextConcatCTM(cgcontext,transform);
CGContextSetBlendMode(cgcontext,kCGBlendModeCopy);
CGContextDrawImage(cgcontext,CGRectMake(0.0,0.0,width,height),iref);
UIImage*image=UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.img=image;
CFRelease(ref);
CFRelease(colorspace);
CGImageRelease(iref);
CVPixelBufferUnlockBaseAddress(renderTarget,0);
而 videoInput 的 transform 属性设置如下：
Objective-C
_videoInput.transform = CGAffineTransformRotate(_videoConfiguration.affineTransform, -M_PI_2);
1
2_videoInput.transform=CGAffineTransformRotate(_videoConfiguration.affineTransform,-M_PI_2);
经过这两次方向的处理，合成的小视频终于方向正常了。此处为简版的合成视频代码：
Objective-C
CIImage *image = [[CIImage alloc] initWithCGImage:img.CGImage options:nil];
CVPixelBufferLockBaseAddress(pixelBuffer, 0);
[self.context.CIContext render:image toCVPixelBuffer:pixelBuffer];
...
[_videoPixelBufferAdaptor appendPixelBuffer:pixelBuffer withPresentationTime:bufferTimestamp]
1
2
3
4
5
6CIImage*image=[[CIImagealloc]initWithCGImage:img.CGImageoptions:nil];
CVPixelBufferLockBaseAddress(pixelBuffer,0);
[self.context.CIContextrender:imagetoCVPixelBuffer:pixelBuffer];
...
[_videoPixelBufferAdaptorappendPixelBuffer:pixelBufferwithPresentationTime:bufferTimestamp]
可以看到关键点还是在于上面继承自GPUImageView这个类获取到的 renderTarget 属性，它应该即是取景框实时预览的结果，我在最初的合成中是使用 sampleBuffer 转 UIImage，再通过 GPUImage 添加滤镜，最后将 UIImage 再转 CIImage，这么做导致拍摄时会卡。当时我几乎想放弃了，甚至想采用拍好后再加滤镜的方式绕过去，最后这些不纯粹的方法都被我 ban 掉了。
既然滤镜可以在取景框实时渲染，我想到了GPUImageView可能有料。在阅读过 GPUImage 的诸多源码后，终于在GPUImageFramebuffer.m找到了一个叫 renderTarget 的属性。至此，合成的功能也告一段落。
3、关于滤镜
这里主要分享个有意思的过程。App 里有三种类型的滤镜。基于 glsl 的、直接使用 acv 的以及直接使用 lookuptable
的。lookuptable 其实也是 photoshop
可导出的一种图片，但一般的软件都会对其加密，下面简单提下我是如何反编译“借用”某软件的部分滤镜吧。使用 Hopper Disassembler
软件进行反编译，然后通过某些关键字的搜索，幸运地找到了下图的一个方法名。
reverse 只能说这么多了….在开源代码里我已将这一类敏感的滤镜剔除了。
小结
开发相机 App 是个挺有意思的过程，在其中邂逅不少优秀开源代码，向开源代码学习，才能避免自己总是写出一成不变的代码。最后附上项目的开源地址https://github.com/hawk0620/ZPCamera，希望能够帮到有需要的朋友，也欢迎 star 和 pull request。
网友评论