如何在UIView中顯示實時攝像機輸出

Question

我想在視圖控制器中顯示實時攝像機輸出。我開始with this example。

這就是我所做的：我在故事板中創建了一個新的視圖控制器，並將它連接到下面的類。代碼和輸出如下。

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() 
} 

} 

這是我在輸出中看到：

從the example，我不知道在下面這段代碼應該去？所以，我把它放在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 

Answer 1

其中UIView是否要顯示預覽圖層？ boxView或cameraView？在您的代碼中，您將預覽圖層添加到cameraView，但您只將boxView作爲子視圖添加到您的主視圖中，因此cameraView從不顯示。

如果您需要cameraView，請在viewDidLoad處將self.view.addSubview(self.boxView)更改爲self.view.addSubview(self.cameraView)。如果boxView，則將var rootLayer :CALayer = self.cameraView.layer更改爲var rootLayer :CALayer = self.boxView.layer,beginSession。

無論哪種方式都會顯示現場的相機預覽，儘管結果不同，因爲boxView和cameraView的設置不同。

我覺得boxView是你的意圖之一，所以TL;博士：你添加的預覽層cameraView當您打算將其添加到boxView。

Answer 2

你已經接近成功，但電線沒有插好。

綠框是boxview。如果你想相機預覽在boxview，你應該添加預覽到boxview。