対応ブラウザ
- 102
- 102
- x
- x
このウェブ プラットフォームには、ウェブアプリのキャプチャとキャプチャのコラボレーションを支援するメカニズムであるキャプチャ ハンドルが付属しています。キャプチャ ハンドルを使用すると、キャプチャ ウェブアプリを人間工学的に信頼性の高い方法で識別できます(キャプチャされたウェブアプリがオプトインされている場合)。
いくつかの例でそのメリットを説明します。
例 1: ビデオ会議ウェブアプリでプレゼンテーション ウェブアプリのキャプチャを行っている場合、スライド間を移動するためのコントロールをユーザーに表示できます。コントロールはビデオ会議ウェブアプリに直接埋め込まれるため、ユーザーはビデオ会議タブと共有画面タブを何度も切り替える必要がなくなります。この負担が軽減され、ユーザーはプレゼンテーションの提供により集中できるようになりました。
例 2: 「鏡の間」効果は、キャプチャした表面をレンダリングして撮影位置に戻したときに発生します。特に、ビデオ会議が行われているタブをユーザーがキャプチャし、ビデオ会議ウェブアプリがローカル プレビューをレンダリングする場合、この影響が顕著になります。キャプチャ ハンドルを使用すると、たとえばウェブアプリがローカル プレビューを抑制するなどして、セルフ キャプチャを検出して軽減できます。
ハンドルのキャプチャについて
キャプチャ ハンドルは、次の 2 つの補完的な部分で構成されています。
- キャプチャされたウェブアプリでは、
navigator.mediaDevices.setCaptureHandleConfig()
を使用して、特定の情報を特定のオリジンに公開することを選択できます。 - キャプチャしたウェブアプリは、
MediaStreamTrack
オブジェクトのgetCaptureHandle()
を使用してその情報を読み取ることができます。
キャプチャ面
ウェブアプリは、キャプチャするウェブアプリに情報を提示できます。そのためには、以下のメンバーで構成されるオプションのオブジェクトを指定して navigator.mediaDevices.setCaptureHandleConfig()
を呼び出します。
handle
: 最大 1,024 文字の任意の文字列です。exposeOrigin
:true
の場合、キャプチャされたウェブアプリのオリジンがキャプチャ ウェブアプリに公開される可能性があります。permittedOrigins
: 有効な値は、(i)空の配列、(ii)単一の項目"*"
を含む配列、または(iii)オリジンの配列です。permittedOrigins
が単一のアイテム"*"
で構成されている場合、CaptureHandle
は、すべてのキャプチャするウェブアプリによって監視できます。それ以外の場合、監視できるのは、オリジンがpermittedOrigins
にあるウェブアプリのキャプチャのみです。
次の例は、ランダムに生成された UUID をハンドルとして、またオリジンをキャプチャするウェブアプリに公開する方法を示しています。
const config = {
handle: crypto.randomUUID(),
exposeOrigin: true,
permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);
なお、キャプチャしたウェブアプリは、キャプチャされているかどうかを認識できません。その場合を除き、キャプチャするウェブアプリは CaptureHandle
情報を使用してキャプチャしたウェブアプリと通信します(たとえば、ワーカーや共有クラウド インフラストラクチャを介したメッセージングを使用)。
キャプチャ側
キャプチャするウェブアプリは動画 MediaStreamTrack
を保持し、その MediaStreamTrack
で getCaptureHandle()
を呼び出すことでキャプチャ ハンドル情報を読み取ることができます。使用可能なキャプチャ ハンドルがない場合、またはキャプチャ ハンドルの読み取りがキャプチャ ウェブアプリに許可されていない場合、この呼び出しは null
を返します。キャプチャ ハンドルが使用可能で、キャプチャ ウェブアプリが permittedOrigins
に追加されている場合、この呼び出しは次のメンバーを含むオブジェクトを返します。
handle
: キャプチャされたウェブアプリがnavigator.mediaDevices.setCaptureHandleConfig()
を使用して設定した文字列値。origin
:exposeOrigin
がtrue
に設定されている場合、キャプチャされたウェブアプリの生成元。それ以外の場合は定義されません。
次の例は、動画トラックからキャプチャ ハンドル情報を読み取る方法を示しています。
// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();
// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
// Use captureHandle.origin and captureHandle.handle...
}
MediaStreamTrack
オブジェクトの "capturehandlechange"
イベントをリッスンして、CaptureHandle
の変更をモニタリングします。変更が発生するタイミング:
- キャプチャされたウェブアプリが
navigator.mediaDevices.setCaptureHandleConfig()
を呼び出します。 - キャプチャされたウェブアプリでは、ドキュメント間のナビゲーションが発生します。
videoTrack.addEventListener('capturehandlechange', event => {
captureHandle = event.target.getCaptureHandle();
// Consume new capture handle...
});
セキュリティとプライバシー
現在、キャプチャしたウェブアプリとキャプチャしたウェブアプリのコラボレーションは、キャプチャしたウェブアプリに「マジック ピクセル」を埋め込むか、動画ストリームに QR コードを埋め込むことで、理論的には可能です。キャプチャ ハンドルは、よりシンプルで信頼性が高く、安全なメカニズムです。また、キャプチャしたウェブアプリでオーディエンス(オリジンまたはウェブ全体)を選択することもできます。
navigator.mediaDevices.setCaptureHandleConfig()
は、安全なブラウジング コンテキストのトップレベル メインフレームでのみ使用できます(HTTPS のみ)。
サンプル
Glitch でサンプルを実行することで、Capture Handle を試してみることができます。必ずソースコードを確認してください。
デモ
一部のデモはこちらからご覧になれます。
機能検出
getCaptureHandle()
がサポートされているかどうかを確認するには、次のコマンドを使用します。
if ('getCaptureHandle' in MediaStreamTrack.prototype) {
// getCaptureHandle() is supported.
}
navigator.mediaDevices.setCaptureHandleConfig()
がサポートされているかどうかを確認するには、次のコマンドを使用します。
if ('setCaptureHandleConfig' in navigator.mediaDevices) {
// navigator.mediaDevices.setCaptureHandleConfig() is supported.
}
次のステップ
ウェブでの画面共有が今後予定されている機能の一部をご紹介します。
- Region Capture を使用すると、現在のタブのディスプレイ キャプチャから派生した動画トラックを切り抜くことができます。
- 条件付きフォーカスを使用すると、キャプチャ用ウェブアプリは、キャプチャされたディスプレイ サーフェスにフォーカスを切り替えるか、そのようなフォーカスの変更を回避するかをブラウザに指示できます。
フィードバック
Chrome チームとウェブ標準コミュニティでは、キャプチャ ハンドルの使用感について意見を募集しています。
デザインについて教えてください
キャプチャ ハンドルに関して、想定どおりに機能していないものはありますか?または、アイデアを実装するために必要なメソッドやプロパティが不足しているか。セキュリティ モデルについて質問や意見がある場合は、
- GitHub リポジトリで仕様に関する問題を報告するか、既存の問題にご意見をお寄せください。
実装に問題がある場合
Chrome の実装にバグは見つかりましたか?または、実装が仕様と異なっていますか?
- https://new.crbug.com でバグを報告します。できるだけ詳しい情報と、再現するための簡単な手順を記載してください。Glitch は、すばやく簡単に再現を共有するのに最適です。
サポートの気持ちを伝える
ハンドルのキャプチャを使用する予定はありますか?皆様の公開サポートは、Chrome チームが機能の優先度を判断したり、他のブラウザ ベンダーにそれらのサポートの重要性を把握したりするうえで役立ちます。
@ChromiumDev にツイートを送信して、どこでどのように使用しているかをお知らせください。
関連情報
謝辞
この記事をレビューしてくれた Joe Medley に感謝します。