ScreenCaptureKitの新機能

ScreenCaptureKitの新機能

ScreenCaptureKitの最新機能を使って、画面共有の体験をレベルアップしましょう。ビルトインのシステムピッカー、プレゼンターオーバーレイ、スクリーンショット機能を探求し、これらの機能を既存のScreenCaptureKitアプリやゲームに組み込む方法を学びましょう。

関連する章
- 0:08 - Intro
- 1:36 - Presenter Overlay
- 4:36 - Screen sharing picker
- 9:46 - Screenshot API
- 13:01 - Wrap-Up
リソース
- ScreenCaptureKit
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- プライバシーの新機能
WWDC22
- ScreenCaptureKitの紹介
- ScreenCaptureKitを次のレベルへ引き上げる
ダウンロード

♪ ♪
Christopher: こんにちはようこそ！ ScreenCaptureKitチームのソフトウェアエンジニアの Christopherです同僚のNatalie Lindsayとアプリのスクリーンキャプチャ機能を強化する新機能を紹介します
ScreenCaptureKitは macOS 12.3で導入されアプリの画面共有体験を作成する際に役立ちます ScreenCaptureKitはアプリのニーズに合ったコントロールで共有したいコンテンツをカスタマイズできるAPIを提供しそのすべてをストリームに動的に適用できますこのフレームワークはディスプレイのネイティブ解像度とフレームレートにまで対応するパフォーマンスに重点を置き高品質のコンテンツを提供します今年 ScreenCaptureKitは macOSの新機能と統合する複数のデベロッパAPIを提供しますプレゼンターオーバーレイはキャプチャしたコンテンツにプレゼンターを埋め込み表示することで画面共有やプレゼンテーションをより個人的なものにできる機能です新しい画面共有ピッカーを使えば画面共有でキャプチャしたものをシステム全体で統合できるようになります最後にスクリーンキャプチャはライブストリームのためだけではありません今年は選択したあらゆるコンテンツの高解像度スクリーンショットをキャプチャできるまったく新しいAPIがあります人々は毎日世界中で交流していますこのような交流は私たちが考えやアイデアを共有する場でもありますプロフェッショナルでもあり個人的なものでもありますこのためアプリはプレゼンターオーバーレイと呼ばれる― 新しいビデオエフェクトとシームレスに連携することができますプレゼンターオーバーレイはコンテンツを共有する際に共有コンテンツの上にプレゼンターを表示しプレゼンターの存在感を高めより生産的なリモート通話に個人的な要素を追加します小さなオーバーレイは高度なセグメンテーションアルゴリズムによりプレゼンターを移動可能なウインドウに配置します一方大きなオーバーレイではプレゼンターの顔と体を背景から分離しその間に画面コンテンツを重ねることでさらにイマーシブな効果を実現しますプレゼンターオーバーレイは ScreenCaptureKitを使用するすべてのアプリで使用できます SCStreamが作成されるたびに ScreenCaptureKitは画面共有ピッカーに通知しストリームのコントロール付きライブプレビューが新しいビデオのメニューバー項目に表示されますビデオのメニューバーにはアクティブなストリームを持つすべてのアプリが表示され任意のアプリに関連付けられたストリームのライブプレビューが表示されますこのメニューバーからストリーム全体の画面共有ピッカーを表示してストリームのコンテンツを制御できるようになりますまたここでプレゼンターオーバーレイが有効になりコンテンツストリームにカメラフレームが埋め込まれますこれを使用して画面共有を置き換えたり終了したりするなどストリームを制御することもできますこのほかにもカメラやマイクのエフェクトをカスタマイズする便利な機能があります
ScreenCaptureKitとカメラを一緒に使う― アプリはすべて自動的にこれらの機能が使えるようになります現在ストリームには ScreenCaptureKitからそのプロセスに送られるコンテンツフレームがあります現在アクティブなストリーム中にアプリがカメラの使用を開始するとビデオメニュー項目で Presenter Overlayが使用可能になります有効にすると ScreenCaptureKitがカメラを取り込みアプリが実行中の選択したストリームにレンダリングを適用します合成されたフレームはアクティブなストリームから自動的に取得されますプレゼンターオーバーレイが適用されたことを明示的に知りたい場合は？
まず新しいストリームを作成しデリゲートとしてselfを追加しますそして SCStreamの新しいデリゲートコールバック― outputEffectDidStartを実装しますこれがプレゼンターオーバーレイが適用されたことを通知する方法です通知されたらエフェクトが開始または停止されたかを確認しますプレゼンターオーバーレイは macOSシステムの新機能でありオーバーレイが適用される際にアプリが考慮すべき点がいくつかあります
プレゼンターオーバーレイがオンの場合 AVCaptureSessionは通常のライブカメラストリームを送信しませんこれはオーバーレイでカメラが直接使用されるためですこの変更を考慮しアプリのUIを更新する絶好の機会です例えばビデオ会議アプリでは共有コンテンツがカメラと混在することを考慮して音声と映像の同期を調整するとよいでしょうプレゼンターのカメラタイルを非表示にして外観をより最適化することもできますプレゼンターオーバーレイはカメラとビデオ機能なのでアプリは高いフレームレートに最適化する必要があります
プレゼンターオーバーレイに加えて新しいシステム全体の画面共有ピッカーを利用することもできアプリは共有したいコンテンツを選択する方法を中心とした― 複数の機能と完全に統合することができますこれらはストリームを作成するために使用する一般的な構造です現在では SSharableContentを呼び出して共有可能なすべての画面コンテンツを取得しますこれを使用して SCContentFilterを作成します SCContentFilterはキャプチャの内容を決定するために使用します現在のところ SCCSharable Contentから作成しますが今年の新機能としてピッカーからコンテンツフィルタを取得できるようになりますピッカーがSCContentFiltersを生成する方法は2つあります 1つ目はシステムのピッカーを使ってコンテンツを共有する方法です 2つ目は開いているウインドウからコンテンツを選択する方法ですどちらの場合もシステムは SCContentFilterをアプリと共有しますしかしどうやって新しいコンテンツフィルタをアプリに取り込むのでしょうか新しいAPIである SCContentSharingPickerを使います SCContentSharingPickerはアプリとOS間のインターフェイスとして機能し新しいストリーム要求およびコンテンツフィルタそして現在のストリームとコンテンツフィルタの更新を伴うデリゲートコールバックを提供します SCContentSharingPickerはウインドウアプリあるいはディスプレイに基づいたコンテンツの選択が可能なシステムレベルのコンテンツピッカーを内蔵しますアプリのボタン新しいビデオのメニューバーまたはウインドウから直接コンテンツの選択を開始してもアプリは SCContentSharingPickerを利用して進行中のストリームのアクティブな選択を追加削除または置き換えることができますまた SCContentSharingPickerには新しいストリームがリクエストされた際にアプリが通知を受けるための組み込みのストリームリクエストコールバックもあります最後に各ストリームにシステムのエクスペリエンスが適用される方法を定義できるストリームごとのカスタマイズ機能も備えています SCStreamのフィルタを取得するためのコンストラクトは SCSharableContentを使用することから SCContentSharingPicker― シングルトンを使用して SCContentFilterを返す― システムピッカーインターフェイスを使用することになりましたアプリがこの新しい画面共有ピッカーを利用するのがいかに簡単かをお見せしましょう SCContentSharingPickerの共有インスタンスから始めて selfをオブザーバーとして追加し適切なクラスのコールバックをすべて取得できるようにしますシステムに私のピッカーインスタンスを認識させるためアクティブに設定しますアクティブにするとシステムはあなたのピッカーを認識しあなたのアプリはシステムUIに含まれ人々がピッカーとやりとりできるようになりますピッカーからウインドウを選択するストリームを作りたいのでシングルトンメソッド picker.presentを呼び出し nilと提示したいピッカースタイルを渡します UIボタンを押すとピッカーが表示されキャプチャしたいウインドウを選択できるようになりますコンテンツが選択されると observerコールバックを通して新しいフィルタが通知されますこのフィルタを使用して新しいストリームを作成するか既存のストリームを更新することができます残りのオブザーバーコールバックも同様に重要ですピッカーを再度セットアップしアクティブにして提示しますまたピッカーの提示を要求したときに失敗したかどうかを知りたいでしょう失敗した場合はアプリに通知を投稿して人々に知らせましょうまたピッカーが提示されたがキャンセルされたつまりコンテンツがピックされなかった場合はそれに応じてストリームの状態を設定します
SCContentSharingPickerにはストリーム単位でシステムの動作をカスタマイズできるメソッドも用意されています SCContentSharingPickerConfiguration では複数のカスタマイズが可能です AllowedPickingModesはウインドウアプリおよびコンテンツフィルタ表示選択間で許可されるピッキングモードをシステムに伝えますまた excludedWindowIDs と bundleIDsを明示的に宣言しシステムエクスペリエンスでのピックを許可しないこともできます変更されたくないストリームがある場合 SCContentSharingPickerConfiguration に機能を強制できるプロパティがありますまず共有ピッカーのインスタンスを取得します selfをオブザーバとして追加しピッカーをアクティブに設定します次に適切なコンフィギュレーション設定を行いますこのストリームではおそらく2つの特定のアプリの選択を除外し再ピッキングを許可したくないでしょう設定がセットアップされたらピッカーで set configurationを呼び出し設定とアプリストリームを渡します
ピッカーは指定されたストリームに対してどのように動作するか正確にわかりますまたアプリのニーズに合わせてストリームごとに異なるピッカー設定も可能です
全ScreenCaptureKitストリームが macOSエクスペリエンスに統合されどのアプリでもプレゼンターオーバーレイなどの新機能を利用できるようになったのですそして新しいシステムピッカーUIにアプリを統合する― 新しいAPI SCContentSharing Pickerを紹介しましたしかしあなたのアプリにおける画面キャプチャはライブストリームに限らず様々な用途がありますそこで新しいスクリーンショットAPIについて詳しく説明するために同僚のNatalieに引き継ぎます Natalie: ありがとう Christopher 今年ScreenCaptureKitに新しいAPIが追加され画面から静止画を簡単に取り出せるようになりました新しいスクリーンショットAPIは ScreenCaptureKitのストリーミングの利点をスクリーンショットにもたらしますアプリやウインドウによる高度なフィルタリング複数のピクセル形式や色空間カーソルの可視性などのオプション機能が利用できますこれで使い慣れたScreenCaptureKitの構造体を使用して必要な画面コンテンツの画像を効率的に取得できるようになります
新しいAPIは非同期です出力画像にはCMSampleBuffer またはCGImageフォーマットを選択できます CMSampleBufferオプションには利用可能なピクセルフォーマットが追加されており特定のフォーマットに関心がある場合に便利ですコードですでにCGImageを使用している場合はこのフォーマットを使用すると簡単に統合できますどちらのフォーマットでもスクリーンショットは ScreenCaptureKitストリーミングとほとんど同じ設定オプションを使用し同様のセットアップフローに従います CGWindowListCreateImageを使用している場合 ScreenCaptureKit への移行を簡単にするものがいくつかあります CGWindowList API で使用できるすべてのウインドウ画像オプションは ScreenCaptureKitの SCStreamConfigurationクラスの中にあります特定のウインドウID以上のすべてのウインドウを取得するようなウインドウリストのオプションは SCShareableContent 内で提供されますまた CGImage出力の扱いに慣れている場合新しいスクリーンショットAPI は既存のコードに簡単に統合できるCGImage 出力フォーマットを提供しますスクリーンショットの撮影は ScreenCaptureKitストリーミングと同様のフローをたどりますが SCStreamを作成する代わりにスクリーンショットAPI を呼び出します始めにストリームの作成と同様に SCShareableContent を使用して必要なコンテンツを取得し SCContentFilterを作成します SCStreamConfigurationに対しスクリーンショットに必要なすべてのオプションを設定することを忘れないでくださいコンテンツフィルタとストリームコンフィギュレーションができたらスクリーンショットAPIを呼び出して渡しますこのAPI は SCScreenshotManager クラスのクラスメソッドなのでスクリーンショットを撮るために SCScreenshotManagerオブジェクトを作成する必要はありませんスクリーンショット画像の準備ができたら選択したフォーマットで非同期に返されますまた新しいシステムピッカーを使ってコンテンツフィルタを作成しそれを使ってスクリーンショットAPIを呼び出すこともできますこれは直感的な方法で欲しいコンテンツを選ぶことを可能にする素晴らしい方法となるでしょうスクリーンショットを撮るとき APIには2つのバージョンがあり必要なものによって選ぶことができます 1つはCMSampleBuffer出力タイプ用もう1つはCGImage出力タイプ用ですそれ以外では 2つは同じように動作し非同期にスクリーンショットを返します以下にスクリーンショットAPIの使用方法のコード例を示しますまず SCContentFilter とSCStream Configurationをセットアップします準備ができたらスクリーンショットAPIを呼び出して APIが返すのを待てばスクリーンショットが得られますこれがScreenCaptureKitの新機能のすべてです要約すると SCContentFilterを作成するための新しいAPIがありシステムレベルのUIを使用してアプリと完全に統合された画面共有エクスペリエンスを作成します新しいプレゼンターオーバーレイ動画エフェクトはよりダイナミックな画面共有体験を提供し新しいスクリーンショットAPIは ScreenCaptureKitの力で 1 回限りの画面キャプチャを取得できます ScreenCaptureKitの詳細は昨年のセッション「Meet ScreenCaptureKit」と「Take ScreenCaptureKit to the next level」をご覧ください
ご視聴ありがとうございました

// Set up delegate for stream
let stream = SCStream(filter: filter, configuration: config, delegate: self)

// delegate method for Presenter Overlay applied
func stream(_ stream: SCStream, outputEffectDidStart didStart: bool) {
    // if Presenter Overlay is on, present banner in app to notify
    if didStart == true {
        presentBanner()
        turnOffCamera()
    } else {
        turnOnCamera()
    }
}

6:48 - Set up content sharing picker instance

// Set up content sharing picker instance
    let picker = SCContentSharingPicker.shared()
    picker.addObserver(self)
    picker.active = true
    
    // show system level picker button
    func showSystemPicker(sender: UIButton!) {
        picker.present(for stream: nil, using contentStyle:.window)
    }
    
    // observer call back for picker
    func contentSharingPicker(_ picker: SCContentSharingPicker, didUpdateWith filter:                                          
    SCContentFilter, for stream: SCStream?) {
       if let stream = stream {
            stream.updateContentFilter(filter)
        } else {
            let stream = SCStream(filter: filter, configuration: config, delegate: self)
        }
    }

7:41 - Observer call back for picker did fail and did cancel

// Set up content sharing picker instance
    let picker = SCContentSharingPicker.shared()
    picker.addObserver(self)
    picker.active = true

    // show system level picker button
    func showSystemPicker(sender: UIButton!) {
        picker.present(for stream: nil, using contentStyle:.window)
    }

    // observer call back for picker did fail
    func contentSharingPicker(contentSharingPickerStartDidFailWith error:NSError) {
        if error {
            presentNotifications(error: error)
        }
    }

    // observer call back for picker did cancel
    func contentSharingPicker(_ picker: SCContentSharingPicker, didCancel for stream: SCStream?) {
       if stream {
           resetStateForStream(stream: stream)
       }
    }

8:41 - Per-stream configuration

// Set up content sharing picker instance
    let picker = SCContentSharingPicker.shared()
    picker.addObserver(self)
    picker.active = true
    
    // Create configurations
    let pickerConfig = SCContentSharingPickerConfiguration()
    
    // Set Picker configuration
    pickerConfig.excludedBundleIDs = [“com.foo.myApp”,”com.foo.myApp2”]
    pickerConfig.allowsRepicking = true
    
    // Create configurations
    picker.setConfiguration(pickerConfig, for: stream)

    func showSystemPicker(sender: UIButton!) {
        picker.present(for stream: nil, using contentStyle:.window)
    }

12:26 - Call the screenshot API

// Call the screenshot API

class SCScreenshotManager : NSObject {

class func captureSampleBuffer(contentFilter: SCContentFilter, 
                               configuration: SCStreamConfiguration)
  															async throws -> CMSampleBuffer

class func captureImage(contentFilter: SCContentFilter,
                        configuration: SCStreamConfiguration)
  											async throws -> GImage
}

12:44 - Take a screenshot with ScreenCaptureKit

// Don't forget to customize the content you want in your screenshot
// Use SCShareableContent or SCContentSharingPicker to pick your content
let display = nil;

// Create your SCContentFilter and SCStreamConfiguration
// Customize these lines to use the content you want and desired config options
let myContentFilter = SCContentFilter(display: display,
                             excludingApplications: [],
                             exceptingWindows: []);
let myConfiguration = SCStreamConfiguration();

// Call the screenshot API and get your screenshot image
if let screenshot = try? await SCScreenshotManager.captureSampleBuffer(contentFilter: myContentFilter, configuration:
                                                       myConfiguration) {
    print("Fetched screenshot.")
} else {
    print("Failed to fetch screenshot.")
}

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

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

関連する章

リソース

関連ビデオ

WWDC23

WWDC22