Zenn
👽

SwiftUIカメラをカスタム！　UIをいじる方法について（途中で書く気無くなった！）

2024/05/06に公開
Swift
camera
SwiftUI
カスタム
arview
tech

カメラのUIをいじることができない問題を調査した！

失敗事例を紹介した後にいい感じの実装法を紹介します！

UIImagePickerController　　(失敗）

UIImagePickerControllerを使いカメラ機能を作る

        let viewController = UIImagePickerController()
        viewController.sourceType = UIImagePickerController.SourceType.camera
        viewController.cameraCaptureMode　=　UIImagePickerController.CameraCaptureMode.photo

        viewController.showsCameraControls = false
        viewController.allowsEditing = true
        viewController.modalPresentationStyle = .fullScreen

viewController.sourceType

sourceTypeは、画像を選択するとき、または利用可能なメディアタイプを決定するときに使用します。
今回の場合は、SourceType.cameraとして画像ピッカーコントローラーのソースをデバイスの内蔵カメラを指定します。

cameraCaptureMode

カメラが指定するキャプチャモードを指定できます。

  • photo
  • video

showsCameraControls

画像ピッカーがデフォルトのカメラコントロールを表示するかどうかを示すブール値です。
viewController.showsCameraControls = false
にしていることで画像のように黒くなる。

true false

allowsEditing

ユーザーが選択した静止画またはムービーを編集できるかどうかを示すブール値です。

modalPresentationStyle

ViewControllerのモーダル表示を指定する。
いっぱいあるから公式ドキュメント見て！
https://developer.apple.com/documentation/uikit/uimodalpresentationstyle

cameraOverlayView

let viewController = UIImagePickerController()
viewController.sourceType = UIImagePickerController.SourceType.camera
viewController.cameraCaptureMode　=　UIImagePickerController.CameraCaptureMode.photo

//ここ
viewController.cameraOverlayView = UIHostingController(rootView: NextContentView()).view

viewController.showsCameraControls = false
viewController.allowsEditing = true
viewController.modalPresentationStyle = .fullScreen

cameraOverlayViewを使うことでSwiftUIで作ったViewを被せることができます。
しかし、画像のように黒い謎の物体が下部にある状態になります。
また、なぜかSwiftUIで作ったViewのTextが表示されないことがあります。

SwiftUIで作ったView デバイスでの表示

UIImagePickerControllerの失敗理由

黒い物体が消せない

ARView （失敗）

struct ARView: UIViewRepresentable {
typealias UIViewType = ARSCNView
    
    func makeUIView(context: Context) -> ARSCNView {
        let arView = ARSCNView()
        arView.frame = CGRect(x: 200, y: 500, width: 700, height: 200)
        return arView
    }
    func updateUIView(_ uiView: ARSCNView, context: Context) {


        let configuration = ARWorldTrackingConfiguration()
        
        uiView.session.run(configuration)
    }
}

このようにUIViewControllerRepresentableを使用してARSCNViewをSwiftUIで使えるようにする。
そして、SwiftUIのbodyの中に記述する。

 var body: some View {
       ARView()
}

UIの作成

任意のUIを被せたい場合はoverlayを使います。

 var body: some View {
       ARView()
         .overlay {
              任意のView
         }
}
SwiftUIで作ったView デバイスでの表示

このようにUIとしてはうまくいっています。

しかし、
写真を撮る際に.overlayまで映ってしまいます。

また、ZStackやVStackすると謎の余白ができる。

ARViewの失敗理由

ARViewなので写真を撮る機能がなくsnapshotで撮るとoverlay部分も入る。
ZStackやVStackすると謎の余白ができて消えない。

AVCapture (成功）

Discussion