キャプチャコントロールによるカメラ体験の向上

カメラ体験でのキャプチャコントロールをカスタマイズする方法を学びましょう。新しいAirPodsサポートなど、物理的なキャプチャコントロールを使って写真を撮影する方法や、カメラコントロールで設定を調整する方法を紹介します。

リソース

関連ビデオ

WWDC24

ロック画面での優れたカメラキャプチャ体験の構築

WWDC23

こんにちは Vitaliyです AVKitチームでエンジニアをしています「Enhancing your camera experience with capture controls」にようこそこのセッションではアプリにおけるユーザー操作を改善する新しいパワフルな方法をご紹介しますキャプチャコントロールではプログラムで物理ボタンのジェスチャをカメラアクションにマッピングしてネイティブのiOSカメラアプリで使い慣れた操作感をユーザーに提供します iOS 26で導入された驚くべき新機能もご紹介します皆さんもきっと気に入ると思います

キャプチャコントロールの威力が皆さんにも伝わりやすいよう iOSでカメラアプリを使ってみます画面上のUIボタンを使って撮影するかわりに物理ボタンを使ってみます

音量を上げるボタンをクリックするだけでキャプチャを開始できます

このAPIで使えるのはクリックだけではありません長押しにも対応していますたとえばカメラモードでは音量下げボタンを長押しするとビデオ録画が始まります

キャプチャコントロールによってユーザーはもっと柔軟にカメラを使用できるようになり忘れられない瞬間を iPhoneで捉えられます

このセッションではまず物理的なキャプチャとは何かそしてサポートされている物理ボタンを紹介します次にアプリ内で APIを効果的に使ってユーザー操作を処理する方法やデモでお見せしたように堅牢で応答性の高いカメラインターフェイスの構築方法を紹介します

また iOS 26のエキサイティングな新機能 AirPodsでのリモートコントロールもお見せします

最後に同僚のNickさんから iPhone 16のカメラコントロールの概要を紹介します

APIの主要な機能を紹介する前に iOSで優れたカメラ体験を生み出すための主要なフレームワークを確認しましょうカメラアプリの軸となるアーキテクチャは AVFoundationで APIを介して下位レベルのキャプチャ機能を提供しますたとえば写真ならAVCapturePhotoOutput ビデオなら AVCaptureMovieFileOutputです

UIレイヤとAVFoundationを集約するためこれらのフレームワークの上位に AVKitがあります

AVKitに含まれるキャプチャ固有のAPIに AVCaptureEventInteractionがあります

ここで AVCaptureEventInteractionの主な特長と機能を紹介しましょうこのAPIを使用すると音量上げや音量下げなどの物理ボタンや iPhone 16で導入されたカメラコントロールのデフォルトの動作をオーバーライドできます

AVCaptureEventInteractionがサポートするもう1つのボタンがアクションボタンですアクションボタンをキャプチャ用に設定する方法については昨年のセッションをご覧ください

物理ボタンを押すたびにキャプチャイベント通知がトリガされますこの通知にはイベントのフェーズが含まれておりボタン操作のライフサイクル全体を正確に制御できますフェーズは3つあります「began」はボタンが押された瞬間ですアプリのカメラオブジェクト準備には最適のフェーズです

「cancelled」はアプリがバックグラウンドに切り替わる瞬間またはキャプチャが利用できない瞬間です

「ended」はボタンから指を離した瞬間ですカメラオブジェクトがキャプチャを開始するべきフェーズです

AVCaptureEventInteractionにもボタンの押下をプライマリアクションとセカンダリアクションで区別する機能がありますボタンを押すとキャプチャ通知がトリガされ指定したハンドラにのみ送信されます

プライマリアクションは音量下げボタン、アクションボタンカメラコントロールでトリガされセカンダリアクションは音量上げボタンでトリガされます同じボタンで2つのハンドラのトリガはできませんそれぞれ異なるアクションを表すよう設計されているためですセカンダリハンドラは省略可能で指定がない場合は音量上げるボタンのクリックでプライマリアクションをトリガしますこのような設計にすることでアプリにモジュール性が加わりユーザーにとって優れたカメラ体験をデザインする際の柔軟性が高まりますこのAPIはキャプチャのユースケースを対象としたものですシステムはカメラ使用中のアプリにだけキャプチャイベントを送信しますこのAPIの採用によりデフォルトの物理ボタンの動作が上書きされるためアプリは常に受信したイベントに適切に応答する必要がありますイベントの処理に失敗した場合ボタンが機能せずユーザー体験が貧弱なものとなってしまいます

バックグラウンド化されたキャプチャアプリや実行中の AVCaptureSessionがないアプリはイベントを受信しませんボタンを押すと音量の調整やカメラの起動などデフォルトのシステムアクションがトリガされます

AVCaptureEventInteractionは UIKit専用に設計されたAPIですが SwiftUIデベロッパも onCameraCaptureEvent ビューモディファイアを介してこの機能にアクセスできますどちらかを採用すれば同じ動作を実行できます

AVCaptureEventInteractionについて理解したところで簡単なカメラアプリを作成しましょう SwiftUIのonCameraCaptureEvent ビューモディファイアを使用して物理ボタンで写真をキャプチャできるようにしますまずカメラアプリのユーザーインターフェイスを作成しますカメラ出力を画面に表示させるための CameraViewを含めます

次にビューにボタンを追加して写真をキャプチャできるようにしますこのボタンを CameraModelに接続してタップすると写真のキャプチャをトリガするようにします

これで画面上のボタンを押すと写真を撮影する機能ビューができましたただ物理ボタンを押すとシステムアクションがトリガされますそこでこのセッションで紹介した APIを使ってハードウェアボタン操作をカメラ専用にしますまず AVKitフレームワークをインポートします次に onCameraCaptureEvent ビューモディファイアを CameraViewにアタッチしてイベントフェーズ終了時に写真を撮るようにします

とても簡単ですねわずか6行のコードを追加するだけで写真キャプチャでも内蔵カメラアプリと同様に直感的な物理ボタン操作ができるようになりましたこれこそが Capture Controls APIのパワーの見せ所です今年そのAVCaptureEventInteractionが AirPodのステム特に H2チップを搭載したAirPodsステムのクリックによりトリガされたプライマリアクションもサポートすることを発表できとても嬉しく思いますこれで忘れられない瞬間をスマートフォンを操作することなくリモートでキャプチャできるようになります

すでにAPIをご採用いただいている皆さんは iOS 26ではこの機能を無料でご利用いただけます

この新機能の動作を実際に確認してみましょうまず右のAirPodを入れて左側も入れます

装着完了！

AirPodsをキャプチャ用に構成するには設定を表示して

下にスクロールし「リモートカメラキャプチャ」セクションを表示します

キャプチャのトリガに使用する操作をここで選択できます「1回押す」オプションを選択します

ここでカメラアプリに戻ります

ちょっと後ろに下がって片方のステムをクリックして写真を撮ります

これでデバイス操作なしでもカメラを制御できるようになりました

リモートカメラ制御に AirPodsを使用するのでオーディオフィードバックが不可欠ですキャプチャ中は画面を見ていない可能性がありますがコマンドが認識されたか確認が必要になるからです

そこで AirPodのステムのクリック専用にサウンド再生を制御する新しいAPIを導入しました AirPodのクリック以外によってキャプチャイベントがトリガされた場合 AVCaptureEventInteractionオブジェクトはサウンドフィードバック制御を許可しません

新機能AVCaptureEventInteractionをユーザー側の追加作業なしで使えるようにするため AirPodsのクリック専用にデフォルトのトーンを追加しました

ユースケースによってはこのサウンドが適さない場合もあるでしょうそのためアプリのバンドルで独自のサウンドを提供してサウンド再生をカスタマイズできるようにしました

このあたりでカメラアプリの .onCameraCaptureEvent ビューモディファイアに戻りましょう iOS 26ではこのコードを変更しないでおくと AirPodステムをクリックしたときデフォルトのサウンドが聞こえます写真撮影に特化したアプリを構築していることもありデフォルトのサウンドではアプリに適さない可能性もあります

特定のシナリオに合わせてキャプチャサウンドを調整するにはまず defaultSoundDisabledパラメータでデフォルトのサウンドを無効にします

音声フィードバックが必要な場合はイベントオブジェクトのplaySoundメソッドで cameraShutterサウンドを再生します shouldPlaySoundプロパティは AirPodのステムをクリックしてキャプチャアクションをトリガした場合だけ trueになる点に注意してください

ここまでの話をまとめると AVCaptureEventInteraction APIはアプリのために高品質のカメラ体験を構築するプロセスを大幅に簡略化します APIの主な特徴と実装に関するベストプラクティスを確認しました今年のアップデート内容である AirPodステムのクリックでカメラキャプチャを制御する方法も確認しました Nickさんにバトンタッチして AVCaptureControlsの話に移りましょうこんにちは Nick Lupinettiです Camera Experienceチームのソフトウェアエンジニアです AVCaptureControlについてご紹介できることを嬉しく思いますこれは iPhone16のカメラコントロールをアプリのカメラインターフェイス用に物理的なハードウェアに切り替えるためのパワフルな手段ですカメラコントロールは汎用性の高いキャプチャツールでクリックでカメラアプリを起動しシャッターボタンとして機能し指の置き場所を変えることなく調整まで迅速に行うことができます

これら3つの機能を起動から順番に見ていきましょうアプリ起動のためデバイスのロック中でもカメラコントロールでアクセスできることが必要になりますつまりロック画面キャプチャ機能拡張を作成することになります詳しくはロック画面でのカメラ体験に関する昨年のセッションをご覧ください

次のカメラコントロールをアプリのシャッターボタンとして使う方法は簡単です先ほどVitaliyさんがお見せしたようにキャプチャイベントAPIの1つを設定するだけですカメラコントロールはプライマリイベントコールバックを実行します音量ボタンの場合と同じですここからはお楽しみのカメラ設定の調整に関するパートですカメラコントロールは従来のカメラシャッターのような軽く押すジェスチャをサポートしており作業に集中しやすいクリーンプレビューをアクティブにしてコントロールのスライドで調整可能な設定を表示しますその他の設定は 2回軽く押した後カメラコントロールをスライドさせてもう1回軽く押すと選択できます

最上位レベルには 2種類のコントロールがあります数値指定用のスライダとリスト項目選択用のピッカーです

スライダには2つのタイプがあります連続型と不連続型です

連続型スライダは指定した範囲内で任意の数値を選択できますたとえば iOSはデフォルトで拡大／縮小の連続スライダを装備しています推奨最小サイズからデバイスの最大サイズまで倍率の全域をサポートします不連続型スライダの場合も数値を選択しますが選択にはデベロッパが設定した明示的なセットまたはある値から別の値への固定ステップを使用します iOSには露出バイアス用に不連続型スライダが組み込まれています +2から-2の間で3分の1刻みで従来使われてきた管理しやすい単位を採用しています

ピッカーも不連続型スライダと同様に有限の選択肢から選択しますがインデックスが付いていますインデックスにはコントロールの状態に名前付きでマップされていますたとえばフラッシュの「オン」と「オフ」やカメラアプリのフォトグラフスタイルの名前などですさて各種コントロールについて理解できたところでこれらを実装するクラスを見てみましょうコントロールはAVFoundation フレームワークで定義されます AVCaptureControlは継承元となる抽象基底クラスです

システム定義のサブクラスは 2つありこれらによってズームや露出バイアスなどどのアプリでも内蔵カメラと同じ動作を採用できますスライダには連続型と不連続型という 2つの標準サブクラスがありピッカーについては自分で動作を定義できますアプリにコントロールを採用するには AVCaptureSessionに追加します通常セッション構成の最初のステップではキャプチャデバイスを作成して入力としてラップされたセッションに追加します次にシステム定義コントロールが作成され同じデバイスを参照することでプロパティの実行を代行しますアプリ定義の動作を割り当てたコントロールもこのとき作成され最後にコントロールがセッションに追加されます

ユーザーからのカメラコントロール操作にアプリが応答できるよう考慮するべきフローがいくつかありますシステムが提供するコントロールはカメラコントロールからの値を構成済みデバイスに直接適用します videoZoomFactorやexposureTargetBiasを自分で設定する必要はありません

ただしモデルやUIの更新が必要になる場合があります Key-Value Observing（KVO）をすでに使用している場合は関連するプロパティの変更状況を把握するため引き続きこのメカニズムを使用してインターフェイスを更新できます

KVOを使用していない場合はアクションハンドラを使用してシステムコントロールを作成します値が変更されるとメインスレッドでこれを呼び出して UIを直接更新できるようになります

アプリ定義のコントロールは常にアクションコールバックを使用して作成され指定したキューで実行されますコントロールでのキャプチャ設定が必要な場合はステータスの管理ポイントでキューを指定することにより同期的に実行できますこれでメインキューのUIを更新できます

さて Vitaliyさんと作ったカメラコントロールをアプリに組み込む準備ができましたキャプチャ操作は追加してもらったのでコントロールはすでに撮影用のシャッターボタンとして機能していますコードの追加はしていません

カメラコントロールによるズームインやズームアウトもサポートしたいですねこれも追加しましょう

ここでキャプチャセッションを構成してデバイスを使用しますまずコントロールのサポート状況を確認します iPhone 16のようにカメラコントロールを備えたデバイス以外では利用できないからです

システム提供のコントロールはわずか1行のコードで簡単に作成できます

コントロールを追加する前にセッションで受け入れ可能か確認しましょうたとえばシステムがデバイス用に提供するズームコントロールは追加できませんすでにズームコントロールに関連付けられているからです最後にコントロールをセッションに追加します

これでカメラコントロールによるズームをうまく機能させる準備は完了ですひとつ問題がありますピンチジェスチャでのズームインもサポートしていますがカメラコントロールでズームインした後 UIが最新ではないためピンチジェスチャが古い倍率に戻ってしまいますですが修正は簡単です倍率を引数として受け取るアクションクロージャを使用してスライダを作成するだけです新しい値はデリゲートコールバックや ObservableModelプロパティを使用して UIに適用されます

ピンチジェスチャの背後にあるモデルが同期すればカメラコントロールでズームできるようになりピンチも常に正しい倍率から始められます

次にデフォルトでは使用できないコントロールを追加しますですが自前で作成する前に優れたコントロールとは何かを考えてみましょうカメラコントロールとはその名の通り iPhoneカメラで使用することを想定しているので外観やキャプチャ体験にも影響してくるはずですそのためコントロールが無関係な領域に影響を与えてしまうと混乱を招きますカメラコントロールを採用するためだけにキャプチャセッションを導入しないようにカメラの動作には電力やプライバシーの要件が関連するためキャプチャ体験だけにとどめておくのがベストですカスタムコントロールの良い例がピッカーですアプリがサポートするエフェクトやフィルタの反復処理に利用できます

このようなコントロールは通常 UIに比べキャプチャ寄りで操作する必要がありますどのようになるか見てみましょう先ほど書いたコードから始めてズームコントロールを加えますコントロールの数はセッションの maxControlsCountプロパティで報告され追加できる数には制限がある点に注意してください制限数に達すると canAddControlがfalseを返しますではエフェクトを定義しますエフェクトはビデオサンプルバッファを使用して専用のキューにレンダリングされますが私たちのアプリは iOS 17で導入されたリアクションエフェクトを使用します使用可能な順序なしのセットをもとにエフェクトとその名前をまとめた順番付きリストを作成しましたピッカーはオプションの反復処理時に表示するエフェクト名で初期化されますズームコントロールと区別するためピッカーには固有の名前と SF Symbol画像が必要ですコントロールがサポートされていない場合は除外するのではなく無効にすることをお勧めしますそうすれば操作はできなくても引き続き表示されますこうしておかないと別のコントロールがフォールバックとして選択されユーザーを当惑させてしまう可能性があります

ピッカーで選択されたインデックスをユーザーが変更するとこれに対応するよう反応しますアクションのターゲットにセッションキューを指定しますデバイス管理における隔離コンテキストにしているためですあとはコントロールの配列にピッカーを追加するだけですさっそく結果を確認しましょう

カメラコントロールを操作するとこの新しい構成ではズームが無効になっていますコントロールを変更しましょうオーバーレイをスワイプすればリストでピッカーをチェックアウトできますスクロールして軽く押すとオプションが表示されますエフェクトを順番に選択してプレビューで再生して確認できます

Rock on！

Vitaliyさんと私とでここまでご紹介してきたように世界最高クラスのカメラアプリを構築する素晴らしいツールは豊富にあります

iOSデバイスの物理ボタンでメディアをキャプチャする方法と iOS 26で AirPodsの操作によりこれを簡単に実行できることも紹介しましたカメラコントロールを便利なツールとして活用してアプリのキャプチャ操作をパワーアップする方法もお伝えしました developer.apple.com/jpにはさらに素晴らしいリソースが揃っていますカメラコントロール用のヒューマンインターフェイスガイドラインや新機能のテスト向けに AirPodsを設定する方法のガイダンスそして記事とサンプルコードでカメラコントロールを取り入れる方法の詳細を確認していだけます皆さんの手によってユーザーの注目の的になるカメラが誕生するのを楽しみにしていますご視聴ありがとうございました

5:35 - Initial PhotoCapture view setup

import SwiftUI

struct PhotoCapture: View {
    var body: some View {
        VStack {
            CameraView()
        }
    }
}

5:37 - Connecting a button to the camera model

import SwiftUI

struct PhotoCapture: View {
    let camera = CameraModel()
    var body: some View {
        VStack {
            CameraView()
            Button(action: camera.capturePhoto) {
                Text("Take a photo")
            }
        }
    }
}

6:10 - Importing AVKit

import AVKit
import SwiftUI

struct PhotoCapture: View {
    let camera = CameraModel()
    var body: some View {
        VStack {
            CameraView()
            Button(action: camera.capturePhoto) {
                Text("Take a photo")
            }
        }
    }
}

6:14 - Setting up onCameraCaptureEvent view modifier

import AVKit
import SwiftUI

struct PhotoCapture: View {
    let camera = CameraModel()
    var body: some View {
        VStack {
            CameraView()
            .onCameraCaptureEvent { event in
                if event.phase == .ended {
                   camera.capturePhoto()
                }
            }
            Button(action: camera.capturePhoto) {
                Text("Take a photo")
            }
        }
    }
}

8:53 - Default sound for onCameraCaptureEvent view modifier

.onCameraCaptureEvent { event
	if event.phase == .ended {
   	camera.capturePhoto() 
  }
}

9:13 - Play photo shutter sound on AirPod stem click

.onCameraCaptureEvent(defaultSoundDisabled: true) { event in
    if event.phase == .ended {a
        if event.shouldPlaySound {d
            event.play(.cameraShutter)
        }
    }
    camera.capturePhoto()
 }

14:46 - Add a build-in zoom slider to Camera Control

captureSession.beginConfiguration()

// configure device inputs and outputs

if captureSession.supportsControls {
    let zoomControl = AVCaptureSystemZoomSlider(device: device)

    if captureSession.canAddControl(zoomControl) {
        captureSession.addControl(zoomControl)
    }
}

captureSession.commitConfiguration()

15:40 - Modifying the built-in zoom slider to receive updates when zoom changes

let zoomControl = AVCaptureSystemZoomSlider(device: device) { [weak self] zoomFactor in
    self?.updateUI(zoomFactor: zoomFactor)
}

16:46 - Adding a custom reaction-effects picker alongside zoom slider

let reactions = device.availableReactionTypes.sorted { $0.rawValue < $1.rawValue }
let titles = reactions.map { localizedTitle(reaction: $0) }
let picker = AVCaptureIndexPicker(“Reactions", symbolName: “face.smiling.inverted”,
    localizedIndexTitles: titles)

picker.isEnabled = device.canPerformReactionEffects
picker.setActionQueue(sessionQueue) { index in
    device.performEffect(for: reactions[index])
}

let controls: [AVCaptureControl] = [zoomControl, picker]

for control in controls {
    if captureSession.canAddControl(control) {
        captureSession.addControl(control)
    }
}

キャプチャコントロールによるカメラ体験の向上

関連する章

リソース

関連ビデオ

WWDC24

WWDC23