我有一个使用 AVCaptureVideoPreviewLayer 运行的 AVCaptureSession。
我可以看到视频，所以我知道它正在工作。
但是，我想要一个集合视图，并在每个单元格中添加一个预览层，以便每个单元格显示视频的预览。
如果我尝试将预览图层传递到单元格并将其添加为子图层，那么它将从其他单元格中删除该图层，因此它一次只显示在一个单元格中。
还有另一种（更好的）方法吗？
问问题
13943 次
5 回答
66
我遇到了需要同时显示多个实时视图的问题。上面使用 UIImage 的答案对于我需要的东西来说太慢了。这是我找到的两个解决方案：
1. CAReplicatorLayer
第一个选项是使用CAReplicatorLayer自动复制图层。正如文档所说，它将自动创建“......其子层（源层）的指定数量的副本，每个副本都可能应用几何、时间和颜色转换。”
如果除了简单的几何或颜色转换（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 并设置属性
注意：这将复制实时预览层四次。
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 是因为它的性能。代码是从CIFunHouse启发和改变的。
以下是我的实现方式：
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;
:
注意：以下代码是“魔术代码”。这是我们创建并向 AVSession 添加 DataOutput 的地方，因此我们可以使用委托截取相机帧。这是我需要弄清楚如何解决问题的突破。
:
// 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
于 2014-08-06T18:31:32.223 回答
8
实现AVCaptureSession 委托方法，它是
- (void)captureOutput:(AVCaptureOutput *)captureOutput didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection
使用它，您可以获得每个视频帧的样本缓冲区输出。使用缓冲区输出，您可以使用以下方法创建图像。
- (UIImage *) imageFromSampleBuffer:(CMSampleBufferRef) sampleBuffer
{
// 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);
// Get the number of bytes per row for the pixel buffer
void *baseAddress = CVPixelBufferGetBaseAddress(imageBuffer);
// Get the number of bytes per row for the pixel buffer
size_t bytesPerRow = CVPixelBufferGetBytesPerRow(imageBuffer);
// Get the pixel buffer width and height
size_t width = CVPixelBufferGetWidth(imageBuffer);
size_t height = CVPixelBufferGetHeight(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,
bytesPerRow, colorSpace, kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst);
// 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);
// Create an image object from the Quartz image
UIImage *image = [UIImage imageWithCGImage:quartzImage scale:1.0 orientation:UIImageOrientationRight];
// Release the Quartz image
CGImageRelease(quartzImage);
return (image);
}
所以你可以添加几个 imageViews 到你的视图中，并在我之前提到的委托方法中添加这些行：
UIImage *image = [self imageFromSampleBuffer:sampleBuffer];
imageViewOne.image = image;
imageViewTwo.image = image;
于 2013-05-14T12:40:44.993 回答
3
只需将预览层的内容设置为另一个 CALayer：
CGImageRef cgImage = (__bridge CGImage)self.previewLayer.contents; self.duplicateLayer.contents = (__bridge id)cgImage;
您可以使用任何 Metal 或 OpenGL 层的内容来执行此操作。我的内存使用量或 CPU 负载也没有增加。你没有复制任何东西，只是一个小指针。这些其他“解决方案”并非如此。
我有一个示例项目，您可以下载它，它可以从单个相机源同时显示 20 个预览图层。每一层都有不同的效果应用于我们的。
您可以观看应用程序运行的视频，也可以在以下位置下载源代码：
https://demonicactivity.blogspot.com/2017/05/developer-iphone-video-camera-wall.html?m=1
于 2018-02-27T09:35:20.893 回答
1
在 iOS 13 上的 Swift 5 中工作，我实现了 @Ushan87 答案的一个更简单的版本。出于测试目的，我在现有的 AVCaptureVideoPreviewLayer 上拖了一个新的小型 UIImageView。在该窗口的 ViewController 中，我为新视图添加了一个 IBOutlet 和一个变量来描述正在使用的相机的正确方向：
@IBOutlet var testView: UIImageView!
private var extOrientation: UIImage.Orientation = .up
然后我实现了 AVCaptureVideoDataOutputSampleBufferDelegate 如下：
// MARK: - AVCaptureVideoDataOutputSampleBufferDelegate
extension CameraViewController: AVCaptureVideoDataOutputSampleBufferDelegate {
func captureOutput(_ captureOutput: AVCaptureOutput, didOutput sampleBuffer: CMSampleBuffer, from connection: AVCaptureConnection) {
let imageBuffer: CVPixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer)!
let ciimage : CIImage = CIImage(cvPixelBuffer: imageBuffer)
let image : UIImage = self.convert(cmage: ciimage)
DispatchQueue.main.sync(execute: {() -> Void in
testView.image = image
})
}
// Convert CIImage to CGImage
func convert(cmage:CIImage) -> UIImage
{
let context:CIContext = CIContext.init(options: nil)
let cgImage:CGImage = context.createCGImage(cmage, from: cmage.extent)!
let image:UIImage = UIImage.init(cgImage: cgImage, scale: 1.0, orientation: extOrientation)
return image
}
就我的目的而言，性能很好。我没有注意到新视图有任何滞后。
于 2020-01-26T22:22:09.460 回答
-1
您不能有多个预览。正如 Apple AVFundation 所说，只有一个输出流。我尝试了很多方法，但你就是做不到。
于 2013-05-14T12:33:26.593 回答