具有多个预览的AVCaptureSession

时间:2013-05-14 12:24:50

标签: ios avfoundation

我有一个使用AVCaptureVideoPreviewLayer运行的AVCaptureSession。

我可以看到视频,所以我知道它正在运作。

但是,我想要一个集合视图,并在每个单元格中添加一个预览图层,以便每个单元格显示视频的预览。

如果我尝试将预览图层传递到单元格并将其添加为subLayer,则会从其他单元格中删除该图层,因此它一次只显示在一个单元格中。

还有其他(更好)的方法吗?

4 个答案:

答案 0 :(得分:56)

我遇到了同时需要显示多个实时视图的问题。上面使用UIImage的答案对我需要的东西来说太慢了。以下是我找到的两种解决方案:

1。 CAReplicatorLayer

第一个选项是使用 CAReplicatorLayer 自动复制图层。正如文档所说,它将自动创建“...其子层(源层)的指定数量的副本,每个副本可能应用了几何,时间和颜色转换。”

如果除了简单的几何或颜色转换(Think Photo Booth)之外没有很多与实时预览的交互,这是非常有用的。我经常看到CAReplicatorLayer用作创建“反射”效果的方法。

以下是一些复制CACaptureVideoPreviewLayer的示例代码:

Init 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的一个缺点是它处理层复制的所有放置。因此,它将对每个实例应用任何设置转换,并且它将全部包含在其自身内。 E.g。将无法在两个单独的单元格上复制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];

绑定帧缓冲区以获取帧缓冲区的宽度和高度。绘制到GLKView时CIContext使用的边界是以像素为单位(而不是点),因此需要从帧缓冲区的宽度和高度读取。

[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代表实施

在我们设置了上下文,会话和GLKViews之后,我们现在可以从 AVCaptureVideoDataOutputSampleBufferDelegate 方法中捕获视图: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

答案 1 :(得分: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);
}

所以你可以在你的视图中添加几个imageView,并在我之前提到的委托方法中添加这些行:

UIImage *image = [self imageFromSampleBuffer:sampleBuffer];
imageViewOne.image = image;
imageViewTwo.image = image;

答案 2 :(得分:1)

在iOS 13上的Swift 5中工作时,我实现了@ Ushan87给出的答案的简单版本。为了进行测试,我在现有的AVCaptureVideoPreviewLayer顶部拖动了一个新的小型UIImageView。在该窗口的ViewController中,我为新视图添加了IBOutlet,并添加了一个变量来描述所用摄像机的正确方向:

curl

然后我按如下方式实现AVCaptureVideoDataOutputSampleBufferDelegate:

    @IBOutlet var testView: UIImageView!
    private var extOrientation: UIImage.Orientation = .up

就我而言,性能很好。在新视图中,我没有发现任何延迟。

答案 3 :(得分:-1)

您无法进行多次预览。 Apple AVFoundation说,只有一个输出流。我尝试了很多方法,但你不能。