シームレスなマルチビュー再生体験の構築

シームレスなマルチビュー再生体験の構築

アプリで高度なマルチビュー再生体験を構築する方法を学びましょう。複数のプレーヤー間で再生を同期する方法、シームレスなAirPlay統合によってマルチビュー再生を向上させる方法、再生品質を高めて魅力的なマルチビュー再生体験を提供する方法について説明します。

関連する章
リソース
関連ビデオ

WWDC21
- Group Activitiesによるメディアエクスペリエンス連携
皆さんこんにちは Juliaです AVFoundationエンジニアを担当していますこのビデオではアプリで複数プレイヤーを対象とした魅力的なユーザー体験を作成する方法について説明します人々はスポーツの大会などのライブイベントを複数の視点で楽しんだり複数のチャンネルを同時に視聴したりすることを求めていますマルチビュー再生体験はオーディオやビデオの複数のストリームを同時に再生することで実現されます同じイベントの異なるストリームを複数再生するという使用例がありますたとえばアナウンサーのオーディオストリームとフィールドの異なる視点からの2つのビデオストリームを使うサッカーの試合ですこの場合ストリーム間で再生を同期することが重要ですこれにより重要な瞬間を揃えることができますストリームを同期する他の例として複数のカメラアングルがある音楽コンサートやメインコンテンツのストリームとそれに対応する手話ストリームがある基調講演などがあります
マルチビューの別の使用例として完全に異なるイベントの複数のストリームを再生する場合がありますたとえばオリンピック期間中に陸上競技と水泳競技のような異なる競技のストリームを表示し BGMを流すといった例ですこのような場合オーディオとビデオのストリームを相互に同期する必要はありません AVFoundationとAVRoutingには素晴らしいマルチビュー再生体験を簡単に構築できるAPIが用意されていますこのビデオではこれらのAPIを説明しますまず複数のストリーム間で再生を同期する方法を説明します次にAirPlayの複数のビュー間でルーティングを処理する方法を説明します最後に複数のプレイヤー間で再生品質を最適化する方法を紹介します
スポーツの試合のように調整が必要な複数のストリームを表示する場合重要な瞬間が揃うようにすべてのプレイヤー間で再生を同期することが重要ですつまり再生一時停止シークなどのすべての再生動作を調整する必要がありますただしこれは複雑なプロセスになる可能性があります再生速度の変更やシークだけでなく複雑な動作も管理する必要があります AVFoundationフレームワークの AVPlaybackCoordinationMediumによって複数のプレイヤー間の再生を厳密に同期することが容易になりますこれは再生速度の変更や時間のジャンプの調整だけでなく停止中断起動時の同期などの他の複雑な動作も処理します「AV Playback Coordination Medium」を使ってアプリで複数のプレイヤーを調整する方法を実演しますこのビデオで紹介するデモでは線路上の列車を異なるカメラアングルで撮影し植物や他の被写体ランドマークなどのシーンを通過する様子を例として使いますこの列車の例は複数のカメラアングルでマルチビューコンテンツがどのように見えるのかを説明するのに役立ちますこの調整のデモでは線路の周囲から撮影した複数のカメラアングルを追加していきますこれはスポーツの試合を見ているときに異なるカメラアングルを追加する場合と同様です iPadアプリを使い線路を走るおもちゃの列車を複数の異なるビデオストリームで表示していますまず線路を走る列車を俯瞰で撮影した映像を再生します列車を別のアングルから見たいので線路の横からの映像を追加します 2番目のストリームはすでに再生されているストリームと一致しています線路の周りから記録したカメラアングルをさらに2つ追加します追加したストリームは同期され結合されます一時停止するとすべてのプレイヤーが同期して一時停止しますよく見ると 4つのすべてのプレイヤーで列車を複数のアングルから確認できます左上の俯瞰の映像では列車が植物を通り過ぎてテーブルの端付近にあるのがわかります他のカメラアングルから見ると列車が線路の直線部分に入り始め後ろから猿に近づいていることがわかります各ビデオのタイムスタンプを見るとすべてが同じ時間であることがわかります
再生するとすべてのプレイヤーが同期して再生を開始しますさまざまなアングルから列車の動きが完璧に調整されていることを確認できます
次に 10秒先にシークしますどの操作を行ってもプレイヤーは同期を維持します
iPadアプリからピクチャ・イン・ピクチャビューに切り替えてもストリームは同期を維持します
アプリに戻るとすべてのビデオが引き続き同期され再生されています
これは「Now Playing」のようなシステムインターフェイスでも機能します再生動作も調整されます一時停止して再生してもプレイヤーは同期を維持しますすべてのプレイヤーを調整することで優れたユーザー体験が実現されますデモではランドマークを通過する列車の例を紹介しました現実世界のシナリオではこうした例としてスポーツイベントや手話ストリームなど再生の調整が必要なマルチビューの使用例が考えられますここまで実際の動作について説明しました次にアプリでこの体験を構築する方法を紹介します AV Playback Coordination Medium APIは SharePlay用の既存の AVPlaybackCoordinationアーキテクチャを基盤として構築されています各AVPlayerは AVPlaybackCoordinatorを備えておりプレイヤーの再生状態と接続されている他のすべてのプレイヤーとの間でネゴシエーションが行われます再生コーディネータとその仕組みの詳細については「Group Activitiesによるメディアエクスペリエンス連携」をご覧ください複数のビデオプレイヤーがある場合再生コーディネータではリモートの状態管理を行い各プレイヤーが他のプレイヤーと同期している必要があります「AV Playback Coordination Medium」はすべての再生コーディネータ間で状態の変化を伝えます調整メディアはあるコーディネータから他の再生コーディネータに状態を渡してすべてのコーディネータを同期しますこれはメッセージによって実現されます調整メディアによって再生速度や時間などの重要な状態の変化に関するメッセージがプレイヤー間でやり取りされますたとえばあるプレイヤーが一時停止するとそのメッセージが調整メディアに送られますその後で調整メディアがこのメッセージを接続されている他のすべての再生コーディネータに送ります再生コーディネータは再生状態を処理して適用しますこれによりすべてのプレイヤーは調整されたマルチビューコンテンツを再生する際に同期を維持できます数行のコードを使うだけでこの機能を実装できますまずそれぞれ異なるアセットを使って AVPlayerを設定しますここでは2つのビデオを使っています 1つはクローズアップ映像もう1つは俯瞰映像ですこれらを異なるアセットを使って個別に設定しています次に調整メディアを作成しますその後で調整メソッドを使って各プレイヤーを調整メディアに接続しますこのメソッドはエラーをスローする場合があるためエラー処理が重要になります最後に 2つ目のプレイヤーである俯瞰映像に対しても同様に設定しますこれで両方の再生コーディネータが調整メディアに接続され各プレイヤーでの操作が同期されます 1つのプレイヤーに対して操作を呼び出すだけで接続された他のすべてのプレイヤーでも同じ操作が行われますこの例で使っているプレイヤーは2つですがもっと多くのプレイヤーを接続できます AVPlaybackCoordinationMediumはマルチビュー再生の調整に最適です
次に調整されたマルチビュー再生にも調整されていないマルチビュー再生にも適用できるツールについて説明します AirPlayを使うと素晴らしい外部再生体験を実現できますビデオストリームを自宅のより大きな画面にルーティングしたりオーディオストリームを HomePodにルーティングしたりできます適切なビューを適切なデバイスにルーティングすることが重要ですマルチビュー体験を実現するアプリで AirPlayをサポートする方法を説明します実際に見てみましょう次に示す例では俯瞰映像のビデオを線路のクローズアップビデオと一緒に見ていますどちらのビデオもiPadで再生されていますどちらのビデオもiPadで再生されていますただし iPadからApple TVにビデオをAirPlayで送信したいのです AirPlayレシーバーは1つのストリームしかサポートできませんこれにルーティングする場合俯瞰映像のビデオを優先して大画面で再生しますこれで細かい部分をすべて鮮明に確認できます iPadで2つのビデオの再生を開始し Apple TVにルーティングしますクローズアップの映像は引き続きiPadで再生され私の優先するプレイヤーである俯瞰映像のビデオは大画面で再生されますテレビで再生するビデオを変更する場合優先するプレイヤーをクローズアップストリームに更新することでストリームを切り替えることができ 2つのビデオが入れ替わりますこのiPadアプリではスターボタンを押すことでこれを実行できますクローズアップビデオが優先プレイヤーに設定されますでは選択しますクローズアップストリームはテレビで再生され俯瞰映像はiPadで再生されます一時停止や再生も行うことができますストリームが調整されていれば同期は維持されます以上は調整された再生の使用例です調整されていないマルチビューストリームも AirPlayでシームレスに動作します AVRoutingフレームワークの一部である AVRoutingPlaybackArbiterを使うとマルチビュー体験用のAirPlayのサポートを簡単に統合できます再生アービターによってビデオストリームまたはオーディオストリームを 1つしかサポートしない AirPlayや他の外部再生体験でもマルチビューがスムーズに動作しますこれはビデオ／オーディオストリームを適切に切り替える際の複雑さを管理します AVRoutingPlaybackArbiterは合成不可のオーディオ経路に関する環境設定を管理し適用しますこうしたオーディオ経路では 1つのオーディオストリームしか再生できず受信側で複数のオーディオを同時に再生することはできません再生アービターは制限付きの外部再生ビデオ経路も処理できますこうした経路では AirPlayビデオや LightningデジタルAVアダプタのように受信側で1つのビデオストリームしか再生できません列車のマルチビュービデオのようなマルチビュー再生では俯瞰映像と複数のクローズアップ映像が使われることがありますここで AirPlayでビデオを送信するときは常に俯瞰映像を優先するとしますまず再生アービターシングルトンを取得します次に俯瞰映像を再生アービターのプロパティ preferredParticipantForExternalPlayback として設定しますマルチビューコンテンツの再生中に iPadからApple TVへルーティングすると俯瞰映像のビデオが Apple TVにルーティングされ他のビデオは引き続きiPadでローカルに再生されます同様に複数のプレイヤーがあり俯瞰映像にオーディオの優先順位を持たせる場合はまず再生アービターシングルトンを取得し俯瞰映像のプレイヤーを preferredParticipantForNonMixableAudioRoutes として設定しますマルチビューコンテンツの再生中に iPadからHomePodにオーディオをルーティングすると俯瞰映像のオーディオが再生されます次にこのAPIの使用例を紹介しますまず 2つのAVPlayerを設定します 1つはクローズアップ映像用もう1つは俯瞰映像用です次に AVRoutingPlaybackArbiterのインスタンスから再生アービターシングルトンを取得します AirPlayにルーティングする際は常に俯瞰映像を大画面に表示したいので俯瞰映像を外部再生の優先プレイヤーとして設定しますまた HomePodにルーティングする場合はオーディオを聞きたいのでこの場合も俯瞰映像を合成不可のオーディオ経路の優先プレイヤーとして設定しますこの例では両方のプロパティに同じプレイヤーを選びましたが別々のプレイヤーを設定することもできます AVRoutingPlaybackArbiterを使うとマルチビューアプリでAirPlayや他の外部オーディオ／ビデオ再生体験をシームレスに統合できます次にこれらのストリームの品質を管理する方法について説明しますマルチビューコンテンツを視聴する際一部のストリームが他のストリームよりも重要になる場合がありますたとえばマルチビューでスポーツの試合を視聴している際 1つのストリームがフィールドの俯瞰映像になることがありますまた他の2つのストリームがフィールドの異なる視点からの映像となりさらに別のストリームが観客のクローズアップ映像となる場合もあります
この例ではフィールドの俯瞰映像を重視していますより鮮明な画像を表示し高画質で再生したいと考えています観客のクローズアップ映像は重視しないのでそのディテールを表示する必要はなく低画質で再生されても問題ありませんマルチビューシナリオでは各プレイヤーで品質のニーズが異なる場合がありますこれを示すには AVPlayerの networkResourcePriorityを設定しますその仕組みを詳しく説明しますコンテンツのストリーミング時プレイヤーはネットワーク帯域幅を消費しますプレイヤーのサイズが同じであれば各プレイヤーで同じ量のネットワーク帯域幅を消費しそれぞれ同じ品質で再生できますただし各プレイヤーで異なるネットワーク帯域幅と品質が必要になる場合がありますこれに対応するにはAVPlayerの networkResourcePriorityを設定します各プレイヤーはデフォルトの優先度で開始されます優先度は高または低に設定できます「高」の優先度はプレイヤーが高いレベルのネットワークリソースを必要としており高品質な解像度でのストリーミングが重要であることを意味します「低」の優先度はプレイヤーが最小限のネットワーク帯域幅を必要としており高品質な解像度でのストリーミングが重要ではないことを意味します
networkResourcePriorityを使ってこれを実現する方法の例を見ていきましょうまず AVPlayerを作成します次にプレイヤーの networkResourcePriorityを設定しますスポーツの試合の例ではフィールドの俯瞰映像が最も重要であるため優先度を「高」に設定します観客のクローズアップ映像はそれほど重要ではないので「低」に設定しますその結果ネットワーク優先度はフィールドの俯瞰映像では高くなり観客のクローズアップ映像では低くなりますこれらのネットワーク優先度によってシステムがネットワーク帯域幅リソースを割り当てるときにプレーヤーの優先度を示すことができますネットワーク帯域幅の正確な分配ではさまざまな要因が考慮されますそれらは他のプレイヤーの数ビデオレイヤのサイズハードウェアの制約などです次にネットワーク優先度の実際の機能を示すデモをお見せしますこの例では列車のマルチビューの例を紹介しますこれはさまざまな再生品質が求められるスポーツの試合の例や他のマルチビューシナリオにも応用できます 2つの異なるストリームを視聴しています 1つは線路の俯瞰映像でもう1つは列車のクローズアップ映像です列車の動きを一瞬も見逃さないことが重要であるため俯瞰映像を鮮明に試聴することを考えています俯瞰映像のネットワークリソースの優先度を「高」に設定します現在どちらのビデオも高解像度で再生されています解像度タグはビデオの下部にありますネットワーク状態が悪くネットワーク帯域幅が制限されている場合右側のクローズアップ映像は最初に低解像度に切り替わります今それを確認できます左側の俯瞰映像のほうが*重要*であるため高解像度が維持されますプレイヤーのネットワークリソースの優先度を設定することでストリームの再生品質をより詳細に制御できますご紹介したAVFoundationとAVRouting APIはすべて連携して動作しシームレスなマルチビュー体験を構築することができます高度なマルチビュー機能をご覧いただきましたここでは再生の調整 AirPlayの統合品質の最適化などを説明しましたマルチビューを使って独自のアプリを構築し強化してみましょう AVPlaybackCoordinationMediumを使って魅力的で同期されたマルチビュー体験を実現してくださいお気に入りのスポーツイベントで複数のカメラアングルを同期できます AVRoutingPlaybackArbiterについて学習し AirPlayの統合を利用してマルチビューアプリを強化しましょう ASLストリームなどのマルチストリーム再生を大画面に表示できますネットワーク帯域幅の割り当てにより再生品質を微調整し最適化できます重要なストリームが高品質で再生されるようにしましょう皆さんが作り出す素晴らしいマルチビュー再生体験を楽しみにしておりますありがとうございました

import AVFoundation

var closeUpVideo = AVPlayer()
var birdsEyeVideo = AVPlayer()

let coordinationMedium = AVPlaybackCoordinationMedium()

do {
  try closeUpVideo.playbackCoordinator.coordinate(using: coordinationMedium)
}catch let error {
  // Handle error
}

do {
  try birdsEyeVideo.playbackCoordinator.coordinate(using: coordinationMedium)
}catch let error {
  // Handle error
}

13:17 - Set preferred participant

import AVFoundation
import AVRouting

var closeUpVideo = AVPlayer()
var birdsEyeVideo = AVPlayer()

let routingPlaybackArbiter = AVRoutingPlaybackArbiter.shared()

routingPlaybackArbiter.preferredParticipantForExternalPlayback = birdsEyeVideo

routingPlaybackArbiter.preferredParticipantForNonMixableAudioRoutes = birdsEyeVideo

16:15 - Set network resource priority

birdsEyeVideo.networkResourcePriority = .high
closeUpVideo.networkResourcePriority = .low

関連する章

リソース

関連ビデオ

WWDC21