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

François Beaufort
François Beaufort

対応ブラウザ

  • Chrome: 102。
  • Edge: 102。
  • Firefox: サポートされていません。
  • Safari: サポートされていません。

ウェブ プラットフォームに、キャプチャ ハンドルが搭載されました。これは、キャプチャ元とキャプチャ先のウェブアプリ間のコラボレーションを支援するメカニズムです。キャプチャ ハンドルを使用すると、キャプチャ元のウェブアプリが、キャプチャ元のウェブアプリを人間工学的に確実に識別できます(キャプチャ元のウェブアプリがオプトインしている場合)。

以下に、そのメリットを示す例を示します。

例 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 を保持し、その MediaStreamTrackgetCaptureHandle() を呼び出すことでキャプチャ ハンドル情報を読み取ることができます。キャプチャ ハンドルが使用できない場合、またはキャプチャ ウェブアプリがキャプチャ ハンドルの読み取りを許可されていない場合、この呼び出しは null を返します。キャプチャ ハンドルが使用可能で、キャプチャ ウェブアプリが permittedOrigins に追加されている場合、この呼び出しは次のメンバーを持つオブジェクトを返します。

  • handle: キャプチャされたウェブアプリが navigator.mediaDevices.setCaptureHandleConfig() で設定した文字列値。
  • origin: exposeOrigintrue に設定されている場合、キャプチャされたウェブアプリのオリジン。それ以外の場合は定義されません。

次の例は、動画トラックからキャプチャ ハンドル情報を読み取る方法を示しています。

// 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 でサンプルを実行します。ソースコードをチェックアウトしてください。

デモ

デモは次の場所で利用できます。

機能検出

getCaptureHandle() がサポートされているかどうかを確認するには、次のコマンドを使用します。

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

navigator.mediaDevices.setCaptureHandleConfig() がサポートされているかどうかを確認するには、次のコマンドを使用します。

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

次のステップ

ウェブでの画面共有を改善する、今後予定されている機能のプレビューは次のとおりです。

  • 領域キャプチャでは、現在のタブのディスプレイ キャプチャから取得した動画トラックを切り抜くことができます。
  • 条件付きフォーカスを使用すると、キャプチャ ウェブアプリは、キャプチャされたディスプレイ サーフェスにフォーカスを切り替えるか、そのようなフォーカス変更を回避するようブラウザに指示できます。

フィードバック

Chrome チームとウェブ標準コミュニティは、Capture Handle に関するご意見をお待ちしています。

デザインについて

キャプチャ ハンドルが想定どおりに動作しない点はありますか?または、アイデアを実装するために必要なメソッドやプロパティが不足している場合は、セキュリティ モデルに関するご質問やご意見がございましたら、

  • GitHub リポジトリで仕様に関する問題を報告するか、既存の問題にコメントを追加してください。

実装に関する問題

Chrome の実装にバグが見つかりましたか?それとも、実装が仕様と異なるのでしょうか?

  • https://new.crbug.com でバグを報告します。できるだけ詳細な情報を含め、再現手順を簡単に記載してください。Glitch は、簡単な再現手順をすばやく共有するのに適しています。

クリエイターを応援する

キャプチャ ハンドルを使用する予定ですか?皆様の公開サポートは、Chrome チームが機能の優先度を判断したり、他のブラウザ ベンダーにそれらのサポートがいかに重要であるかを示すのに役立ちます。

@ChromiumDev にツイートを送信して、どこでどのように使用しているかをお知らせください。

謝辞

この記事を確認していただいた Joe Medley に感謝いたします。