よりレスポンシブなメディアAppの実現

AVFoundationを使用して、ユーザをローディングアニメーションではなく、メディアAppのコンテンツに集中させる方法をご確認ください。リッチなオーディオビジュアルコンポジションの作成、オーディオビジュアルアセットのロード、メディアサムネイルの準備を行いながら、Appにおける応答性と流動性のあるインターフェイスをサポートする方法を紹介します。さらに、I/Oプロセスの実行と並行しながら、Appのメインスレッドでこれらのタスクを実行する方法をはじめ、カスタムストレージからデータをロードする際に最高レベルの再生パフォーマンスを得る方法などについて解説します。このセッションを最大限に活用するには、WWDC21の「AVFoundationの最新情報」をまずご確認ください。

リソース

関連ビデオ

WWDC21

ダウンロード

（音楽） Jeremyです AVFoundationを活用してよりレスポンシブなメデイアAppをどのように実現するのかお伝えします Appでメディアアセットを使用する際にただ再生する以上のことをしたくなるかと思いますサムネイルを表示したりメデイアを統合して新たな構成にしたりそのアセットについて情報を取得したりといった具合ですそのためにはデータの読み込みが必須ですが動画のような大きなファイルは時間がかかりそうですメインスレッドで同期的に処理を行った場合 Appのレイテンシに問題が生じやすくなります Appをレスポンシブに保つには非同期的にデータを読み込み完了時に自身の UI をアップデートすることです AVFoundation のツールならこれは簡単です今日のお話は次の通りですまずは AVFoundation の新しい非同期 API です次に去年お話しした async load(_:) メソッドを使ったアセットの検査についてのアップデートについてですそしてキャッシュされたローカルメディアの最適化を AVAssetResourceLoader を使って行う方法ですではまず新しい非同期 API についてです AVAssetImageGenerator で動画から静止画を抜き出すのはサムネイルを作るのに最適ですですが画像生成は瞬時ではできません

画像ジェネレータは動画ファイルからフレームデータを取り込む必要がありますリモートサーバやネットに保存されたメディアは取り込みに時間がかかりますだからこそ画像生成の方法が重要なポイントなのです同期的にデータを取り込む方法の場合例えばメインスレッドの copyCGImage ですが動画の取り込みを待つ間に UI がフリーズしやすくなります今年は image(at: time) の非同期メソッドを追加し画像ジェネレータのデータ取り込み時に async/await を使って呼び出したスレッドを解放します画像ジェネレータはアセットの画像と実時間のタプルを返してきます幾つかの理由で要求時間により実時間に差が出ますが画像が欲しいだけなら .image プロパティで直接アクセス可能です圧縮された動画のフレームはロードし易いものもあります iFrame は独立してデコード可能ですが他のフレームのデコードには周りのフレームが必要です要求した時間には画像ジェネレータがデフォルトで最も近くの iFrame を使って画像を生成しますトレランスをゼロにして要求時間丁度のフレームを掴みたいという気持ちは分かりますが恐らくそのフレームが依存する周りのフレームも画像ジェネレータは取り込む必要があるでしょうむしろトレランスを広く設定しても求めている結果が出ますトレランスが広いとフレーム選択の余地が広がりデータ取り込みが最小化できます取り込むフレームが少なければ画像を返す速度が上がります

アセットで何度か一連の画像を得るために generateCGImagesAsynchronously (forTimes:) がありましたですが Swift ではその使用において注意する傾向があります今年新たに加えたのが images(for: times) メソッドです CMTimes の配列を受け取るので最初に NSValues にマップする必要はありませんまた Async シーケンスを使って結果を提供しますシーケンスに for-in ループを使ってアイテムを繰り返せます一斉に準備できないアイテムのシーケンスは async シーケンスで繰り返しの度に次のエレメントを待てます上手く生成できたそれぞれの画像は元々の要求時間と実時間が画像と一緒に結果に含まれています失敗した場合結果にその理由を示すエラーが出ます

画像にしか興味がないならその値に直接アクセスできるプロパティが結果に出て生成が失敗した場合はエラーを示します async シーケンスの詳細は “AsyncSequenceについて”のセッションでどうぞ画像生成のようなタスクではデータローディングへの関与を理解しやすいですが AVFoundation の同期エリアの中には問題点として気づきにくいものもあります AVMutableComposition がその１つですアセットのための時間枠の挿入はコンポジションにおいてアセット参照を追加するためにそのトラック情報が必要です同期的にトラックを検査するのでそのトラックがまだ取り込まれていなければ同期的に取り込まれて新しいトラックを作成します

これまでの解決法はコンポジションへの挿入前にアセットのトラック取り込みを待つことでした今年は insertTimeRange の非同期版を導入し必要に応じてトラックを非同期的に取り込みます

ビデオや可変ビデオのコンポジションにはアセットプロパティの取り込みも要求する追加のメソッドがあります今年から“propertiesOf asset” コンストラクタも isValid(for:timeRange:) メソッドも非同期版がありますアセットのトラックや持続時間を非同期的に取り込むのでプリロードする必要もありません必要なプロパティを非同期的に取り込むことでアセットとのインタラクションが容易になりました自分でアセットのプロパティを取り込む必要がある場合には非同期のアセット検査について振り返りましょうアセットのプロパティの検査方法は２つあります AVFoundation 導入時にはプロパティ検査の最善策は非同期キー値の取り込みでした去年 async load(_:) が導入されました取り込むプロパティの識別に型安全なキーを使いますが以前はハードコードした文字列をキーに使っていました文字列キーのタイポは気づきにくいものですキーでのタイポは非同期のロードを妨害し後にプロパティが使われる時そのロードをブロックします

取り込むキーの新たなプロパティを追加し忘れたり完全に非同期取り込みするのを忘れるのもありがちですこのような理由で今年は非同期キー値のローディングや Swiftの同期プロパティは非推奨となり非同期ローディングを勧めますタイポを防ぐため型安全な識別子を使っていますプロパティ値を要求に応じて直接戻し取り込まれていないプロパティへのアクセスを防ぎますこれら全てがコンパイル時間にチェックされるので IOバウンドのパフォーマンスの新たな問題を防げますプロパティの非同期検査には非同期取り込みのみを奨励し AVAsset や AVAssetTrack AVMetadataItem やそのサブクラスに当てはまりますですがこのいくつかは未だに同期プロパティ検査を提供しますがそれはそのプロパティのデータが既にメモリで利用可能だからです別の可変コンポジションで理由を見てみましょう

２つの既存ビデオトラックをつなぎ合わせるために可変コンポジションを使いますまずは空のコンポジションを作成して空のビデオトラックを追加します最初のビデオトラックの一部をコンポジショントラックに同期的に挿入します裏側では何のデータも取り込んでいません代わりに欲しいトラックのためにトラックセグメントを追加します

そして同様に２つ目のトラックにも追加します

コンポジション自体はファイルではなくメモリ内構造にあるため最初に取り込む必要もなく安全に同期的にプロパティ検査ができますこのようにこれらのクラスは同期的プロパティ検査は可能なままですが非同期検査には全クラスで非同期ロードを使用します

AVFoundation での全ての新たな非同期メソッドでメディアデータの取り込み中容易にブロックを防げます初めてAppに並行性を導入するのは困難です画面のセッションをご覧になって並行性やAppへの非同期取り込みを始めてみてください最後はアセット用のカスタムデータローディングの最適化についてですまず AVAsset のデフォルトのデータロード方法です URL で AVAsset を作成する時メディアはネットワーク上か自分のデバイスに保存できますネットワーク上の場合 AVAsset は一定量のデータを動的にキャッシュして再生を円滑にしますデバイス内なら必要性に応じてキャッシュのバイパスやデータローディングを行います場合によってはメディアへの直接ポインタを AVAsset に付与できない事があります恐らく保存されているのは mp4 の生バイトなのでしょうこのような場合に使うのが AVAssetResourceLoader です特別に取り込んだメディアから任意のバイトを要求する方法をアセットに提供してくれます既にアセットはデータの読み込みを操作していないため個々のチャンクのロードにかかる時間が予測できませんアクセスにはネットワークコミュニケーションが要ると予想しデータのキャッシュを待ってから再生の準備が整います今年はメディアがローカルにあれば entireLengthAvailableOnDemand をリソースローダーで有効にできるのですこのフラグを立てれば要求に応じてデータを受け取れキャッシュをスキップできるわけです

ローカルメディアには entire LengthAvailableOnDemand でプレイバック中のメモリ使用量を軽減できますが余分なデータのキャッシュが不要だからです再生開始にかかる時間も軽減できてキャッシュが満タンになるのを待たずに済むからですこのフラッグの有効化には注意が必要ですローディングに何らかのネットワーク操作が必要な場合ネットワークファイル保存を含みますが再生は信頼性を欠くようです

リソースローダーの新たな拡張ですねまとめに次のステップについてです

メディアをバックグラウンドで取り込む間 async/await を使って Appをレスポンシブに保ちましょう画像ジェネレータのトレランスを広げて速度を上げましょうローカルにあるメディアにリソースローダーを使う場合は要求に応じて全体を得られるようにしパフォーマンスを上げましょう本日は以上ですご清聴ありがとうございました

1:41 - Generate a thumbnail

func thumbnail() async throws -> UIImage {
    let generator = AVAssetImageGenerator(asset: asset)
    generator.requestedTimeToleranceBefore = .zero
    generator.requestedTimeToleranceAfter = CMTime(seconds: 3, preferredTimescale: 600)
    let thumbnail = try await generator.image(at: time).image
    return UIImage(cgImage: thumbnail)
}

2:56 - Generate a series of thumbnails

func timelineThumbnails(for times: [CMTime]) async {
    for await result in generator.images(for: times) {
        switch result {
        case .success(requestedTime: let requestedTime, image: let image, actualTime: _):
            updateThumbnail(for: requestedTime, with: image)
        case .failed(requestedTime: let requestedTime, error: _):
            updateThumbnail(for: requestedTime, with: placeholder)
        }
    }
}

3:49 - Generate a series of thumbnails

func timelineThumbnails(for times: [CMTime]) async {
    for await result in generator.images(for: times) {
        updateThumbnail(for: result.requestedTime, with: (try? result.image) ?? placeholder)
    }
}

4:40 - AVMutableComposition

let composition = AVMutableComposition()
try await composition.insertTimeRange(timeRange, of: asset, at: startTime)

4:57 - AVVideoComposition

let videoComposition = try await AVVideoComposition .videoComposition(withPropertiesOf: asset)

try await videoComposition.isValid(for: asset, timeRange: range, validationDelegate: delegate)

5:33 - Asset inspection

asset.loadValuesAsynchronously(forKeys: ["duration", "tracks"]) {
    guard asset.statusOfValue(forKey: "duration", error: &error) == .loaded else { ... }
    guard asset.statusOfValue(forKey: "tracks", error: &error) == .loaded else { ... }
    myFunction(thatUses: asset.duration, and: asset.tracks)
}

let (duration, tracks) = try await asset.load(.duration, .tracks)
myFunction(thatUses: duration, and: tracks)

7:06 - Synchronously insert track segments into a composition

// videoTrack1: AVAssetTrack, videoTrack2: AVAssetTrack

// Create a composition and add an empty track
let composition = AVMutableComposition()
guard let compositionTrack = composition
    .addMutableTrack(withMediaType: .video,
                     preferredTrackID: 1) else { return }

// Append the first 5 seconds of track 1
try compositionTrack
    .insertTimeRange(firstFiveSeconds,
                     of: videoTrack1, at: .zero)

// Append the first 5 seconds of track 2
try compositionTrack
    .insertTimeRange(firstFiveSeconds,
                     of: videoTrack2, at: fiveSeconds)
myFunction(thatUses: composition.duration,
           and: composition.tracks)

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