我遇到了同样的问题,需要同时显示多个实时视图。上面使用 UIImage 的答案对于我的需要来说太慢了。这是我找到的两个解决方案:
1.CAReplicator层
第一个选项是使用CAReplicator层 https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CAReplicatorLayer_class/Reference/Reference.html自动复制图层。正如文档所说,它将自动创建“......指定数量的子图层(源图层)副本,每个副本都可能应用几何、时间和颜色变换。”
如果除了简单的几何或颜色变换之外没有太多与实时预览的交互(Think Photo Booth),那么这非常有用。我最常看到 CAReplicatorLayer 被用作创建“反射”效果的一种方式。
以下是复制 CACaptureVideoPreviewLayer 的一些示例代码:
初始化 AVCaptureVideoPreviewLayer
AVCaptureVideoPreviewLayer *previewLayer = [[AVCaptureVideoPreviewLayer alloc] initWithSession:session];
[previewLayer setVideoGravity:AVLayerVideoGravityResizeAspectFill];
[previewLayer setFrame:CGRectMake(0.0, 0.0, self.view.bounds.size.width, self.view.bounds.size.height / 4)];
初始化CAReplicatorLayer并设置属性
注意:这将复制实时预览图层four times.
NSUInteger replicatorInstances = 4;
CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
replicatorLayer.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height / replicatorInstances);
replicatorLayer.instanceCount = instances;
replicatorLayer.instanceTransform = CATransform3DMakeTranslation(0.0, self.view.bounds.size.height / replicatorInstances, 0.0);
添加图层
注意:根据我的经验,您需要将要复制的图层作为子图层添加到 CAReplicatorLayer 中。
[replicatorLayer addSublayer:previewLayer];
[self.view.layer addSublayer:replicatorLayer];
缺点
使用 CAReplicatorLayer 的一个缺点是它处理层复制的所有放置。因此,它将对每个实例应用任何集合转换,并且它将全部包含在其自身内。例如。无法在两个单独的单元上复制 AVCaptureVideoPreviewLayer。
2. 手动渲染SampleBuffer
这种方法虽然有点复杂,但解决了上面提到的 CAReplicatorLayer 的缺点。通过手动渲染实时预览,您可以渲染任意数量的视图。当然,性能可能会受到影响。
注意:可能还有其他方法来渲染 SampleBuffer,但我选择 OpenGL 因为它的性能。代码的灵感和修改来自CIF欢乐屋 https://developer.apple.com/library/ios/samplecode/CIFunHouse/Introduction/Intro.html.
我是这样实现的:
2.1 上下文和会话
设置 OpenGL 和 CoreImage 上下文
_eaglContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
// Note: must be done after the all your GLKViews are properly set up
_ciContext = [CIContext contextWithEAGLContext:_eaglContext
options:@{kCIContextWorkingColorSpace : [NSNull null]}];
调度队列
该队列将用于会话和委托。
self.captureSessionQueue = dispatch_queue_create("capture_session_queue", NULL);
初始化 AVSession 和 AVCaptureVideoDataOutput
注意:我删除了所有设备功能检查以使其更具可读性。
dispatch_async(self.captureSessionQueue, ^(void) {
NSError *error = nil;
// get the input device and also validate the settings
NSArray *videoDevices = [AVCaptureDevice devicesWithMediaType:AVMediaTypeVideo];
AVCaptureDevice *_videoDevice = nil;
if (!_videoDevice) {
_videoDevice = [videoDevices objectAtIndex:0];
}
// obtain device input
AVCaptureDeviceInput *videoDeviceInput = [AVCaptureDeviceInput deviceInputWithDevice:self.videoDevice error:&error];
// obtain the preset and validate the preset
NSString *preset = AVCaptureSessionPresetMedium;
// CoreImage wants BGRA pixel format
NSDictionary *outputSettings = @{(id)kCVPixelBufferPixelFormatTypeKey : @(kCVPixelFormatType_32BGRA)};
// create the capture session
self.captureSession = [[AVCaptureSession alloc] init];
self.captureSession.sessionPreset = preset;
:
注意:以下代码是“神奇代码”。这是我们创建 DataOutput 并将其添加到 AVSession 的地方,以便我们可以使用委托拦截相机帧。这是我需要找出解决问题的突破口。
:
// create and configure video data output
AVCaptureVideoDataOutput *videoDataOutput = [[AVCaptureVideoDataOutput alloc] init];
videoDataOutput.videoSettings = outputSettings;
[videoDataOutput setSampleBufferDelegate:self queue:self.captureSessionQueue];
// begin configure capture session
[self.captureSession beginConfiguration];
// connect the video device input and video data and still image outputs
[self.captureSession addInput:videoDeviceInput];
[self.captureSession addOutput:videoDataOutput];
[self.captureSession commitConfiguration];
// then start everything
[self.captureSession startRunning];
});
2.2 OpenGL视图
我们使用 GLKView 来渲染实时预览。因此,如果您想要 4 个实时预览,那么您需要 4 个 GLKView。
self.livePreviewView = [[GLKView alloc] initWithFrame:self.bounds context:self.eaglContext];
self.livePreviewView = NO;
由于后置摄像头的原生视频图像位于 UIDeviceOrientationLandscapeLeft(即主页按钮位于右侧),因此我们需要应用顺时针 90 度变换,以便我们可以像在横向视图中一样绘制视频预览;如果您使用前置摄像头并且想要进行镜像预览(以便用户在镜子中看到自己),则需要应用额外的水平翻转(通过将 CGAffineTransformMakeScale(-1.0, 1.0) 连接到旋转转换)
self.livePreviewView.transform = CGAffineTransformMakeRotation(M_PI_2);
self.livePreviewView.frame = self.bounds;
[self addSubview: self.livePreviewView];
绑定帧缓冲区以获取帧缓冲区的宽度和高度。 CIContext 在绘制到 GLKView 时使用的边界以像素(而不是点)为单位,因此需要读取帧缓冲区的宽度和高度。
[self.livePreviewView bindDrawable];
此外,由于我们将访问另一个队列 (_captureSessionQueue) 中的边界,因此我们希望获取这条信息,以便我们不会从另一个线程/队列访问 _videoPreviewView 的属性。
_videoPreviewViewBounds = CGRectZero;
_videoPreviewViewBounds.size.width = _videoPreviewView.drawableWidth;
_videoPreviewViewBounds.size.height = _videoPreviewView.drawableHeight;
dispatch_async(dispatch_get_main_queue(), ^(void) {
CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI_2);
// *Horizontally flip here, if using front camera.*
self.livePreviewView.transform = transform;
self.livePreviewView.frame = self.bounds;
});
注意:如果您使用前置摄像头,您可以水平翻转实时预览,如下所示:
transform = CGAffineTransformConcat(transform, CGAffineTransformMakeScale(-1.0, 1.0));
2.3 委托实现
设置好 Contexts、Sessions 和 GLKViews 之后,我们现在可以从AVCaptureVideoDataOutputSampleBufferDelegate方法 captureOutput:didOutputSampleBuffer:fromConnection:
- (void)captureOutput:(AVCaptureOutput *)captureOutput didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection
{
CMFormatDescriptionRef formatDesc = CMSampleBufferGetFormatDescription(sampleBuffer);
// update the video dimensions information
self.currentVideoDimensions = CMVideoFormatDescriptionGetDimensions(formatDesc);
CVImageBufferRef imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
CIImage *sourceImage = [CIImage imageWithCVPixelBuffer:(CVPixelBufferRef)imageBuffer options:nil];
CGRect sourceExtent = sourceImage.extent;
CGFloat sourceAspect = sourceExtent.size.width / sourceExtent.size.height;
您需要引用每个 GLKView 及其 videoPreviewViewBounds。为了简单起见,我假设它们都包含在 UICollectionViewCell 中。您需要根据自己的用例更改此设置。
for(CustomLivePreviewCell *cell in self.livePreviewCells) {
CGFloat previewAspect = cell.videoPreviewViewBounds.size.width / cell.videoPreviewViewBounds.size.height;
// To maintain the aspect radio of the screen size, we clip the video image
CGRect drawRect = sourceExtent;
if (sourceAspect > previewAspect) {
// use full height of the video image, and center crop the width
drawRect.origin.x += (drawRect.size.width - drawRect.size.height * previewAspect) / 2.0;
drawRect.size.width = drawRect.size.height * previewAspect;
} else {
// use full width of the video image, and center crop the height
drawRect.origin.y += (drawRect.size.height - drawRect.size.width / previewAspect) / 2.0;
drawRect.size.height = drawRect.size.width / previewAspect;
}
[cell.livePreviewView bindDrawable];
if (_eaglContext != [EAGLContext currentContext]) {
[EAGLContext setCurrentContext:_eaglContext];
}
// clear eagl view to grey
glClearColor(0.5, 0.5, 0.5, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
// set the blend mode to "source over" so that CI will use that
glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
if (sourceImage) {
[_ciContext drawImage:sourceImage inRect:cell.videoPreviewViewBounds fromRect:drawRect];
}
[cell.livePreviewView display];
}
}
此解决方案可让您使用 OpenGL 渲染从 AVCaptureVideoDataOutputSampleBufferDelegate 接收的图像缓冲区,获得任意数量的实时预览。
3. 示例代码
这是我将这两种解决方案放在一起的 github 项目:https://github.com/JohnnySlagle/Multiple-Camera-Feeds https://github.com/JohnnySlagle/Multiple-Camera-Feeds