🎥

【iOS】Swiftで録画機能を呼び出して撮影結果を利用する

2024/03/27に公開

SwiftUIを使用したiOSアプリにおいて、ビデオ録画機能を実装することは、ユーザーエンゲージメントを高めるための魅力的な方法です。提供されたコード例は、SwiftUIのビューから直接UIKitのUIImagePickerControllerを起動してビデオを録画し、そのURLを表示する流れを実現しています。このプロセスを通じて、SwiftUIとUIKitの機能を組み合わせることの基本的なアプローチを学ぶことができます。

ビデオ録画をトリガーするSwiftUI

最初に、ユーザーがビデオ録画を開始できるようにするためのSwiftUIVideoViewを設定します。このビューでは、録画を開始するボタンと、録画されたビデオのURLを表示する機能を提供します。

import SwiftUI

struct VideoView: View {
    @State private var showingVideoPicker = false
    @State private var videoURL: URL?

    var body: some View {
        VStack {
            Button("Record Video") {
                showingVideoPicker = true
            }
            .fullScreenCover(isPresented: $showingVideoPicker) {
                VideoCaptureView(isShown: $showingVideoPicker, videoURL: $videoURL)
                    .background(.black)
            }

            if let videoURL = videoURL {
                Text("Video URL: \(videoURL)")
            }
        }
    }
}

このコードでは、@Stateプロパティを使用してビデオピッカーの表示状態と録画されたビデオのURLを管理しています。ボタンをタップすると、VideoCaptureViewが表示され、ユーザーはビデオの録画を開始できます。

UIKitのUIImagePickerControllerをSwiftUIで使用

VideoCaptureViewはUIViewControllerRepresentableプロトコルを実装し、UIKitのUIImagePickerControllerをSwiftUIで使えるようにラップします。これにより、SwiftUIアプリ内で直接カメラを起動し、ビデオ録画を行うことが可能になります。

import SwiftUI
import UIKit

struct VideoCaptureView: UIViewControllerRepresentable {
    @Binding var isShown: Bool
    @Binding var videoURL: URL?

    func makeUIViewController(context: Context) -> UIImagePickerController {
        let picker = UIImagePickerController()
        picker.delegate = context.coordinator
        picker.sourceType = .camera
        picker.mediaTypes = ["public.movie"]
        picker.cameraCaptureMode = .video
        return picker
    }

    func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {}

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {
        var parent: VideoCaptureView

        init(_ videoCaptureView: VideoCaptureView) {
            self.parent = videoCaptureView
        }

        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            if let url = info[.mediaURL] as? URL {
                parent.videoURL = url
            }
            parent.isShown = false
        }

        func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
            parent.isShown = false
        }
    }
}

下記にサンプルを置いたので確認してみてください。

ビデオ録画をトリガーするSwiftUI

UIKitのUIImagePickerControllerをSwiftUIで使用

Discussion