SwiftUIでPiPを使う話

背景

PiPとはPicture in Pictureの略で、動画をスマホの画面にオーバーレイして表示するアレのことです。

YouTubeとかでよくありますよね。

あれをSwiftUIで実装しようとすると、ググった結果がよくわからないのでまとめてみました。

コード

やるべきポイントは三つです。そのどれが欠けてもPiPは動作しません。

AppDelegate

1
import AVFAudio
2

3
class AppDelegate: NSObject, UIApplicationDelegate {
4
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil) -> Bool {
5
        try? AVAudioSession.sharedInstance().setCategory(.playback, mode: .moviePlayback)
6
        return true
7
    }
8
}
9

10
@main
11
struct mainApp: App {
12
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
13

14
    var body: some Scene {
15
        WindowGroup {
16
            ContentView()
17
        }
18
    }
19
}

AppDelegateでこの設定を入れます。

VideoPlayerView

動画のURLが取得済みで、それを再生したい場合には以下のようなコードが利用できます。

URLはローカルでもリモートでも大丈夫です。

1
import AVKit
2
import SwiftUI
3
import Foundation
4

5
struct VideoPlayerView: UIViewControllerRepresentable {
6
    let streamURL: URL
7

8
    func makeUIViewController(context: Context) -> AVPlayerViewController {
9
        let controller: AVPlayerViewController = .init()
10
        let player: AVPlayer = .init(url: streamURL)
11
        controller.player = player
12
        controller.canStartPictureInPictureAutomaticallyFromInline = true
13
        controller.player?.play()
14
        return controller
15
    }
16

17
    func updateUIViewController(_ uiViewController: AVPlayerViewController, context: Context) {
18
    }
19
}

Capabilities

Targets > App > Signing & Capabilities > Background Modes > Audio, AirPlay and Picture in Piture

にチェックを入れます。

Implementing Picture-in-Picture in Swift for iOSの最初の方をそのまま実践するだけです。

まとめ

あとはVideoPlayerViewを適当なタイミングで呼び出します。

引数にstreamURLを持っているので、

1
struct TestView: View {
2
  @State private var streamURL: URL?
3

4
  var body: some View {
5
    EmptyView()
6
      .sheet(item: streamURL, content: { streamURL in
7
        VideoPlayerView(streamURL: streamURL)
8
          .ignoresSafeArea(.all)
9
      })
10
  }
11
}

みたいな感じで実装すればよいです。

記事は以上。