带有视频背景和绘画叠加性能问题的完整视频屏幕捕获
Posted
技术标签:
【中文标题】带有视频背景和绘画叠加性能问题的完整视频屏幕捕获【英文标题】：Full Video Screen Capture with Video background and painting overlay performance issues 【发布时间】：2012-10-17 16:06:10 【问题描述】：长时间的***阅读器，第一次发帖。
我正在尝试创建一个名为 CloudWriter 的 iPad 应用程序。该应用程序的概念是绘制您在云中看到的形状。下载应用程序后，在启动 CloudWriter 后，用户将看到一个实时视频背景（来自后置摄像头），其顶部有一个 OpenGL 绘图层。用户将能够打开应用程序，将 iPad 指向天空中的云，然后在显示屏上绘制他们所看到的内容。
该应用程序的一个主要功能是让用户记录会话期间显示屏上发生的情况的视频屏幕截图。实时视频源和“绘图”视图将成为平面（合并）视频。
关于当前如何运作的一些假设和背景信息。
使用 Apple 的 AVCamCaptureManager（AVCam 示例项目的一部分）作为大部分相机相关代码的基础。 使用 AVCaptureSessionPresetMedium 作为预设启动 AVCamCapture 会话。 开始通过 videoPreviewLayer 将摄像头馈送作为背景输出。 用允许使用openGL“绘图”（手指绘画风格）的视图覆盖实时videoPreviewLayer。 “绘图”视图背景是 [UIColor clearColor]。此时的想法是，用户可以将 iPad3 相机对准天空中的一些云，并绘制他们看到的形状。此功能完美无缺。当我尝试对用户会话进行“平面”视频屏幕捕获时，我开始遇到性能问题。生成的“平面”视频将使相机输入与用户绘图实时叠加。
Board Cam 是与我们正在寻找的功能类似的应用的一个很好的例子，它可以在 App Store 中找到。
要启动该过程，视图中始终可见一个“记录”按钮。当用户点击录制按钮时，预计在再次点击录制按钮之前，会话将被录制为“平面”视频屏幕截图。
当用户点击“录制”按钮时，代码中会发生以下情况
AVCaptureSessionPreset 由 AVCaptureSessionPresetMedium 更改为 AVCaptureSessionPresetPhoto，允许访问
- (void)captureOutput:(AVCaptureOutput *)captureOutput didOutputSampleBuffer(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection
didOutputSampleBuffer 开始获取数据并从当前视频缓冲区数据创建图像。它通过调用来做到这一点
- (UIImage *) imageFromSampleBuffer:(CMSampleBufferRef) sampleBuffer
应用程序根视图控制器开始覆盖 drawRect 以创建平面图像，用作最终视频中的单个帧。
该帧被写入平面视频为了创建一个平面图像，用作单独的帧，在根 ViewController 的 drawRect 函数中，我们抓取 AVCamCaptureManager 的 didOutputSampleBuffer 代码接收到的最后一帧。下面是
- (void) drawRect:(CGRect)rect
NSDate* start = [NSDate date];
CGContextRef context = [self createBitmapContextOfSize:self.frame.size];
//not sure why this is necessary...image renders upside-down and mirrored
CGAffineTransform flipVertical = CGAffineTransformMake(1, 0, 0, -1, 0, self.frame.size.height);
CGContextConcatCTM(context, flipVertical);
if( isRecording)
[[self.layer presentationLayer] renderInContext:context];
CGImageRef cgImage = CGBitmapContextCreateImage(context);
UIImage* background = [UIImage imageWithCGImage: cgImage];
CGImageRelease(cgImage);
UIImage *bottomImage = background;
if(((AVCamCaptureManager *)self.captureManager).currentImage != nil && isVideoBGActive )
UIImage *image = [((AVCamCaptureManager *)self.mainContentScreen.captureManager).currentImage retain];//[UIImage
CGSize newSize = background.size;
UIGraphicsBeginImageContext( newSize );
// Use existing opacity as is
if( isRecording )
if( [self.mainContentScreen isVideoBGActive] && _recording)
[image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
// Apply supplied opacity
[bottomImage drawInRect:CGRectMake(0,0,newSize.width,newSize.height) blendMode:kCGBlendModeNormal alpha:1.0];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.currentScreen = newImage;
[image release];
if (isRecording)
float millisElapsed = [[NSDate date] timeIntervalSinceDate:startedAt] * 1000.0;
[self writeVideoFrameAtTime:CMTimeMake((int)millisElapsed, 1000)];
float processingSeconds = [[NSDate date] timeIntervalSinceDate:start];
float delayRemaining = (1.0 / self.frameRate) - processingSeconds;
CGContextRelease(context);
//redraw at the specified framerate
[self performSelector:@selector(setNeedsDisplay) withObject:nil afterDelay:delayRemaining > 0.0 ? delayRemaining : 0.01];
createBitmapContextOfSize在下面
- (CGContextRef) createBitmapContextOfSize:(CGSize) size
CGContextRef context = NULL;
CGColorSpaceRef colorSpace = nil;
int bitmapByteCount;
int bitmapBytesPerRow;
bitmapBytesPerRow = (size.width * 4);
bitmapByteCount = (bitmapBytesPerRow * size.height);
colorSpace = CGColorSpaceCreateDeviceRGB();
if (bitmapData != NULL)
free(bitmapData);
bitmapData = malloc( bitmapByteCount );
if (bitmapData == NULL)
fprintf (stderr, "Memory not allocated!");
CGColorSpaceRelease( colorSpace );
return NULL;
context = CGBitmapContextCreate (bitmapData,
size.width ,
size.height,
8, // bits per component
bitmapBytesPerRow,
colorSpace,
kCGImageAlphaPremultipliedFirst);
CGContextSetAllowsAntialiasing(context,NO);
if (context== NULL)
free (bitmapData);
fprintf (stderr, "Context not created!");
CGColorSpaceRelease( colorSpace );
return NULL;
//CGAffineTransform transform = CGAffineTransformIdentity;
//transform = CGAffineTransformScale(transform, size.width * .25, size.height * .25);
//CGAffineTransformScale(transform, 1024, 768);
CGColorSpaceRelease( colorSpace );
return context;
- (void)captureOutput:didOutputSampleBuffer fromConnection
// Delegate routine that is called when a sample buffer was written
- (void)captureOutput:(AVCaptureOutput *)captureOutput didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer
fromConnection:(AVCaptureConnection *)connection
// Create a UIImage from the sample buffer data
[self imageFromSampleBuffer:sampleBuffer];
- (UIImage *) imageFromSampleBuffer:(CMSampleBufferRef) sampleBuffer 下面
// Create a UIImage from sample buffer data - modifed not to return a UIImage *, rather store it in self.currentImage
- (UIImage *) imageFromSampleBuffer:(CMSampleBufferRef) sampleBuffer
// unlock the memory, do other stuff, but don't forget:
// Get a CMSampleBuffer's Core Video image buffer for the media data
CVImageBufferRef imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
// Lock the base address of the pixel buffer
CVPixelBufferLockBaseAddress(imageBuffer, 0);
// uint8_t *tmp = (uint8_t *)CVPixelBufferGetBaseAddress(imageBuffer);
int bytes = CVPixelBufferGetBytesPerRow(imageBuffer); // determine number of bytes from height * bytes per row
//void *baseAddress = malloc(bytes);
size_t height = CVPixelBufferGetHeight(imageBuffer);
uint8_t *baseAddress = malloc( bytes * height );
memcpy( baseAddress, CVPixelBufferGetBaseAddress(imageBuffer), bytes * height );
size_t width = CVPixelBufferGetWidth(imageBuffer);
// Create a device-dependent RGB color space
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
// Create a bitmap graphics context with the sample buffer data
CGContextRef context = CGBitmapContextCreate(baseAddress, width, height, 8,
bytes, colorSpace, kCGBitmapByteOrderDefault | kCGImageAlphaPremultipliedFirst);
// CGContextScaleCTM(context, 0.25, 0.25); //scale down to size
// Create a Quartz image from the pixel data in the bitmap graphics context
CGImageRef quartzImage = CGBitmapContextCreateImage(context);
// Unlock the pixel buffer
CVPixelBufferUnlockBaseAddress(imageBuffer,0);
// Free up the context and color space
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
free(baseAddress);
self.currentImage = [UIImage imageWithCGImage:quartzImage scale:0.25 orientation:UIImageOrientationUp];
// Release the Quartz image
CGImageRelease(quartzImage);
return nil;
最后，我使用 writeVideoFrameAtTime:CMTimeMake 将其写入磁盘，代码如下：
-(void) writeVideoFrameAtTime:(CMTime)time
if (![videoWriterInput isReadyForMoreMediaData])
NSLog(@"Not ready for video data");
else
@synchronized (self)
UIImage* newFrame = [self.currentScreen retain];
CVPixelBufferRef pixelBuffer = NULL;
CGImageRef cgImage = CGImageCreateCopy([newFrame CGImage]);
CFDataRef image = CGDataProviderCopyData(CGImageGetDataProvider(cgImage));
if( image == nil )
[newFrame release];
CVPixelBufferRelease( pixelBuffer );
CGImageRelease(cgImage);
return;
int status = CVPixelBufferPoolCreatePixelBuffer(kCFAllocatorDefault, avAdaptor.pixelBufferPool, &pixelBuffer);
if(status != 0)
//could not get a buffer from the pool
NSLog(@"Error creating pixel buffer: status=%d", status);
// set image data into pixel buffer
CVPixelBufferLockBaseAddress( pixelBuffer, 0 );
uint8_t* destPixels = CVPixelBufferGetBaseAddress(pixelBuffer);
CFDataGetBytes(image, CFRangeMake(0, CFDataGetLength(image)), destPixels); //XXX: will work if the pixel buffer is contiguous and has the same bytesPerRow as the input data
if(status == 0)
BOOL success = [avAdaptor appendPixelBuffer:pixelBuffer withPresentationTime:time];
if (!success)
NSLog(@"Warning: Unable to write buffer to video");
//clean up
[newFrame release];
CVPixelBufferUnlockBaseAddress( pixelBuffer, 0 );
CVPixelBufferRelease( pixelBuffer );
CFRelease(image);
CGImageRelease(cgImage);
只要将 isRecording 设置为 YES，iPad 3 的性能就会从大约 20FPS 下降到大约 5FPS。使用 Insturments，我可以看到以下代码块（来自 drawRect:）是导致性能下降到无法使用的水平的原因。
if( _recording )
if( [self.mainContentScreen isVideoBGActive] && _recording)
[image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];
// Apply supplied opacity
[bottomImage drawInRect:CGRectMake(0,0,newSize.width,newSize.height) blendMode:kCGBlendModeNormal alpha:1.0];
我的理解是，因为我正在捕获全屏，我们失去了“drawInRect”应该提供的所有好处。具体来说，我说的是更快的重绘，因为理论上，我们只更新显示的一小部分（在 CGRect 中传递）。同样，捕获全屏，我不确定 drawInRect 是否能提供几乎一样多的好处。
为了提高性能，我想如果我缩小 imageFromSampleBuffer 提供的图像和绘图视图的当前上下文，我会看到帧速率增加。不幸的是，CoreGrapics.Framework 不是我过去使用过的东西，所以我不知道我是否能够有效地将性能调整到可接受的水平。
CoreGraphics 大师有什么意见吗？
此外，ARC 已对某些代码关闭，分析器显示有一次泄漏，但我认为这是误报。
即将推出，CloudWriter™，天空是极限！
【问题讨论】：
【参考方案1】：如果您想要良好的录制性能，您将需要避免使用 Core Graphics 重绘内容。坚持使用纯 OpenGL ES。
您说您已经在 OpenGL ES 中完成了手指绘画，因此您应该能够将其渲染为纹理。实时视频馈送也可以定向到纹理。从那里，您可以根据手指绘画纹理中的 Alpha 通道对两者进行叠加混合。
使用 OpenGL ES 2.0 着色器很容易做到这一点。事实上，如果您从绘画代码中提供渲染纹理，我的GPUImage 开源框架可以处理其中的视频捕获和混合部分（请参阅 FilterShowcase 示例应用程序以获取叠加在视频上的图像示例）。您必须确保绘画使用的是 OpenGL ES 2.0，而不是 1.1，并且它与 GPUImage OpenGL ES 上下文具有相同的共享组，但我将在 CubeExample 应用程序中展示如何做到这一点。
我还通过使用纹理缓存（在 ios 5.0+ 上）以高性能方式在 GPUImage 中为您处理视频录制。
通过使用类似我的框架并保持在 OpenGL ES 中，您应该能够以稳定的 30 FPS 录制 720p 视频 (iPad 2) 或 1080p 视频 (iPad 3)。
【讨论】：
不幸的是，我使用的是 Apple 的 GLPaint 示例。据我了解，这不是 OpenGL 的理想“初学者”应用程序，因为这是我唯一一次使用 OpenGL。也就是说，它使用OpenGLES1。要同时进行视频和绘图，我需要将 GLPaint 示例从 OpenGLES1 转换为 ES2？你有任何 OpenGLES2 手指绘画风格绘图的例子吗？ 另外.. 查看您的 FilterShowCase 示例，我在哪里可以看到叠加的图像？ @ThatOneGuy - 是的，对于不熟悉 OpenGL ES 的人来说，GLPaint 示例是一个可怕的起点（看看这里提出的数百个问题）。有时我希望他们没有发布它。该示例使用 OpenGL ES 1.1，它与我的框架不兼容，因此如果您想使用它，您需要对纹理进行相同类型的渲染，但您需要自己完成所有绘图代码，结合创造性地使用混合模式将您的绘图覆盖在相机的源纹理上。对于刚接触 OpenGL ES 的人来说，这将是一些工作。 @ThatOneGuy - 关于叠加图像，请查看 FilterShowcase 中的混合模式。我使用的图像是不透明的，因此它没有显示出良好的叠加混合，但我相信角检测器、线检测器和 UI 元素示例确实显示了具有 alpha 通道的内容如何叠加在源视频源上。以上是关于带有视频背景和绘画叠加性能问题的完整视频屏幕捕获的主要内容，如果未能解决你的问题，请参考以下文章