How to display live camera output in a UIView

Question

I want to display live camera output in a view controller. I start with this example.

This is what I did: I created a new View Controller in the Story board and connected it to the class below. The code and the output are below.

import UIKit
import AVFoundation

//NOT WORKING - Unable to see Camera View in UIView: https://stackoverflow.com/questions/28683863/front-camera-to-fill-circular-uiview

class TestVC: UIViewController, AVCaptureVideoDataOutputSampleBufferDelegate{

var previewView : UIView!;
var boxView:UIView!;

//Camera Capture requiered properties
var videoDataOutput: AVCaptureVideoDataOutput!;
var videoDataOutputQueue : dispatch_queue_t!;
var previewLayer:AVCaptureVideoPreviewLayer!;
var captureDevice : AVCaptureDevice!
let session=AVCaptureSession();
var currentFrame:CIImage!
var done = false;


var cameraView = UIView()

override func viewDidLoad() {
    super.viewDidLoad()


    cameraView.frame = CGRectMake(100, self.view.center.y-260, 568, 568)
    cameraView.backgroundColor = UIColor(red:26/255, green:188/255, blue:156/255, alpha:1)
    cameraView.layer.cornerRadius = 284
    cameraView.layer.borderColor = UIColor.whiteColor().CGColor
    cameraView.layer.borderWidth = 15
    cameraView.contentMode = UIViewContentMode.ScaleToFill
    cameraView.layer.masksToBounds = true



    var screenSize = UIScreen.mainScreen().bounds.size;
    self.previewView = UIView(frame: CGRectMake(0, 0, UIScreen.mainScreen().bounds.size.width, UIScreen.mainScreen().bounds.size.height));
    self.previewView.contentMode = UIViewContentMode.ScaleAspectFit
    self.view.addSubview(previewView);

    //Add a box view
    self.boxView = UIView(frame: CGRectMake(0, 0, 100, 200));
    self.boxView.backgroundColor = UIColor.greenColor();
    self.boxView.alpha = 0.3;

    self.view.addSubview(self.boxView);

    self.setupAVCapture();
}

override func viewWillAppear(animated: Bool) {
    if !done {
        session.startRunning();
    }
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
}

override func shouldAutorotate() -> Bool {
    if (UIDevice.currentDevice().orientation == UIDeviceOrientation.LandscapeLeft ||
        UIDevice.currentDevice().orientation == UIDeviceOrientation.LandscapeRight ||
        UIDevice.currentDevice().orientation == UIDeviceOrientation.Unknown) {
            return false;
    }
    else {
        return true;
    }
}
}


// AVCaptureVideoDataOutputSampleBufferDelegate protocol and related methods
extension TestVC:  AVCaptureVideoDataOutputSampleBufferDelegate{

func setupAVCapture(){
    session.sessionPreset = AVCaptureSessionPreset640x480

    let devices = AVCaptureDevice.devices();
    // Loop through all the capture devices on this phone
    for device in devices {
        // Make sure this particular device supports video
        if (device.hasMediaType(AVMediaTypeVideo)) {
            // Finally check the position and confirm we've got the front camera
            if(device.position == AVCaptureDevicePosition.Front) {
                captureDevice = device as? AVCaptureDevice
                if captureDevice != nil {
                    beginSession()
                    break
                }
            }
        }
    }
}

func beginSession(){
    var err : NSError? = nil
    var deviceInput:AVCaptureDeviceInput = AVCaptureDeviceInput(device: captureDevice, error: &err)
    if err != nil {
        println("error: \(err?.localizedDescription)")
    }
    if self.session.canAddInput(deviceInput){
        self.session.addInput(deviceInput)
    }

    self.videoDataOutput = AVCaptureVideoDataOutput()
    var rgbOutputSettings = [NSNumber(integer: kCMPixelFormat_32BGRA):kCVPixelBufferPixelFormatTypeKey]
    self.videoDataOutput.alwaysDiscardsLateVideoFrames=true
    self.videoDataOutputQueue = dispatch_queue_create("VideoDataOutputQueue", DISPATCH_QUEUE_SERIAL)
    self.videoDataOutput.setSampleBufferDelegate(self, queue:self.videoDataOutputQueue)
    if session.canAddOutput(self.videoDataOutput){
        session.addOutput(self.videoDataOutput)
    }
    self.videoDataOutput.connectionWithMediaType(AVMediaTypeVideo).enabled = true

    self.previewLayer = AVCaptureVideoPreviewLayer(session: self.session)
    self.previewLayer.videoGravity = AVLayerVideoGravityResizeAspectFill

    var rootLayer :CALayer = self.cameraView.layer
    rootLayer.masksToBounds=true
    self.previewLayer.frame = rootLayer.bounds
    rootLayer.addSublayer(self.previewLayer)
    session.startRunning()

}

func captureOutput(captureOutput: AVCaptureOutput!, didOutputSampleBuffer sampleBuffer: CMSampleBuffer!, fromConnection connection: AVCaptureConnection!) {
    // do stuff here

}

// clean up AVCapture
func stopCamera(){
    session.stopRunning()
}

}

This is all I see in the output:

enter image description here

From the example, I could not tell where the following piece of code should go? So, i placed it in the viewDidLoad. May be it needs to go elsewhere?

    cameraView.frame = CGRectMake(100, self.view.center.y-260, 568, 568)
    cameraView.backgroundColor = UIColor(red:26/255, green:188/255, blue:156/255, alpha:1)
    cameraView.layer.cornerRadius = 284
    cameraView.layer.borderColor = UIColor.whiteColor().CGColor
    cameraView.layer.borderWidth = 15
    cameraView.contentMode = UIViewContentMode.ScaleToFill
    cameraView.layer.masksToBounds = true

Regardless of if your code works, you wouldn't see a live feed - the simulator has no access to a camera. — Jeffrey, May 06 '15 at 04:18

score 0 · Answer 1 · answered May 14 '15 at 08:06

Which UIView do you want to display the preview layer? boxView or cameraView? In your code, you add the preview layer to cameraView, but you only add boxView as a subview to your main view, so cameraView is never displayed.

If you want cameraView, change self.view.addSubview(self.boxView) to self.view.addSubview(self.cameraView) in viewDidLoad. If boxView, change var rootLayer :CALayer = self.cameraView.layer to var rootLayer :CALayer = self.boxView.layer in beginSession.

Either way will display the camera preview live, though the results are different since boxView and cameraView are set up differently.

I think boxView is your intended one, so tl;dr: you added the preview layer to cameraView when you intended to add it to boxView.

score 0 · Answer 2 · answered Jul 10 '15 at 14:06

0

You are close to success, but the wires are not well plugged.

Green box is boxview. if you want camera preview in boxview, you should add preview to boxview.

answered Jul 10 '15 at 14:06

3pic

1,188
8
26

How to display live camera output in a UIView

2 Answers2