AVFoundationやMetalによるHDR動画のEDR表示

AVFoundationやMetalによるHDR動画のEDR表示

AVFoundationやMetalを活用して効率的なEDRパイプラインを構築する方法を紹介します。そして、AVPlayerを使用してHDR動画をEDRで表示したり、ビデオ再生をAppビューに追加したり、Metalでレンダリングしたり、Core ImageやカスタムMetalシェーダを使用してキーイングやカラーマネジメントなどのビデオエフェクトを追加したりする方法について解説します。ゲーム開発でもPro App開発でも、使用するフレームワーク選びで役立つことでしょう。さらに、トランスポート、カラースペース、ピクセルバッファのフォーマット選びに関するベストプラクティスも紹介します。

リソース
- Learn more about AVFoundation
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- アプリ内でのHDR画像のサポート
Tech Talks
- リファレンスモードについて
WWDC22
- Core Image、Metal、SwiftUIでのEDRコンテンツの表示
- iOSのEDRの詳細
WWDC21
- EDRによるHDRレンダリング
WWDC20
- 動画AppのためのCore Imageパイプラインの最適化
- AVFoundationを使用したHDR動画の編集と再生
ダウンロード

♪ ♪
こんにちは！ WWDC2022へようこそ Ken Greenebaum,です ApppleのColor and Display Technologiesチームにいます今年は3つのEDRのセッションをできとても嬉しく思います iOSのEDR APIサポートを発表した「iOSのEDRの詳細」と「Core Image Metal SwiftUI でのEDRコンテンツの表示」はご確認いただけましたでしょうか昨年のEDRセッションを見た方もいると思いますが AVPlayerで EDRを使い HDR映像を再生する方法を実演しています
本セッションではさらに踏み込んで Core Media インターフェイスを使用して EDR再生だけでなく HDRビデオを独自の EDRレイヤやビューにデコードして再生する方法について説明します
さらに単にコンテンツを再生するだけでなく Core Videoのディスプレイリンクを介してデコードされたビデオフレームリアルタイムでアクセスしそのフレームをCoreImage FiltersやMetal Shaderに送ってカラーマネジメントや視覚効果その他の信号処理を加え最後にMetalに結果を送ってレンダリングする方法について説明します EDRと互換性のあるビデオメディアフレームワークを確認し App要件に最も適したものを選択するのに役立てます
次に HDRビデオの再生に必要なすべての作業を行うことができるハイレベルのフレームワークであるAVKitと AVFoundationについて簡単に説明します
最後に Core Video Metalでデコードしたビデオフレームを EDRの再生編集画像処理エンジンで使用するベストプラクティスについて説明します
まず Appleビデオフレームワークを簡単に調査しましょう最も使いやすい最上位のインターフェイスから始まりより多くの機会を提供する下位フレームワークへと続きますがその代償にコードは複雑になります自動的に提供される最適化を利用するにはできるだけ高いレベルのフレームワークの使用がベストです EDRの単純な再生からデコードしたビデオフレームを CoreImageや Metalでリアルタイム処理する高度なプラミングまでさまざまなシナリオを検討します最高レベルでは AVKitがあります AVKitを使用するとトランスポートコントロールチャプタナビゲーションピクチャインピクチャサポート字幕やクローズドキャプション表示を備えたメディア再生用のユーザインターフェースを作成することができます AVKitは AVPlayerViewControllerを使用してデモを行うように HDRコンテンツをEDRとして再生することができますしかし Appでビデオフレームをさらに処理する必要がある場合パイプラインをより詳細に制御できるメディアフレームワークを使用する必要があります次に AVFoundationです AVFoundationはApple プラットフォーム上でタイムベースのオーディオビジュアルメディアを扱うフル機能を備えたフレームワークです AVFoundationを使うと QuickTimeムービやMPEG 4の再生作成編集 HLSストリームの再生が容易になり Appに強力なメディア機能を構築できます本セッションでは AVPlayer とそれに関連する AVPlayerLayerインターフェースの使用方法を紹介します Core Videoはデジタル映像のパイプラインモデルを提供するフレームワークですプロセスを個別のステップに分割することでビデオでの作業方法を簡素化しますまた Core Videoではデータ型間の変換や表示の同期を気にすることなく個々のフレームにアクセスして操作することが容易にできます Core Imageを使用した DisplayLinkと CVPixelBufferのデモを行います CVMetalTextureCache もMetalで次に VideoToolboxですハードウェアのエンコーダやデコーダに直接アクセスするローレベルのフレームワークです VideoToolboxはビデオの圧縮伸張や Core Videoのピクセルバッファに格納されたラスター画像フォーマット間の変換を行うサービスを提供します VTDecompressionSessionは強力なローレベルインターフェースでこのセッションの範囲外ですが上級開発者はさらに調ベてみるとよいでしょう最後に Core Mediaですこレは AVFoundationや他のハイレベルメディアフレームワークで使用されるメディアパイプラインを定義しています Core Mediaのローレベルデータ型とインターフェースを使えば常に効率的にメディアサンプルを処理しメディアデータのキューを管理することができます今回はこのフレームワークをどのようにそしていつみなさんのAppで使うかを説明しますまず AVKitと AVFoundationを使って EDRとしてレンダリングされた HDR映像を再生する方法です AVPlayerのより洗練された一連のApp：独自のレイヤへのレンダリング CADisplayLink経由で個別デコードされたフレームへアクセス結果のCVPixelBufferを Core Imageに送って処理最後にデコードフレームを Metalテクスチャとして CVMetalTextureCache経由でアクセスしMetalで処理レンダリングします Apple プラットフォームのビデオメディアレイヤの概要を理解したところで AVKit と AVFoundation フレームワークに焦点を当てますまず AVFoundationの AVPlayer インターフェイスを使った HDR映像の再生について説明します AVPlayerはメディアアセットの再生とタイミングを管理するのに使われるコントローラオブジェクトです AVPlayerインターフェースは HDR映像の高性能再生に利用でき可能な限り自動的にEDRとして結果をレンダリングします AVPlayerを使うとQuickTimeムービなどのローカルおよびリモートのファイルベースのメディアや HLSを使用して提供されるストリーミングメディアを再生することができます AVPlayerは一度に1つのメディアアセットを再生するのに使われますプレーヤのインスタンスを再利用しメディアアセットを連続的に再生したり複数の例を作り複数のアセットを同時に再生することもできますが AVPlayerは一度に一つのメディアアセットのみ再生するように管理されます AVFoundationフレームワークは AVQueuePlayerという AVPlayerのサブクラスも提供しておりこれを使って連続したHDRメディアアセットのキューと再生を作成管理できます EDRでレンダリングされた HDRビデオメディアをシンプルに再生するAppなら AVPlayerとAVPlayerViewControllerが最適アプローチでしょう AVPlayerLayer を使って iOS や macOS で自作のビューを再生します
以上が AVPlayerの最も分かりやすい使い方です両者の例を見てみましょう AVKitのAVPlayerViewController と組み合わせて AVFoundationのAVPlayerインタフェースを使用する方法を見ていきますまずメディアのURLから AVPlayerをインスタンス化します
次に AVPlayerViewController を作成しビューコントローラの playerプロパティに先ほどメディアのURLから作成したplayerを設定します
動画の再生を開始するためビューコントローラをモーダルに提示します AVKitはすべての詳細を管理し EDRをサポートするディスプレイ上で自動的にHDRビデオをEDR として再生できます Appによっては HDRの映像メディアを自分のビューに再生する必要があります AVPlayerLayerでAVPlayerを使いこれを実現する方法を見ましょう HDRビデオメディアをEDRとし自分のビューで再生するために再びメディアのURLを指定し AVPlayerを作ることから始めますしかし今回は先ほど作成したプレーヤで AVPlayerLayerをインスタンス化します次にビューから取得したプレイヤレイヤに境界線を設定しますプレイヤレイヤにビューからの境界ができたのでプレイヤレイヤをサブレイヤとしてビューに追加します最後に HDRビデオメディアを再生するために AVPlayerのplayメソッドを呼び出します以上で AVPlayerとAVPlayerLayerを使い HDRビデオメディアを独自のレイヤでEDRとして再生が可能になります AVPlayerを使った最もわかりやすい 2つのHDR動画再生のワークフローを紹介しましたしかし多くのAppでは単純なメディア再生以上の機能を必要とします
例えば映像にカラーグレーディングやクロマキー処理などの画像処理が必要な Appがあります AVPlayerからデコードされたビデオフレームを取得し CoreImageフィルタやMetalシェーダをリアルタイムに適用して結果をEDRとしてレンダリングするワークフローを考えてみましょう AVPlayerと AVPlayerItemを使って HDRビデオメディアから EDRフレームをデコードし Core Videoディスプレイリンクからデコードフレームにアクセスし結果のピクセルバッファを Core ImageまたはMetalに送り処理し EDRをサポートしているディスプレイでCAMetalLayerに結果をレンダリングする方法をデモします HDRメディアをEDRとして正しくレンダリングするため必要なCAMetalLayerの主要プロパティを設定する方法を説明しますまず HDRビデオコンテンツをレンダリングする CAMetalLayerを取得する必要がありますそのレイヤでは wantsExtendedDynamicRangeContent フラグをtrueに設定して EDRにオプトインします
必ずExtended Dynamic Range コンテンツに対応した画素形式を使いますこの後のAVPlayerの例では CAMetalLayerがハーフフロートピクセル形式を使用するように設定します PQまたはHLG転送関数と組み合わせて 10ビット形式を使用しても動作できますまた結果をSDRに限定しないためにレイヤをEDR互換の拡張レンジカラースペースに設定する必要があります
この例ではハーフフロートメタルテクスチャを「拡張リニアディスプレイP3」の色空間に設定します EDR 色空間ピクセルバッファフォーマットについてはまだ表面を削ったに過ぎません詳しくは昨年の私の回「EDRによるHDRレンダリング」今年の「iOSのEDRの詳細」をご確認ください
CAMetalLayerの基本的なプロパティを設定したので Core ImageまたはMetal シェーダを使用してリアルタイム画像処理を追加しデモを続けましょう AVPlayerと連携したディスプレイリンクを使ってデコードされたビデオフレームにリアルタイムでアクセスすることになります
このワークフローではまずAVPlayer ItemからAVPlayerを作成します次に EDRに適したピクセルバッファフォーマットと色空間を設定したAVPlayerItem VideoOutputをインスタンス化しますそして Displayリンクを作成し設定しますそして最後に Displayリンクを実行しピクセルバッファを Core Imageまたは Metalに取得して処理します iOSで使われるCADisplayLink をデモします macOSで開発する場合は同等のCV Displayリンクインターフェイスを使います今回はメディアのURLから AVPlayerItemを作成し作成した AVPlayerItemで AVPlayerをインスタンス化する方法を選択しましたデコードしたフレームの色空間とピクセルバッファのフォーマットを指定するために一組の辞書を作成します最初の辞書であるビデオカラープロパティは色空間と伝達関数を指定するところであるこの例ではほとんどの Apple製ディスプレイの色空間に相当する Display P3色空間と AVFoundationがEDRに必要な拡張範囲値を維持できる線形伝達関数を要求しています
2つ目の辞書であるoutput VideoSettingsはピクセルバッファフォーマットの特性を指定し先ほど作成したビデオカラープロパティ辞書への参照も提供しますここではワイドカラーとハーフフロートピクセルバッファフォーマットを要求しています AVPlayerItemVideoOutputは出力設定辞書で指定したピクセルバッファ形式にビデオをデコードするだけでなくピクセル転送セッションで必要な色変換も自動的に行うので非常に便利です動画には複数のクリップが含まれ異なる色空間を持つ可能性があることを思い出してください AVFoundationはこれらを自動的に管理しますこれから説明するようにこの動作によりデコードされたビデオフレームをディスプレイの色空間への自動変換を行わない Metalなどのローレベルのフレームワークに送信することもできますここで AVPlayerItemVideoOutputを outputVideoSettings 辞書で作成します第3段階としてデコードされたフレームにリアルタイムでアクセスするため Displayリンクを設定します CADisplayLinkは更新毎に実行されるコールバックを取りますここでは処理のためにCoreImage に送るCVPixelBufferを得るためこれから説明するローカル関数を呼び出します次にビデオプレーヤアイテムのオブザーバを作成し指定されたプレーヤ項目のプロパティの変更を処理できます
この例ではプレイヤアイテムの状態が変化するたびにこのコードが実行されます
プレイヤアイテムのステータスが ready to playに変わったら先ほど返された新しいAVPlayerItem にAVPlayerItemVideoOutput を追加しメインランループをコモンモードに設定してCADisplayLinkを登録しビデオプレイヤで再生を呼び出すことで HDRビデオのリアルタイムデコードを開始します
最後に CADisplayLink コールバックの実装例を紹介します先ほど「displayLinkCopy PixelBuffers」ローカル関数として紹介しました HDR映像の再生が始まるとディスプレイ更新のたびにCADisplayLinkのコールバック関数が呼び出されます例えば一般的なディスプレイの場合 1秒間に60回呼び出されるかも新しい CVPixelBuffer があった場合に表示されるフレームを更新するためのコードです各表示コールバックで現在のウォールクロック時刻に表示されるデコードされたビデオフレームを含む CVPixelBufferをコピーしようとしますしかし copyPixelBufferの呼び出しは失敗するかもしれません特に画面のリフレッシュレートが再生しているビデオのリフレッシュレートを超えている場合ディスプレイのリフレッシュごとに新しい CVPixelBufferが使えるとは限らないからです新しい CVPixelBuffer がない場合呼び出しは失敗しレンダリングをスキップしますこれにより直前のフレームが再度表示更新されるまで画面上に残りますしかしコピーが成功すれば CVPixelBufferに新しい映像のフレームができますこの新しいフレームを処理しレンダリング方法はいくつもあります CVPixelBuffer を Core Imageに送信して処理することも可能です Core Imageは 1つまたは複数のCIFilterをつなぎ合わせてビデオフレームにGPUアクセラレーションによる画像処理を提供できます
ただしすべてのCIFilterが EDRに対応している訳ではなく HDRコンテンツでは SDRにクランプされるなどトラブルが発生する可能性があることをご了承くださいコアイメージではEDR対応フィルタを多数用意しています EDR対応CoreImage フィルタを列挙するには CICategoryHighDynamicRange の付いたフィルタ名を使用しますこの例ではシンプルなセピア調のエフェクトを追加しますでは例に戻って Core Imageを統合しましょう新しいCVPixelBufferを生成する表示リンクのコールバックごとにそのPixel Bufferから CIImageを生成します
CIFilterのインスタンスを作り目的の効果を実現しますパラメータのないシンプルなセピア調のフィルタを使用していますがシステムには多くのCIFilter が組み込まれており自分で作成することも簡単です CIFilterの入力画像に先ほど作成したCIImageを設定します
そして処理されたビデオ結果はフィルタの出力画像として利用できるようになります CIFilterは必要な数だけ連結して使用できますその後 CIRender Destinationを使用して Appのビューコードに結果をレンダリングします
このワークフローの詳細については WWDC 2020のセッション「動画AppのためのCore Image パイプラインの最適化」をもう一つの方法は MetalとカスタムMetalシェーダを使い CVPixelBufferを処理しレンダリングすることです CVPixelBufferを MetalTextureに変換する処理を簡単に説明しますしかし最高のパフォーマンスを維持するのにこの変換を実装するのは別のセッションに譲った方が良い深いテーマですその代わりに CoreVideoの Metalテクスチャキャッシュから Metalテクスチャを派生させることを推奨しておりこのセッションの最後の例としてそのプロセスを説明します一般的には CVPixelBufferから IOSurfaceを取得し MetalTextureDescriptorを作成し MetalDeviceかnewTextureWithDescriptor でMetalTextureを作成するという流れになります
しかし慎重にロックをかけないとテクスチャが再利用され過剰に描画される危険性がありますすべてのPixelBufferフォーマットが MetalTextureでネイティブにサポートされているわけではないのでこの例ではhalf floatを使用しますこのような複雑な問題のため CoreVideoから直接Metalのテクスチャにアクセスします Core VideoとMetalをさらに掘り下げましょう前述のように CVMetalTexture CacheはCVPixelBufferを Metalと共に使用するための直接的かつ効率的な方法です CVMetalTextureCacheは更なる変換を必要とせずにキャッシュから直接Metal Textureを取得でき便利です CVMetalTextureCacheは CVPixelBufferと MetalTextureの間のブリッジを自動的に行いコードの簡素化と高速化を実現します CVPixelBufferPoolsと共に CVMetalTextureCache もMetal TextureからIOSurfaceへのマッピングを維持することでパフォーマンス上の利点を提供します
最後に CVMetalTextureCacheを使用することで IOSurfaceを手動で追跡する必要性がなくなります今回のセッションの最後の例です： CVMetalTextureCache を用いてCore Videoから直接 Metalテクスチャを抽出する方法ですシステムデフォルトのメタルデバイスを取得することから始めますそれを使って MetalTexture cacheを作成し MetalTexture cacheに関連する Core Cideo MetalTexture Cache をインスタンス化しますこれを使いデコードされたビデオフレームを Metalのテクスチャとしてアクセスでき便利なことに Metalエンジンで直接利用することができますこの例ではMetal system default deviceを作成し使用します次にCVMetalTexture CacheCreateで先ほど作成したMetal デバイスを指定して CVMetalTextureCache を作成します Core Video Metalのテクスチャを作成するために必要なCVPixelBufferの高さと幅を取得します次に「CVMetalTextureCacheCreate TextureFromImage」を呼び出し CVMetalTexture オブジェクトをインスタンス化し CVPixelBufferと関連付けます最後に「CVMetal TextureGetTexture」を呼び出し目的のMetalテクスチャを取得します Swift AppはCVMetalTexture の強い参照を使うべきですが Objective Cを使う場合は CV MetalTextureRefをリリースする前に Metalがみなさんのテクスチャを使い終わったことを確認する必要がありますメタルコマンドバッファの完了ハンドラを使い実現できます
以上ですみなさんお疲れ様でした！今回は HDRビデオメディアを EDRにレンダリングし再生編集画像処理を行うワークフローをいくつか紹介しました
HDRメディアを再生するためAVPlayer からAVKitのAVPlayerViewControllerに移行する方法を学びましたまた AVPlayerと AVPlayerLayerを使用して HDRメディアを自分の視界に表示する方法を学びましたそして最後に再生中にリアルタイムでエフェクトを加える方法を探りました AVFoundationの AVPlayerをCoreVideoに接続しさらにMetalに接続してレンダリングします CoreImageのフィルタやメタルシェーダーを使ってリアルタイムにエフェクトをかけることも
さらに深く掘り下げるならビデオワークフローの構築や HDRメディアと EDRの統合に関するWWDCの回がおすすめです特におすすめは「AVFoundationを使用した HDR動画の編集と再生」というセッションです HDRメディアにエフェクトをかける「applyCIFiltersWithHandler」を使ったAVVideoComposition の使い方を紹介しますこのセッションでは各ビデオフレームが処理可能になった際 CVPixelBufferで使用できるカスタムコンポジターの使用方法についても学びます今年はEDRに関する回として EDR APIのサポートが iOSにも拡大したことを発表した「iOSのEDRの詳細」と EDRと他のメディアフレームワークとの統合をさらに追求した「CoreImage Metal SwiftUIによる EDRでのHDRコンテンツ表示」を発表しています macOSとiOSの両方で EDR 対応AppにHDRビデオを組み込んでいただけると幸いですご視聴ありがとうございいました

6:58 - Playing media using AVPlayerViewController

// Playing media using AVPlayerViewController
let player = AVPlayer(URL: videoURL)

// Creating a player view controller
var playerViewController = AVPlayerViewController()

playerViewController.player = player

self.presentViewController(playerViewController, animated: true) {
   playerViewController.player!.play()
}

7:38 - Playing media using AVPlayer and AVPlayerLayer

// Playing media using AVPlayer and AVPlayerLayer
let player = AVPlayer(URL: videoURL)

var playerLayer = AVPlayerLayer(player: player)

playerLayer.frame = self.view.bounds

self.view.layer.addSublayer(playerLayer)

player.play()

9:28 - CAMetalLayer Properties

// Opt into using EDR
let layer: CAMetalLayer
layer.wantsExtendedDynamicRangeContent = true

// Use half-float pixel format
layer.pixelFormat = MTLPixelFormatRGBA16Float

// Use extended linear display P3 color space
layer.colorspace = kCGColorSpaceExtendedLinearDisplayP3

11:33 - Create an AVPlayerItemVideoOutput

let videoColorProperties = [
    AVVideoColorPrimariesKey: AVVideoColorPrimaries_P3_D65,
    AVVideoTransferFunctionKey: AVVideoTransferFunction_Linear,
    AVVideoYCbCrMatrixKey: AVVideoYCbCrMatrix_ITU_R_2020
]

let outputVideoSettings = [
    AVVideoAllowWideColorKey: true,
    AVVideoColorPropertiesKey: videoColorProperties,
    kCVPixelBufferPixelFormatTypeKey as String: NSNumber(value: kCVPixelFormatType_64RGBAHalf)
] as [String : Any]
   
// Create a player item video output
let videoPlayerItemOutput 
= AVPlayerItemVideoOutput(outputSettings: outputVideoSettings)

13:02 - Create a display link

// Create a display link
lazy var displayLink: CADisplayLink 
= CADisplayLink(target: self, 
                selector: #selector(displayLinkCopyPixelBuffers(link:)))

var statusObserver: NSKeyValueObservation?

statusObserver = videoPlayerItem.observe(\.status,
      options: [.new, .old],
      changeHandler: { playerItem, change in
        if playerItem.status == .readyToPlay {
          playerItem.add(videoPlayerItemOutput)
          displayLink.add(to: .main, forMode: .common)
          videoPlayer?.play()
        }
     })
}

14:16 - Run DisplayLink to get pixel buffers

@objc func displayLinkCopyPixelBuffers(link: CADisplayLink) 
{
  let currentTime = videoPlayerItemOutput.itemTime(forHostTime: CACurrentMediaTime())
	
  if videoPlayerItemOutput.hasNewPixelBuffer(forItemTime: currentTime)
  {
      if let buffer 
      = videoPlayerItemOutput.copyPixelBuffer(forItemTime: currentTime, 
	                                          itemTimeForDisplay: nil) 
	  {
        let image = CIImage(cvPixelBuffer: buffer!)

        let filter = CIFilter.sepiaTone()
        filter.inputImage = image
        output = filter.outputImage ?? CIImage.empty()
    
        // use context to render to you CIRenderDestination
     }
 }
}

15:53 - Integrate Core Image

@objc func displayLinkCopyPixelBuffers(link: CADisplayLink) 
{
  let currentTime = videoPlayerItemOutput.itemTime(forHostTime: CACurrentMediaTime())
	
  if videoPlayerItemOutput.hasNewPixelBuffer(forItemTime: currentTime)
  {
      if let buffer 
      = videoPlayerItemOutput.copyPixelBuffer(forItemTime: currentTime, 
	                                          itemTimeForDisplay: nil) 
	  {
        let image = CIImage(cvPixelBuffer: buffer)

        let filter = CIFilter.sepiaTone()
        filter.inputImage = image
        output = filter.outputImage ?? CIImage.empty()
    
        // use context to render to your CIRenderDestination
     }
  }
}

19:13 - Using CVMetalTextureCache

// Create a CVMetalTextureCacheRef

let mtlDevice = MTLCreateSystemDefaultDevice()

var mtlTextureCache: CVMetalTextureCache? = nil

CVMetalTextureCacheCreate(allocator: kCFAllocatorDefault, 
                          cacheAttributes: nil, 
                          metalDevice: mtlDevice, 
                          textureAttributes: nil, 
                          cacheOut: &mtlTextureCache)

// Create a CVMetalTextureRef using metalTextureCache and our pixelBuffer
let width  = CVPixelBufferGetWidth(pixelBuffer)
let height = CVPixelBufferGetHeight(pixelBuffer)

var cvTexture : CVMetalTexture? = nil

CVMetalTextureCacheCreateTextureFromImage(allocator: kCFAllocatorDefault, 
                                          textureCache: mtlTextureCache, 
                                          sourceImage: pixelBuffer, 
                                          textureAttributes: nil, 
                                          pixelFormat: MTLPixelFormatRGBA16Float, 
                                          width: width, 
                                          height: height, 
                                          planeIndex: 0, 
                                          textureOut: &cvTexture)

let texture = CVMetalTextureGetTexture(cvTexture)

// In Obj-C, release CVMetalTextureRef in Metal command buffer completion handlers

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

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC23

Tech Talks

WWDC22

WWDC21

WWDC20