キャプチャ ハンドルによるタブ共有の改善

François Beaufort

Elad Alon

このウェブ プラットフォームには、ウェブアプリのキャプチャとキャプチャのコラボレーションを支援するメカニズムであるキャプチャ ハンドルが付属しています。キャプチャ ハンドルを使用すると、キャプチャ ウェブアプリを人間工学的に信頼性の高い方法で識別できます。（キャプチャしたウェブアプリがオプトインされている場合）。

いくつかの例でそのメリットを説明します。

例 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 にツイートを送信して、どこでどのように使用しているかをお知らせください。

関連情報

• の仕様
• 説明
• TAG の審査
• Chromium のバグ
• ChromeStatus.com のエントリ

謝辞

この記事をレビューしてくれた Joe Medley に感謝します。