こんにちは、TYと申します。
前回の続きです。
今回はカメラの映像を画面に表示とUI(撮影ボタン)の実装まで行いたいと思います。
早速、カメラが実際に映している映像を、端末画面に表示するコードを記述します。
カメラが映している映像を画面に表示するのに、AVCaptureVideoPreviewLayerクラスを使います。
// プレビュー表示用のレイヤ var PreviewLayer : AVCaptureVideoPreviewLayer? // カメラのプレビューを表示するレイヤの設定 func setupPreview() { // 指定したAVCaptureSessionでプレビューレイヤを初期化 self.PreviewLayer = AVCaptureVideoPreviewLayer(session: captureSession) // カメラのキャプチャーを縦横比を維持した状態で、中央に表示するように設定 self.PreviewLayer?.videoGravity = AVLayerVideoGravity.resizeAspectFill // プレビューレイヤの表示の向きを設定 self.PreviewLayer?.connection?.videoOrientation = AVCaptureVideoOrientation.portrait self.PreviewLayer?.frame = view.frame self.view.layer.insertSublayer(self.PreviewLayer!, at: 0) }
前回作成したメソッドも含めてviewDidLoadに記述し、AVCaptureSessionクラスのstartRunnnigメソッドを記述することで、画面にカメラのキャプチャーが表示されます。
override func viewDidLoad() { super.viewDidLoad() setupCaptureSession() setupDevice() setupPreview() captureSession.startRunning() }
ここまで記述したらカメラで写ってる映像が端末に表示されるはずです。次に撮影機能を実装しようと思いますが、撮影のトリガーとなるボタンがありません。撮影ボタンを以下の記述で実装します。
func shootButton() { // 撮影ボタンを生成 let shutterBtn = UIButton() shutterBtn.setTitle("◯", for: .normal) shutterBtn.titleLabel?.font = UIFont.systemFont(ofSize: 74) shutterBtn.contentMode = .center shutterBtn.frame = CGRect(x: 0, y: 0, width: 80, height: 80) shutterBtn.layer.cornerRadius = 0.5 * shutterBtn.bounds.size.width shutterBtn.backgroundColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0) shutterBtn.setTitleColor(UIColor.black, for: UIControl.State()) shutterBtn.layer.position = CGPoint(x: view.frame.width / 2, y: self.view.bounds.size.height - 80) shutterBtn.addTarget(self, action: #selector(photoshot), for: .touchUpInside) view.addSubview(shutterBtn) }
上記で作成したメソッドもviewDidLoadに加えてみよう。これで画面下部にボタンができていると思います。
次回は映した映像を画像として端末に保存する撮影機能を実装していきたいと思います。