[SwiftUI] SwiftUI에서 AVKit 사용하기

UIKit에서 AVKit의 AVPlayer를 사용해서 동영상을 보여 줄 수 있었습니다. SwiftUI에서 동영상을 화면에 보여주고 컨트롤 하기 위해서는 UIViewControllerRepresentable을 사용해야 합니다. UIKit의 UIViewController를 SwiftUI의 View로 사용하기 위해 UIViewControllerRepresentable을 채택하는 struct를 생성해야 합니다.

 

View가 화면에 보이면 자동으로 동영상이 실행되는 간단한 예제입니다. 

import SwiftUI
import AVKit

struct VideoPlayerView: UIViewControllerRepresentable {
    /// 외부에서 AVPlayer의 상태를 변경하거나 액세스할 수 있음
    @Binding var player: AVPlayer?

    /// UIViewControllerRepresentable 프로토콜의 필수 메소드
    /// 뷰가 화면에 표시될 때 호출
    func makeUIViewController(context: Context) -> AVPlayerViewController {
        let controller = AVPlayerViewController()
        controller.showsPlaybackControls = false
        controller.videoGravity = .resizeAspectFill
        return controller
    }
    
    /// 메소드는 SwiftUI 뷰의 상태가 변경될 때마다 호출
    func updateUIViewController(_ uiViewController: AVPlayerViewController, context: Context) {
        // player 속성이 업데이트될 때 AVPlayerViewController의 player를 업데이트
        uiViewController.player = player
        player?.play()
    }
}

• VideoPlayerView (CustomView) 생성. Custom View가 화면에 보이면 최초 초기화를 위해 makeUIViewController(context:)가 호출됨
• showPlaybackControls 를 false로 설정하면 멈춤, 시작 버튼, 10초 건너뛰기 등이 화면에 나타나지 않음
• 화면에 꽉 채우기 위해 resizeAsprectFill 사용
• 바인딩 된 AVPlayer의 상태가 변경 되면 updateUIViewController 호출됨
• 자동으로 실행하기 위해 속성 변경시 play 시킴

 

struct SplashView: View {
    @State private var player: AVPlayer? = AVPlayer(url: Bundle.main.url(forResource: "splash", withExtension: "mp4")!)
    var body: some View {
        ZStack {
            VideoPlayerView(player: $player)
        }
    }
}

• Custom UIViewController를 사용하기 위한 SwiftUI View로 가서 CustomView를 SwiftUI의 View를 사용하듯이 배치
• 바인딩할 값은 State로 선언하여 CustomView에 전달함
• 해당 SwiftUI View가 화면에 나타나면 비디오가 자동으로 재생되는 것을 확인할 수 있음