ScreenCaptureKitを次のレベルへ引き上げる

ScreenCaptureKitを次のレベルへ引き上げる

ScreenCaptureKitで、Appユーザに高度なスクリーンキャプチャ機能を提供する方法をご覧ください。コンテンツフィルタの微調整、フレームメタデータの解釈、ウィンドウピッカーなど、組み込むことができる数多くの高度なオプションを紹介します。また、最適なパフォーマンスを実現するストリームを構成する方法についても解説します。

リソース
関連ビデオ

WWDC23
- ScreenCaptureKitの新機能
WWDC22
- ScreenCaptureKitの紹介
ダウンロード

♪ メロウなヒップホップ音楽 ♪ ♪ Meng Yang：こんにちは Meng Yangです Apple GPU Softwareエンジニアです今日は ScreenCaptureKitの高度な内容をいくつか取り上げAppの画面共有体験を次のレベルに引き上げる方法について説明します後ほど同僚のDrewがこの新しいAPIの使い方をデモでご紹介しますスクリーンキャプチャはZoom・Google Meet SharePlayなどでの画面共有にさらにはTwitchなどゲームストリーミングのサービスでも中心的な役割を果たしここ数年で仕事や勉強共同作業や人とつながるための新たな方法になりました ScreenCaptureKitはまったく新しい高性能なスクリーンキャプチャフレームワークで新規に開発された強力な機能を備えています豊富な機能の中には高度にカスタマイズ可能なコンテンツコントロールが含まれキャプチャしたいウィンドウやAppディスプレイなどを自由に組み合わせて簡単に選択できます画面コンテンツのネイティブ解像度やフレームレートまでキャプチャする機能解像度フレームレートピクセルフォーマットなどのストリームプロパティの動的な制御ストリームを新たに作成することなくこれらをオンザフライで制御可能ですキャプチャバッファはGPUメモリにバックアップされメモリコピーを削減しますハードウェアアクセラレーションによるコンテンツのキャプチャとスケーリングピクセルとカラーフォーマット変換により CPU使用率を削減しますビデオとオーディオの両方のキャプチャをサポートしていますそれでは始めますがこの動画はフレームワークの動作に関する基本的な概念や構成要素ワークフローの理解を前提としています詳しくはイントロセッション「ScreenCaptureKitの紹介」をご覧くださいこのセッションでは1つのウィンドウをキャプチャして表示する方法についてお話します次にフルティスプレイキャプチャに画面コンテンツを追加する方法ディスプレイキャプチャからコンテンツを削除する方法様々な使い方に合わせてストリームを設定する方法をいくつかご紹介します最後にScreenCaptureKitが人気のオープンソース画面キャプチャAppの OBS Studioの画面・音声キャプチャ体験にもたらす変化についてデモをご覧いただきますでは最初の例から始めましょうおそらく最も一般的な使用例である 1つのウィンドウをキャプチャしますこの例ではシングルウィンドウフィルタの設定方法キャプチャしたウィンドウの大きさを変えたりウィンドウが隠れたり画面外に出たり最小化された時ストリーム出力に与える影響について説明しますフレーム単位のメタデータの使い方やキャプチャしたウィンドウの適切な表示方法についても説明しますでは始めましょう表示されているディスプレイに関係なく 1つのウィンドウをキャプチャするにはまずシングルウィンドウフィルタを使い 1つウィンドウだけでフィルタを初期化しますこの例では 1つのSafariウィンドウを含むよう設定されていますビデオ出力にはそのウィンドウだけが含まれます Safariの子ウィンドウやポップアップ他のウィンドウは含まれません一方 ScreenCaptureKitの音声キャプチャポリシーは常にAppレベルで動作していますシングルウィンドウフィルタが使われている場合そのウィンドウを含むAppからのすべてのオーディオコンテンツがキャプチャされ映像出力には含まれないウィンドウの音声もキャプチャしますコードのサンプルを見てみましょう 1つのウィンドウでストリームを作成するには SCShareableContentを介して共有可能なすべてのコンテンツを取得します次に SCShareableContentから windowIDを照合して共有したいウィンドウを取得します次に指定されたSCWindowで desktopIndependentWindowタイプの SCContentFilterを作成しますストリーム出力に音声を含めるようストリームを設定する事も可能ですこれでcontentFilterとstreamConfigを使ってストリームを作成する準備が出来ました StreamOutputを追加するとストリームが始まります次にストリーム出力を見てみましょうこの例ではソースディスプレイが左に表示されストリーム出力が右に表示されますストリームフィルタには Safariウィンドウが1つありますキャプチャされているSafariウィンドウをスクロールしてみましょうストリーム出力には単一のSafariウィンドウのライブコンテンツが出力されソースウィンドウのフレームレートと同じテンポで更新しています例えばソースウィンドウが常に120Hzで更新されていればストリーム出力も最大120fpsでの更新が実現可能ですウィンドウサイズを変更したらどうなるでしょうメモリの追加割り当てが発生しますのでウィンドウサイズを頻繁に変更することは推奨される行為ではありませんストリームの出力サイズはほぼ固定となっておりソースウィンドウに合わせて変わることはありませんではソースウィンドウのサイズを変更してストリーム出力の変化を見てみましょう ScreenCaptureKitはキャプチャしたウィンドウに対して常にハードウェアスケーリングを行うためソースウィンドウのサイズが変わってもフレームをはみ出すことはありません他のウィンドウで隠されたウィンドウはどうでしょう？ソースウィンドウの全部や一部が隠れていてもストリームには常にウィンドウ全体のコンテンツが出力されますこれはウィンドウが完全に画面外に出てしまったり他のディスプレイに移動しても変わりませんまたソースウィンドウが最小化されるとストリーム出力が一時停止しウィンドウの最小化が解除されると再開されますではオーディオ出力の話に移りましょうこちらの例ではオーディオトラックのあるSafariウィンドウが 2つあり左のウィンドウをキャプチャしていますビデオ出力には最初のウィンドウが表示され両方のSafariウィンドウのオーディオトラックが出力されていますでは視聴してみましょう ♪ 電子的なダンス・ミュージック♪ シェフ：お気に入りのワカモレのレシピを書きましたアボカドを4つ使います Meng：ストリームの最中に新しいフレームが利用可能になると Appが更新されたフレームを受け取りますフレーム出力にはキャプチャされたフレームを表す IOSurfaceとフレームごとのメタデータが含まれます少しメタデータについて説明したいと思いますこれから Appにとても役立つメタデータの例をお見せしますメタデータにはdirty rectやcontent rect コンテンツスケールやスケールファクタなどがあります Dirty rectから始めましょう Dirty rectは前のフレームから新たにコンテンツが更新された場所を示しますこの例ではDirty rectがハイライトされフレームの更新された領域を示しています常にフレーム全体をエンコードしたりエンコーダで2フレーム間の差分を計算せずに Dirty rectを使って更新がある領域だけをエンコードし送信して受信側で更新を前のフレームにコピーすれば新しいフレームを作成できます Dirty rectは出力されたCMSampleBufferのメタデータディクショナリからマッチングキーを使って取得できます次はコンテンツRectとコンテンツスケールですキャプチャするソースウィンドウは左出力されるストリームは右のウィンドウですウィンドウはサイズ変更可能なためソースウィンドウの元のサーフェスサイズがストリーム出力のサイズに合わない事がありますこの例ではキャプチャしたウィンドウはフレーム出力とアスペクト比が異なり大きくなっていますキャプチャしたウィンドウは出力に合うよう縮小されますコンテンツRectは緑でハイライトされストリーム出力のキャプチャコンテンツ内の意味のある領域を示していますコンテンツスケールはコンテンツがフィットする拡大縮小の度合いを示していますここではキャプチャしたSafariウィンドウはフレームに収めるために 0.77倍縮小されています先ほど説明したメタデータを使ってキャプチャしたウィンドウをできるだけ本来の姿に近づけ正しく表示できますまずコンテンツRectを使って出力からコンテンツを切りとりましょう次にコンテンツスケールの倍率でコンテンツを拡大しますこれでキャプチャしたコンテンツはソースとピクセル比が1対1になるよう拡大縮小されましたしかしキャプチャしたウィンドウはターゲットディスプレイにどう表示されるでしょう？その質問の答としてまずスケールファクタの仕組みから説明したいと思いますディスプレイのスケールファクタとはディスプレイやウィンドウの論理的なポイントサイズとバックサーフェスのピクセルサイズとの比率を示しますスケールファクタが2つまり2xモードでは画面上の1ピクセルが4ピクセルに相当しますこの例のようにスケールファクタ2の Retinaディスプレイからスケールファクタ1の Retinaではないディスプレイにキャプチャしたウィンドウを移動しますスケールファクタ1では画面上の論理的な1ポイントがバックサーフェスの1ピクセルに対応しますまたソースディスプレイはキャプチャしたコンテンツが表示されるターゲットディスプレイとスケールファクタが異なる場合がありますこの例では左のスケールファクタ2の Retinaディスプレイからウィンドウをキャプチャし右のRetinaでは無いディスプレイに表示しますキャプチャしたウィンドウを 1ポイント1ピクセルでターゲットのRetinaでは無いディスプレイにそのまま表示するとウィンドウは4倍の大きさに見えますこれを解決するにはフレームのメタデータのスケールファクタとターゲットディスプレイのスケールファクタを確認する必要があります異なる場合はキャプチャしたコンテンツのサイズを表示前にスケールファクタでスケーリングしますスケーリング後ターゲットディスプレイのウィンドウはソースウィンドウと同じサイズに見えるようになりますではコードを見てみましょう非常にシンプルですコンテンツRect　コンテンツスケールスケールファクタは出力されたCMSampleBufferの添付メタデータから取得も可能ですこのメタデータを使いキャプチャしたコンテンツを正しく表示するためトリミングやスケーリングを行いますまとめるとシングルウィンドウフィルタはソースウィンドウが画面外だったり隠れていても常にフルウィンドウのコンテンツをキャプチャ可能ですディスプレイやスペースには依存しません出力は常に左上にオフセットされていますポップアップや子ウィンドウは含まれませんコンテンツを最適に表示するためメタデータを使いましょう App全体のオーディオトラックが含まれます 1つのウィンドウをキャプチャして表示する方法を学んだところで表示に基づいたコンテンツフィルタの話に移りましょう次の例ではウィンドウやAppを使ったディスプレイベースのフィルタの作成方法を学びビデオとオーディオフィルタのルールの違いを紹介しますディスプレイベースのインクルージョンフィルタはコンテンツをキャプチャするディスプレイを指定しますデフォルトではウィンドウはキャプチャされませんウィンドウ単位でキャプチャするコンテンツを選択できますこの例では SafariとKeynoteのウィンドウがディスプレイフィルタに追加されていますビデオ出力にはディスプレイスペースに配置されたこの2つのウィンドウだけが含まれオーディオ出力にはKeynoteと Safari Appからの音声がすべて含まれますこのコードのサンプルは追加されたウィンドウを使ってディスプレイベースのフィルタの作成方法を示していますまずSCShareableContentとwindowIDを使って SCWindowsのリストを作成します次にディスプレイと追加されたウィンドウのリストを含むディスプレイベースの SCContentFilterを作成しますその後デスクトップから独立したウィンドウと同じようにフィルタと設定を使用してストリームを作成し開始しますストリームが始まったのでストリーム出力を見てみましょうフィルタは 2つの Safariウィンドウメニューバー壁紙ウィンドウを含むよう設定されています
ウィンドウが画面外に移動するとストリーム出力から削除されます新しいSafariウィンドウを作ってもフィルタに含まれていないためストリーム出力には表示されません子ウィンドウやポップアップにも同じルールが適用されストリームに表示されませんストリーム出力に子ウィンドウが自動的に含まれるようにしたい場合は追加するAppでディスプレイベースフィルタを使用しますこの例では SafariとKeynote Appをフィルタに追加することでこの2つの Appのすべてのウィンドウとサウンドトラックからのオーディオとビデオ出力が出力に含まれるようになりますウィンドウ例外フィルタは追加したAppでディスプレイに指定すると特定のウィンドウを出力から取り除くパワフルな方法です例えば 1つのSafariウィンドウを出力から削除できます ScreenCaptureKitはAppレベルでオーディオキャプチャを可能にするため 1つのSafariウィンドウからオーディオを除外するとすべてのSafari Appからオーディオトラックを除外するのと同じことになりますストリームのビデオ出力にはまだ Safariウィンドウは含まれていますが Safari Appからのオーディオトラックはすべて削除されオーディオ出力にはKeynoteのオーディオトラックだけが含まれますこのコードの例ではSCWindowsの代わりに SCContentFilterを変更して SCRunningApplicationsのリストを含めますさらに除外したい個別のウィンドウがあれば SCWindowsのリストを作成し除外するウィンドウのリストと SCApplicationsのリストを使用して SCContentFilterを作成しますでは含めるAppを指定して新規または子ウィンドウを作成した場合にストリーム出力がどのようになるかを見てみましょう今回はSafari Appとシステムウィンドウをフィルタに追加します新しいSafariウィンドウは自動的にストリーム出力に含まれ子ウィンドウとポップアップにも同じルールが適用されていますこれはチュートリアルを行う際にポップアップや新しいウィンドウを開く作業を含めすべてを実演したい場合に便利です複数の方法でストリーム出力にコンテンツを追加する方法をお見せしました次はストリーム出力からコンテンツを削除する方法をお見せしますこの例では共有画面のプレビュー機能を有するビデオ会議Appを模したテストAppを紹介しますテストAppのプレビューが繰り返し表示されるため合わせ鏡のような効果が発生しています全画面共有の場合でも画面共有Appでは合わせ鏡効果を回避するために自身のウィンドウやキャプチャプレビュー参加者のカメラビュー通知ウィンドウなど他のシステム UIを除外するのが一般的です ScreenCaptureKitはディスプレイのキャプチャからコンテンツを素早く除外できる除外用のフィルタセットを提供しています除外用のフィルタはデフォルトで指定されたディスプレイからすべてのウィンドウをキャプチャしますその後個々のウィンドウやAppを除外フィルタに追加して削除を開始できます例えばコンテンツをキャプチャするテストAppや通知センターを除外Appリストに追加できます一連のAppを除外するディスプレイベースのフィルタを作成するにはバンドルIDの一致によって除外するSCApplicationsを取得することから始めますストリーム出力に個別に戻したいウィンドウがあれば例外にするSCWindowsのリストをオプションで作成することも可能ですそして使用するディスプレイ除外するAppと例外ウィンドウのリストを使用してコンテンツフィルタを作成します結果を見てみましょう合わせ鏡状態を引き起こしたコンテンツキャプチャテストAppと通知ウィンドウがストリーム出力から削除されましたこれらAppの新しいウィンドウや子ウィンドウも自動的に削除されます削除されたAppに音声が含まれる場合その音声もオーディオ出力から削除されますここまで単一のウィンドウをキャプチャする方法ディスプレイフィルタからウィンドウを追加・削除する方法を見てきました次はストリームの設定に移ります次の例では設定可能な様々なストリームのプロパティやスクリーンキャプチャとストリーミングの設定ライブプレビュー機能を備えたウィンドウピッカーを作成する方法について学びますまずプロパティの設定から説明しますこちらは一般的なストリームのプロパティですストリーム出力のサイズソースや送信先のRect カラースペースカラーマトリックスピクセルフォーマットカーソルを含むか否かフレームレート制御などを設定できます次に各プロパティの詳細を見ていきます出力のサイズから始めましょうここでは幅と高さをピクセル単位で指定できますソースディスプレイのサイズとアスペクト比は常に出力サイズと一致するとは限りません全画面キャプチャの時にここが異なるとストリーム出力にピラーやレターボックスが表れますキャプチャする部分を定義するソースRectを指定するとその結果がフレーム出力上の送信先Rectにレンダリングされスケーリングされます ScreenCaptureKitはハードウェアアクセラレーションによるカラースペースカラーマトリックスピクセルフォーマットの変換をサポートしています一般的なBGRAとYUV フォーマットに対応しています完全な一覧については開発者向けページをご覧くださいカーソルの表示が有効な場合ストリーム出力にはプリレンダリングされたカーソルが含まれますこれはすべてのシステムカーソルに適用されこのようなカメラ型のカスタムカーソルにも適用されます最小フレームインターバルを使って希望の出力フレームレートを制御できます例えば 60 fpsを要求する場合最小インターバルを1/60に設定しますすると最大で60 fpsまたはコンテンツの元のフレームレートでフレームが更新されますキューの深さはサーバー側のサーフェスプールのサーフェス数を決定するために指定しますプール内のサーフェス数を増やすとフレームレートとパフォーマンスが向上しますがシステムメモリの使用量が増えレイテンシとのトレードオフになる可能性がありますこれは後ほど詳しくお話します ScreenCaptureKitはキューの深さを 3～8の間で設定できますがデフォルトは3となりますこの例ではScreenCaptureKitがレンダリングできる 4つのサーフェスを含むようにサーフェスプールが設定されています現在アクティブなサーフェスはサーフェス1で ScreenCaptureKitは次のフレームをレンダリングしていますサーフェス1が完了すると ScreenCaptureKitはサーフェス1をAppに送信します Appがサーフェス1を処理し保持する間 ScreenCaptureKitはサーフェス2をレンダリングしていますサーフェス1はAppがまだ使用中なためプール内で使用不可とマークされますサーフェス2が完了するとAppに送信され ScreenCaptureKitはサーフェス3をレンダリングします Appがまだサーフェス1を処理している場合フレームが処理可能な速度より速く提供され遅延が発生し始めますサーフェスプールに大量のサーフェスがある場合新しいサーフェスが蓄積され始め追いつくためにフレームを落とすことを検討する必要がありますこの場合プール内のサーフェス数が多いほどレイテンシが高くなる可能性があります ScreenCaptureKitが使用できるプールに残っているサーフェスの数はキューの深さから Appが保持するサーフェス数を引いた数になりますこの例ではサーフェス1と2の両方がまだAppに保持されていますサーフェスプールにはサーフェスが2つ残っていますサーフェス3が完了してAppに送信されるとプール内に残った利用可能なサーフェスは4だけです Appがサーフェス1～3を保持し続けると ScreenCaptureKitがレンダリングできるサーフェスが無くなりフレームロスやグリッチが発生し始めますフレームロスを防ぐためScreenCaptureKitがサーフェス4の次のフレームのレンダリングを開始する前に Appがサーフェス1を完了してリリースする必要があります Appがサーフェス1をリリースしたので再びScreenCaptureKitで使用可能になりましたまとめるとフレームの遅延やロスを回避するために Appが従うべきルールが2つありますフレームの遅延を防ぐには MinimumFrameInterval内にフレームを処理できるようにする必要がありますフレームロスを防ぐにはAppがサーフェスをリリースしてプールに戻すまでの時間が MinimumFrameIntervalにキューの深さを掛けた値から1を引いた数より短い必要がありますその後はScreenCaptureKitが使えるサーフェスが無くなり新しいフレームを生成できませんさまざまなプロパティ設定を見たところでスクリーンキャプチャおよびストリーミングのためにストリームを設定する例をいくつか紹介しますスクリーンコンテンツには常に更新されるビデオゲームアニメーションなどがあり高いフレームレートを要求されますまた Keynoteウィンドウのように静止したテキストが多くフレームレートより高解像度を優先するものもあります共有するコンテンツやネットワークの状況に応じてストリーム設定をその場で調整できますこのコードの例では4K 64fpsでゲームをストリームするためにキャプチャを設定しますまずストリーム出力のサイズをピクセルサイズで4Kに設定しますそして出力フレームを60fpsにするために最小フレームインターバルを1/60に設定しますエンコードとストリーミングにピクセルフォーマットYUV420を使用しますオプションのソースRectを設定して画面の一部のみをキャプチャします次に背景のフィルカラーを黒に変更しフレーム出力にカーソルを含めます最適なフレームレートとパフォーマンスのためにサーフェスキューの深さを5に設定します最後に出力ストリームのオーディオを有効にします先ほどの例で見たストリーム設定はすべてストリームを再度作成せずにオンザフライで動的に変更できます例えば出力サイズなどのプロパティをライブで調整したりフレームレートを動的に変更したりストリームフィルタを更新したりできますここでは4Kから720pに出力サイズを下げる例を示していますフレームレートも60fpsから 15fpsに落としていますその後 updateConfigurationを呼び出すだけでストリームを中断することなくオンザフライで新しい設定を適用できます最後の例ではライブビュー機能を備えたウィンドウピッカーの作成方法を説明しますここでは典型的なウィンドウピッカーの例を示しますウェブ会議の画面共有Appでは共有するウィンドウの正確なサイズを選択できるオプションをユーザに提供するのが一般的です ScreenCaptureKitはライブコンテンツの更新の際に多数のサムネイルサイズのストリームを作成する効率的で高性能なソリューションを簡単に実装可能です ScreenCaptureKitを使ってこのようなウィンドウピッカーを作る作業を見てみましょうピッカーを設定するにはまずAppがユーザにピックを許可する対象となるウィンドウごとにデスクトップの独立したウィンドウをフィルタタイプとするシングルウィンドウフィルタを作成します次にストリームを設定しますサムネイルサイズ 5fps BGRAピクセルフォーマットキューの深さはデフォルトカーソルとオーディオは無しにしますシングルウィンドウフィルタとこのストリーム設定を使って各ウィンドウに 1つのストリームを作成しますこれをコード化するにはまずデスクトップとシステムウィンドウを除外し SCShareableContentを取得します次に対象の各ウィンドウにデスクトップの独立したウィンドウタイプのコンテンツフィルタを作成します次にストリーム設定部分に移ります適切なサムネイルサイズを選択しますこの例では284x182とし最小フレームインターバルを1/5に設定します画面表示のピクセルフォーマットをBGRAにオーディオとカーソルはプレビューでは必要ないため無効にします頻繁な更新はないと思うのでキューの深さは 3に設定しますストリームコンテンツフィルタと設定を作成しストリームを作成する準備ができましたウィンドウごとにストリームを1つ作成しストリームごとにストリーム出力を追加ストリームを開始します最後にストリームリストに加えますこれが先ほどのサンプルコードを使って作成したライブプレビュ－付きのウィンドウピッカーです各サムネイルはライブで更新されシングルウィンドウフィルタで個々にストリームされます ScreenCaptureKitを使うとこのようなライブプレビューピッカーを簡単に作成できシステムに負担を掛けずに多くのライブスクリーンを同時にキャプチャできますでは同僚のDrewに交代して ScreenCaptureKitのOBSへの応用について素晴らしいデモを披露してもらいます Drew Nills：ありがとう Meng Apple Partner EngineerのDrewです OBS Studioはコンピュータからのストリーミングコンテンツを録画管理できるオープンソースのAppですこの春に取り組んだプロジェクトで ScreenCaptureKitが統合されました ScreenCaptureKitは OBSの既存のCGDisplayStream ベースのキャプチャと同様のコードを利用し実装されました ScreenCaptureKitの実装については「ScreenCaptureKitの紹介」のセッションで多くの機能のデモを行っていますデスクトップ全体および Appのすべてのウィンドウ特定の1つのウィンドウのキャプチャなどを紹介しています ScreenCaptureKitは OBSのCGWindowListCreateImage ベースのキャプチャよりもオーバーヘッドが低くなっていますこれは画面の一部をキャプチャする場合コンテンツ制作に使えるリソースが増えることを意味していますではこれまで説明した内容を実際にデモで見てみましょう左はOBSのウィンドウキャプチャの最悪の例です CGWindowListCreateImage API でキャプチャを行いコマ飛びが発生していますテストではフレームレートが 7fpsまで落ち込んでいました一方右のScreenCaptureKitを使用するとより滑らかな結果となりスムーズな映像が出力されていますこのケースでは60fpsを実現していますその間 OBSではWindow Captureより RAMの使用量が最大15％下がっていますまたWindow Captureの代わりに ScreenCaptureKitを使用した場合　CPU使用率は最大で半分に削減できます ScreenCaptureKitが OBSユーザに提供する他の改善点を見てみましょう私はまだ「Sayonara Wild Hearts」の全部のGold Rankを達成していないのですが自分のベストなプレーを見せたいのでゲームプレイを録画しています ScreenCaptureKitのおかげでゲームからオーディオストリームを直接キャプチャできます Macに通知が来ても録画の音声や映像には影響しませんオーディオルーティングソフトを別にインストールする必要はありません ♪ AppleシリコンがScreenCaptureKitに提供する機能拡張をすべて利用して Macで「太鼓の達人 Pop Tap Beat」のようなゲームを人気のストリーミングサービスに配信できます Appleシリコンのハードウェアエンコーダに新たに固定ビットレートオプションが加わりゲームパフォーマンスに大きな影響を与えずに固定ビットレートを必要とするサービス向けにストリーミングコンテンツをエンコードできます ScreenCaptureKitの低いリソース占有率とエンコードの負担軽減により重要なコンテンツでさらに多くのパフォーマンスを利用できるのです Mengにお返しします Meng：ありがとう Drew デモや例を通して高度なスクリーンコンテンツフィルタについて学びましたさまざまな使い方に対応するストリーム設定の方法フレーム単位のメタデータを使用しキャプチャしたコンテンツを正しく表示する方法最高のパフォーマンスを実現するベストプラクティス最後に DrewがScreenCaptureKitが OBSに提供する機能やパフォーマンスの改善について紹介しました ScreenCaptureKitを使ったAppで画面共有ストリーミング共同制作体験の新たな可能性を見るのが待ち遠しいですご視聴ありがとうございました！ ♪

// Get all available content to share via SCShareableContent
let shareableContent = try await SCShareableContent.excludingDesktopWindows(false, 
       onScreenWindowsOnly: false)

// Get window you want to share from SCShareableContent
guard let window : [SCWindow] = shareableContent.windows.first( where: 
                                    { $0.windowID == windowID }) else { return } 

// Create SCContentFilter for Independent Window
let contentFilter = SCContentFilter(desktopIndependentWindow: window)

// Create SCStreamConfiguration object and enable audio capture
let streamConfig = SCStreamConfiguration()
streamConfig.capturesAudio = true

// Create stream with config and filter
stream = SCStream(filter: contentFilter, configuration: streamConfig, delegate: self)
stream.addStreamOutput(self, type: .screen, sampleHandlerQueue: serialQueue)
stream.startCapture()

9:38 - Get dirty rects

// Get dirty rects from CMSampleBuffer dictionary metadata

func streamUpdateHandler(_ stream: SCStream, sampleBuffer: CMSampleBuffer) {
    guard let attachmentsArray = CMSampleBufferGetSampleAttachmentsArray(sampleBuffer, 
                                                          createIfNecessary: false) as? 
                                                         [[SCStreamFrameInfo, Any]], 
        let attachments = attachmentsArray.first else { return }
        
        let dirtyRects = attachments[.dirtyRects]    
    }
}

// Only encode and transmit the content within dirty rects

13:34 - Get content rect, content scale and scale factor

/* Get and use contentRect, contentScale and scaleFactor (pixel density) to convert the captured window back to its native size and pixel density */

func streamUpdateHandler(_ stream: SCStream, sampleBuffer: CMSampleBuffer) {

    guard let attachmentsArray = CMSampleBufferGetSampleAttachmentsArray(sampleBuffer, 
                                                          createIfNecessary: false) as? 
                                                         [[SCStreamFrameInfo, Any]], 
        let attachments = attachmentsArray.first else { return }

        let contentRect = attachments[.contentRect]
        let contentScale = attachments[.contentScale]
        let scaleFactor = attachments[.scaleFactor]

        /* Use contentRect to crop the frame, and then contentScale and 
        scaleFactor to scale it */

    }
}

15:37 - Create display filter with included windows

// Get all available content to share via SCShareableContent
let shareableContent = try await SCShareableContent.excludingDesktopWindows(false, 
                                                            onScreenWindowsOnly: false)

// Create SCWindow list using SCShareableContent and the window IDs to capture
let includingWindows = shareableContent.windows.filter { windowIDs.contains($0.windowID)}

// Create SCContentFilter for Full Display Including Windows
let contentFilter = SCContentFilter(display: display, including: includingWindows)

// Create SCStreamConfiguration object and enable audio
let streamConfig = SCStreamConfiguration()
streamConfig.capturesAudio = true

// Create stream
stream = SCStream(filter: contentFilter, configuration: streamConfig, delegate: self)
stream.addStreamOutput(self, type: .screen, sampleHandlerQueue: serialQueue)
stream.startCapture()

18:13 - Create display filter with included apps

// Get all available content to share via SCShareableContent
let shareableContent = try await SCShareableContent.excludingDesktopWindows(false, onScreenWindowsOnly: false)

/* Create list of SCRunningApplications using SCShareableContent and the application 
IDs you’d like to capture */
let includingApplications = shareableContent.applications.filter { 
    appBundleIDs.contains($0.bundleIdentifier)
}

// Create SCWindow list using SCShareableContent and the window IDs to except
let exceptingWindows = shareableContent.windows.filter { windowIDs.contains($0.windowID) }

// Create SCContentFilter for Full Display Including Apps, Excepting Windows
let contentFilter = SCContentFilter(display: display, including: includingApplications,
                           exceptingWindows: exceptingWindows)

20:46 - Create display filter with excluded apps

// Get all available content to share via SCShareableContent
let shareableContent = try await SCShareableContent.excludingDesktopWindows(false, 
                                         onScreenWindowsOnly: false)

/* Create list of SCRunningApplications using SCShareableContent and the app IDs 
you’d like to exclude */
let excludingApplications = shareableContent.applications.filter { 
    appBundleIDs.contains($0.bundleIdentifier)
}

// Create SCWindow list using SCShareableContent and the window IDs to except
let exceptingWindows = shareableContent.windows.filter { windowIDs.contains($0.windowID) }

// Create SCContentFilter for Full Display Excluding Windows
let contentFilter = SCContentFilter(display: display, 
                        excludingApplications: excludingApplications, 
                        exceptingWindows: exceptingWindows)

28:46 - Configure 4k 60FPS capture for streaming

let streamConfiguration = SCStreamConfiguration()

// 4K output size
streamConfiguration.width  = 3840
streamConfiguration.height = 2160

// 60 FPS
streamConfiguration.minimumFrameInterval = CMTime(value: 1, timescale: CMTimeScale(60))

// 420v output pixel format for encoding
streamConfiguration.pixelFormat = kCVPixelFormatType_420YpCbCr8BiPlanarVideoRange

// Source rect(optional)
streamConfiguration.sourceRect = CGRectMake(100, 200, 3940, 2360)

// Set background fill color to black
streamConfiguration.backgroundColor = CGColor.black 

// Include cursor in capture 
streamConfiguration.showsCursor = true

// Valid queue depth is between 3 to 8
streamConfiguration.queueDepth = 5

// Include audio in capture
streamConfiguration.capturesAudio = true

30:08 - Live downgrade 4k 60FPS to 720p 15FPS

// Update output dimension down to 720p
streamConfiguration.width  = 1280
streamConfiguration.height = 720

// 15FPS
streamConfiguration.minimumFrameInterval = CMTime(value: 1, timescale: CMTimeScale(15))

// Update the configuration
try await stream.updateConfiguration(streamConfiguration)

31:57 - Build a window picker with live preview

// Get all available content to share via SCShareableContent
let shareableContent = try await SCShareableContent.excludingDesktopWindows(false, 
                                        onScreenWindowsOnly: true)

// Create a SCContentFilter for each shareable SCWindows
let contentFilters = shareableContent.windows.map { 
    SCContentFilter(desktopIndependentWindow: $0) 
}

// Stream configuration
let streamConfiguration = SCStreamConfiguration()

// 284x182 frame output
streamConfiguration.width  = 284
streamConfiguration.height = 182
// 5 FPS
streamConfiguration.minimumFrameInterval = CMTime(value: 1, timescale: CMTimeScale(5))
// BGRA pixel format for on screen display
streamConfiguration.pixelFormat = kCVPixelFormatType_32BGRA
// No audio
streamConfiguration.capturesAudio = false
// Does not include cursor in capture 
streamConfiguration.showsCursor = false
// Valid queue depth is between 3 to 8

// Create a SCStream with each SCContentFilter
var streams: [SCStream] = []
for contentFilter in contentFilters {
    let stream = SCStream(filter: contentFilter, streamConfiguration: streamConfig, 
                        delegate: self)
    try stream.addStreamOutput(self, type: .screen, sampleHandlerQueue: serialQueue)
    try await stream.startCapture()
    streams.append(stream)
}

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

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

リソース

関連ビデオ

WWDC23

WWDC22