AVKitの新機能

ピクチャインピクチャの拡張点とmacOS上のフルスクリーンの改良点について確認しましょう。新しいコンテンツソースAPIを検証して、AVPictureInPictureControllerでAVSampleBufferDisplayLayerがどのようにサポートされているのかを学びましょう。また、macOS上のAppまたはMac Catalyst Appで、シームレスなフルスクリーン体験を提供するための推奨手順をお伝えします。

リソース

関連ビデオ

WWDC21

WWDC19

AVKitで直感的なメディア再生機能を提供する

ダウンロード

♪ (AVKitの新機能) 「AVKitの新機能にようこそ!」私の名前はマーティパイ AVKitチームのエンジニアです本日お話するのは PiPの改良点ならびに macOSのフルスクリーン体験についてです。ではさっそく PiPから始めましょう PiPがあればデバイスでマルチタスクを処理しながら動画コンテンツをお楽しみいただけますたとえばフルスクリーンで動画を視聴している間にメッセージを受信した場合引き続き動画を見ながらそのメッセージに返信できます動画は自動的にPiPに入り返信し終わったらすぐにフルスクリーン再生を再開できますこれで本当にシームレスな視聴体験が生まれユーザは動画を視聴しながらこのような動作を期待できるのです PiPをAppに統合する詳しい手順については AVKitによる直観的なメディア再生に関するこの2019セッションの視聴をお勧めします今年の新オプションにより動画をインライン再生している場合にユーザがスワイプでホーム画面に戻ると自動的にPiPに入れますこの動作の有効と無効を切り替えるには canStartPictureInPicture AutomaticallyFromInline プロパティを使いますネイティブコントロールを使用するAppであれば AVPlayerViewController カスタムUIを実装した Appであれば AVPictureInPictureController で利用できます再生中のコンテンツに集中したい場合にのみこのフラグをtrueに設定してください AVPlayerViewControllerで動画コンテンツを表示すれば PiPが処理されます何もする必要はありません AVPlayerViewController を使用しない場合も AVPictureInPictureController でネイティブPiP体験を Appに導入できますまずAppのオーディオセッションカテゴリを再生用に設定し PiPのバックグラウンドモードを有効にする必要がありますあとは pictureInPictureController を作成し playerLayerへの参照を渡すだけですユーザがボタンでPiPを切り替えようとしたらコントローラオブジェクトの start PiPまたは stop PiPを呼び出せばいいのですこれまでのPiPは AVPlayerベースのコンテンツを中心に構築されていました今やAVSampleBufferDisplayLayer についても同レベルでサポートされるのです PiPコントローラをプレーヤーレイヤーで作成するのではなくまずContentSourceを作成してAVPlayerLayer または今回のように AVSampleBufferDisplayLayer で設定しますユーザにとっては同一の PiP体験になります AVSampleBufferDisplayLayer のPiP対応に伴い開発者である皆さんには新しい責任が発生しますこの再生デリゲートに目を向けてみましょうメディアの再生は AVPlayerで管理されないのでPiPのUIをレンダリングするには新しいAVPictureInPictureSample BufferPlaybackDelegate を介して提供される再生状態の情報に頼らなねばなりませんユーザがPiP UIからメディアを制御しようとするとそれらのコマンドはデリゲートに転送され処理されます 5つのコールバックを 1つずつ見ていきましょうユーザがPiPウインドウで再生/停止ボタンを押すと setPlaying 関数が呼び出されますユーザがスキップボタンのいずれかを押すと skipByInterval 関数が呼び出されますこれらのコールバックを使うとメディアを適宜制御できます timeRangeForPlayback 関数を使うと現在再生可能な時間範囲を指定できますタイムラインをレンダリングして現在の再生ヘッドを示すことができます継続期間が有限の時間範囲には常にサンプルバッファディスプレイレイヤのタイムベースの現在時刻を含めるべきですライブコンテンツを示すには継続期間が無限の時間範囲と組み合わせます didTransitionToRenderSize 関数はピンチ&ズームなどでウインドウサイズが変わった場合に呼び出されますメディアバリアントを選択する際に不必要なデコードオーバーヘッドを避けるにはこのレンダリングサイズを考慮に入れてください isPlaybackPaused 関数は定期的に呼び出されPiP UI に一時停止/再生ステートのどちらを反映するかを知らせます概念的には AVPlayerの timeControlStatus に相当します次に macOSのフルスクリーン体験の改善点を見てみましょう Big Surでは動画を Mac Catalyst Appでフルスクリーンにすると動画はウインドウいっぱいに広がりますが全画面には広がりません macOS Montereyでは動画が全画面を占めます結果としてmacOS のネイティブと Mac Catalyst Appの両方で真の全画面体験が可能になります再生コントロールはどちらも同じに見えますすべてのMac Catalyst Appでこの新しい動作が自動的にもたらされます macOSネイティブのフルスクリーン体験と同じようにユーザはApp ウインドウにスワイプで戻れます元の映像の代わりにプレースホルダーが表示され全画面で再生されていることを示しますこれはPiPで動画を再生するときと非常に似ていますユーザが同じコンテンツを選択した後でプレーヤービューコントローラを全画面に表示するシナリオではビューコントローラは依然としてウィンドウで表示されますしかし新しい macOS Montereyではウインドウ上部にある緑色の全画面ボタンを押すことによってユーザは真の全画面再生体験にデタッチできます全画面ライフサイクルを明示的に管理することでアプリケーションのニーズに応じてより良いユーザ体験を提供できます例を見てみましょうすでにお見せしたようにユーザは再生を全画面にした後もスワイプしてAppに戻れますたとえプレイヤービューコントローラがビュー階層から削除されても App内を自由にナビゲートできるべきですどの時点でもスワイプするか Mission Controlで全画面動画に戻れるのですどうすれば動作するようになるか見ていきましょうあなたの責任範囲は playerViewControllerのライフサイクルです最適な体験を導くには playerViewControllerがたとえAppのビュー階層になくてもアライブになっていることを確認してくださいそうしないと動画があるページからユーザが離れたときに playerViewController が解放され全画面再生が終了してしまいます必要なのは willBeginFullScreenPresentation コールバックの受信時に playerViewController の強い参照を維持していることのみですユーザが全画面モードを終了するとAppは willEndFullScreenPresentation を受信しますこれは表示されていた元のビューからユーザが離れたと想定し存続させておいた playerViewController を手放すチャンスですネイティブmacOSも同じです playerViewWillExitFullScreen コールバックを受信するまで新しい playerViewDelegateを使用して playerViewを存続させることができますユーザが全画面を終了するとAppはこのrestoreUserInterface コールバックを受信しますユースケースとして適している場合はこれはAppにとって動画がある元のページに戻るチャンスですこれはユーザがPiPを停止したときに受け取る既存のコールバックと非常によく似ています全画面からインラインへの移行を妨げないようできるだけ早くこの completionHandler から戻るようにしてください falseが返った場合は復元に失敗したか復元不能を意味しその場合コンテンツはアニメーションなしで全画面で終了しますということで本日のセッションを締めくくりたいと思います AVPlayerLayerの代わりに AVSampleBufferDisplayLayer を使用する場合に新しいコンテンツソース APIでPiPサポートを Appに追加する方法をご覧いただきました macOSとMacCatalyst については改善された全画面体験に目を向けてコードをシームレスに統合する手順をざっとご説明しました本日のセッションをお楽しみ頂けたならば幸いですこれらの機能が皆さんの Appに統合されるのを楽しみにしています残りのカンファレンスをお楽しみください ♪

1:16 - New canStartPictureInPictureAutomaticallyFromInline property

// New property on AVPlayerViewController / AVPictureInPictureController.
var canStartPictureInPictureAutomaticallyFromInline: Bool { get set }

1:40 - Setting up AVPictureInPictureController with an AVPlayerLayer

func setupPictureInPicture() {
    // Ensure PiP is supported by current device.
    if AVPictureInPictureController.isPictureInPictureSupported() {
        // Create a new controller, passing the reference to the AVPlayerLayer.
        pictureInPictureController = AVPictureInPictureController(playerLayer: playerLayer)
        pictureInPictureController.delegate = self
        
        // Observe AVPictureInPictureController.isPictureInPicturePossible to update the PiP
        // button’s enabled state.
    } else {
        // PiP isn't supported by the current device. Disable the PiP button.
        pictureInPictureButton.isEnabled = false
    }
}

2:11 - Starting and stopping picture in picture

@IBAction func togglePictureInPictureMode(_ sender: UIButton) {
    if pictureInPictureController.isPictureInPictureActive {
        pictureInPictureController.stopPictureInPicture()
    } else {
        pictureInPictureController.startPictureInPicture()
    }
}

2:56 - AVPictureInPictureSampleBufferPlaybackDelegate

public protocol AVPictureInPictureSampleBufferPlaybackDelegate: NSObjectProtocol{

    // Delegate is responsible for:
    //
    // - Supplying playback state information for PiP UI.
    // - Responding to user input from PiP UI.

}

3:17 - Toggle playback of the video and seek back / ahead 15 seconds

func pictureInPictureController(_ pictureInPictureController: AVPictureInPictureController, setPlaying playing: Bool)

func pictureInPictureController(_ pictureInPictureController: AVPictureInPictureController, skipByInterval skipInterval: CMTime, completion completionHandler: @escaping () -› Void)

3:31 - Provide elapsed time information

func pictureInPictureControllerTimeRangeForPlayback(_ pictureInPictureController: AVPictureInPictureController) -> CMTimeRange

3:51 - Choose appropriate media variant for render size

func pictureInPictureController(_ pictureInPictureController: AVPictureInPictureController, didTransitionToRenderSize newRenderSize: CMVideoDimensions)

4:06 - Update playback state

func pictureInPictureControllerIsPlaybackPaused(pictureInPictureController: AVPictureInPictureController) -> Bool

6:05 - iOS / MacCatalyst - Persist full screen playback

func playerViewController(_ playerViewController: AVPlayerViewController, willBeginFullScreenPresentationWithAnimationCoordinator coordinator: UIViewControllerTransitionCoordinator) {
    coordinator.animate(alongsideTransition: nil) { context in
        // Keep a strong reference to the playerViewController while in full screen.
        self.detachedPlayerViewController = playerViewController
    }
}

6:38 - iOS / MacCatalyst - Release the playerViewController

func playerViewController(_ playerViewController: AVPlayerViewController, willEndFullScreenPresentationWithAnimationCoordinator coordinator: UIViewControllerTransitionCoordinator){
    coordinator.animate(alongsideTransition: nil) { context in
        // Stop keeping the playerViewController alive when transition completes,
        self.detachedPlayerViewController = nil
    }
}

6:46 - Persist full screen playback on macOS

func playerViewWillEnterFullScreen(_ playerView: AVPlayerView) {
    // Start keeping the player view alive while it is not in the view hierarchy.
    self.detachedPlayerView = playerView
}

func playerViewWillExitFullScreen(_ playerView: AVPlayerView) {
    // Stop keeping the player view alive.
    self.detachedPlayerView = nil
}

6:55 - Restoring UI when exiting full screen

// Restoring UI when exiting full screen

// iOS / MacCatalyst
func playerViewControllerRestoreUserInterfaceForFullScreenExit(_ playerViewController: AVPlayerViewController) async -> Bool {
	// Custom UI restoration logic
	return true
}

// macOS
func playerViewRestoreUserInterfaceForFullScreenExit(_ playerView: AVPlayerView) async -> Bool {
	// custom UI restore logic here		
	return true
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。