CameraView#

Orientation の種類#

iOS で使えるデバイスの傾きは次の三種類で、カメラ機能以外ではUIDeviceOrientaionとUIInterfaceOrientationの二つがあります。

これらの違いですが、UIInterfaceOrientationはステータスバーの向きを取得しているため起動時に何らかの値が入ります。

それに対して、UIDeviceOrientationはデバイスの傾きであるためfaceUpとfaceDownという二つの Orientation が余計にあります。また、アプリ起動時にはunknownの値が入っており、デバイスを傾けるまで正しいデータを取得することができません。

なので、一般的にアプリケーションの UI をデバイスの向きで変更したいのであればUIInterfaceOrientationを利用するべきでしょう。

// UIDeviceOrientaion
let orientation: UIDeviceOrientation = UIDevice.current.orientation

// UIInterfaceOrientation
let orientation: UIInterfaceOrientation? = UIApplication.shared.windows.first?.windowScene?.interfaceOrientation

また、AVCaptureVideoOrientationにもfaceUpとfaceDownの Enum が存在しないのでUIInterfaceOrientationを使って調整するほうが理にかなっていると言えます。

View を回転させる#

SwiftUI の View はrotateEffect()で回転させることができます。これを利用して、デバイスの向きが変わる度に View 自体を回転させるという方法です。

View をいじるので、変更するのは CameraView.swift となります。

import Foundation
import SwiftUI

public struct CameraView: View {
    @StateObject var capture: CameraManager = CameraManager(deviceType: .builtInWideAngleCamera, mediaType: .video, position: .front)
    @State var rotation: Double = 0.0 // 追加

    public init() {}

    public var body: some View {
        GeometryReader { geometry in
            CameraPreview(previewFrame: CGRect(x: 0, y: 0, width: 300, height: 300), capture: capture)
                .frame(width: 300, height: 300, alignment: .center)
        }
        .onAppear(perform: capture.setupSession)
        .onDisappear(perform: capture.endSession)
    }
}

ここにデバイスが傾いたことをチェックするような仕組みを書けば良いので、onReceive()を利用します。

// CameraManager.swift
extension UIInterfaceOrientation {
    var degree: Double {
        switch self {
        case .landscapeLeft:
            return 90
        case .landscapeRight:
            return -90
        case .portrait:
            return 0
        case .portraitUpsideDown:
            return 180
        case .unknown:
            return 0
        @unknown default:
            fatalError()
        }
    }
}

CameraPreview(previewFrame: CGRect(x: 0, y: 0, width: 300, height: 300), capture: capture)
    .frame(width: 300, height: 300, alignment: .center)
    .onReceive(NotificationCenter.default.publisher(for: UIDevice.orientationDidChangeNotification), perform: { value in
        if let orientation: UIInterfaceOrientation = UIApplication.shared.windows.first?.windowScene?.interfaceOrientation {
            rotation = orientation.degree
        }
    })
    .rotationEffect(.degrees(rotation))

UIView を回転させる#

UIKit の UIView 自体を回転させるという方法です。UIView はCATransform3DMakeRotation()で回転させることができます。

CATransform3DMakeRotation()の引数は CGFloat なのでそこだけを書き換えます。

// CameraManager.swift
extension UIInterfaceOrientation {
    var degree: CGFloat {
        switch self {
        case .landscapeLeft:
            return 90
        case .landscapeRight:
            return -90
        case .portrait:
            return 0
        case .portraitUpsideDown:
            return 180
        case .unknown:
            return 0
        @unknown default:
            fatalError()
        }
    }
}

次に UICameraView.swift を変更します。

// UICameraView.swift
// SwiftUIでのonReceiveのようなもの
private func addOrientationChangeDetector() {
    NotificationCenter.default.addObserver(
        self,
        selector: #selector(updatePreviewOrientation),
        name: UIDevice.orientationDidChangeNotification,
        object: nil
    )
}

// @objcで宣言する必要がある
// UIDevice.orientationDidChageNotificationを検知する度に実行される
@objc func updatePreviewOrientation() {
    guard let orientation = UIApplication.shared.windows.first?.windowScene?.interfaceOrientation else { return }

    self.previewLayer.transform = CATransform3DMakeRotation(orientation.degree / 180 * CGFloat.pi, 0, 0, 1)
    self.previewLayer.frame = self.bounds // 場合によってはない方が良い
}

カメラの傾きを変える#

これが一番自然な方法です。先ほど作成したupdatePreviewOrientation()内で View の向きを変えるのではなく、カメラの向きを変えるようにします。

// UICameraView.swift
@objc func updatePreviewOrientation() {
    guard let orientation: UIInterfaceOrientation = UIApplication.shared.windows.first?.windowScene?.interfaceOrientation else { return }
    guard let videoOrientation: AVCaptureVideoOrientation = AVCaptureVideoOrientation(rawValue: orientation.rawValue) else { return }
    self.previewLayer.connection?.videoOrientation = videoOrientation
}

この実装方法だと View 自体は回転しないのでさっきよりはマシですが、やっぱり少し違和感があります。

というのも、iOS 標準のカメラであれば常にカメラの向きは固定で、ビュー自体が回転しているからです。