CameraView

SwiftUI ではデフォルトでカメラを利用する仕組みがないので、まずは SwiftUI でカメラを利用するためのコードを書きます。

上記のリンクから GitHub Gist へ飛べ、利用可能なコードが閲覧できます。まずはそれぞれのコードの役割を解説します。

• CameraManager.swift
  • Camera への設定を行う ObservableObject クラス
• CameraView.swift
  • SwiftUI から呼び出せる View
• CameraPreview.swift
  • UICameraView を SwiftUI で利用するための UIViewRepresentable
• UICameraView.swift
  • UIView を継承したカメラの映像を表示するためのクラス

このうち、CameraView.swift と CameraPreview.swift はほとんど完成しているので弄らなくて大丈夫です。

デバイスの回転に対応する

デバイスの傾きとは別にカメラの向きというものがあり、デバイスの傾き=カメラの向きになっていないとビューに表示するカメラの画像の傾きがズレてしまいます。

Orientation の種類

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

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

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

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

1
// UIDeviceOrientaion
2
let orientation: UIDeviceOrientation = UIDevice.current.orientation
3

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

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

方針

さて、どうやってカメラデバイスとビューの傾きを揃えるかということなのですが、次の方法が考えられると思います。

View を回転させる

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

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

1
import Foundation
2
import SwiftUI
3

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

8
    public init() {}
9

10
    public var body: some View {
11
        GeometryReader { geometry in
12
            CameraPreview(previewFrame: CGRect(x: 0, y: 0, width: 300, height: 300), capture: capture)
13
                .frame(width: 300, height: 300, alignment: .center)
14
        }
15
        .onAppear(perform: capture.setupSession)
16
        .onDisappear(perform: capture.endSession)
17
    }
18
}

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

Extension

UIInterfaceOrientaionから回転させるべき角度を求める Extension を追加します。

1
extension UIInterfaceOrientation {
2
    var degree: Double {
3
        switch self {
4
        case .landscapeLeft:
5
            return 90
6
        case .landscapeRight:
7
            return -90
8
        case .portrait:
9
            return 0
10
        case .portraitUpsideDown:
11
            return 180
12
        case .unknown:
13
            return 0
14
        @unknown default:
15
            fatalError()
16
        }
17
    }
18
}

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

で、一応これで実装はできるのですが実際にやってみるとビューがぐるんぐるんして見た目が良くないです。

UIView を回転させる

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

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

1
extension UIInterfaceOrientation {
2
    var degree: CGFloat {
3
        switch self {
4
        case .landscapeLeft:
5
            return 90
6
        case .landscapeRight:
7
            return -90
8
        case .portrait:
9
            return 0
10
        case .portraitUpsideDown:
11
            return 180
12
        case .unknown:
13
            return 0
14
        @unknown default:
15
            fatalError()
16
        }
17
    }
18
}

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

1
// SwiftUIでのonReceiveのようなもの
2
private func addOrientationChangeDetector() {
3
    NotificationCenter.default.addObserver(
4
        self,
5
        selector: #selector(updatePreviewOrientation),
6
        name: UIDevice.orientationDidChangeNotification,
7
        object: nil
8
    )
9
}
10

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

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

カメラの傾きを変える

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

1
@objc func updatePreviewOrientation() {
2
    guard let orientation: UIInterfaceOrientation = UIApplication.shared.windows.first?.windowScene?.interfaceOrientation else { return }
3
    guard let videoOrientation: AVCaptureVideoOrientation = AVCaptureVideoOrientation(rawValue: orientation.rawValue) else { return }
4
    self.previewLayer.connection?.videoOrientation = videoOrientation
5
}

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

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

VideoGravity

1
func setupPreview(previewSize: CGRect) {
2
    self.frame = previewSize
3

4
    self.previewLayer = AVCaptureVideoPreviewLayer(session: self.captureSession)
5
    self.previewLayer.frame = self.bounds
6
    self.previewLayer.videoGravity = .resizeAspectFill
7
    self.layer.addSublayer(previewLayer)
8
}

最初に実装するときに一番苦労したのがここでした。SwiftUI でカメラを利用するときには取り込んだ映像をpreviewLayerに表示しているのですが、指定したサイズに上手く変換できなかったためです。

フレームのサイズはまあ簡単に変えられたのですが、アスペクト比を維持したまま View を埋めるのはどうすればよいのかと考えていたらそれはvideoGravityで変えることができるとわかりました。

なんでプロパティ名がvideoGravityなのかはさっぱりわかりません。普通にaspectRatioModeみたいなので良かったんじゃないかと思うのですが。

videoGravityは上の三つから選ぶことができ、アスペクト比を変えたいというケースは稀だと思うのでまあ大体resizeAspectかresizeAspectFillを使うことになると思います。

今回はresizeAspectFillを利用しましたが、単にresizeAspectを使って画像の中央を指定したフレームで切り抜くような感じで実装するのも良いと思います。

おまけ

実はApple 謹製の Swift 向けのカメラのコードがのっているのだが、これを実行してもデバイスを回転させたときの挙動がおかしいことには代わりがない。

挙動が一番正しいのはカメラアプリなのだが、こちらは実装のコードがのっていないためどうやればこのように View を回転させることができるのかがわからない。