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

François Beaufort
François Beaufort
GitHub
Elad Alon

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: not supported.
  • Safari: not supported.

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

メリットをいくつか例で示します。

例 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 コードを埋め込んだりすることで、現在でも可能です。Capture Handle は、よりシンプルで信頼性が高く、安全なメカニズムを提供します。また、キャプチャされたウェブアプリで、オーディエンス（オリジンを選択するか、ウェブ全体を選択するか）を選択することもできます。

navigator.mediaDevices.setCaptureHandleConfig() は、安全なブラウジング コンテキスト（HTTPS のみ）の最上位のメインフレームでのみ使用できます。

サンプル

サンプルを実行して、キャプチャ ハンドルを試すことができます。

デモ

一部のデモは次の場所で入手できます。

特徴検出

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

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

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

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

次のステップ

ウェブでの画面共有を改善するために、近いうちに導入される予定の機能をご紹介します。

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

フィードバック

Chrome チームとウェブ標準コミュニティは、キャプチャ ハンドルに関する皆様のご意見をお待ちしています。

デザインについて教えてください

キャプチャ ハンドルについて、想定どおりに動作しない点はありますか？アイデアを実装するために必要なメソッドやプロパティが不足している場合はどうすればよいですか？セキュリティ モデルについて質問やコメントがある場合

  • GitHub リポジトリで仕様に関する問題を提出するか、既存の問題に意見を追加します。

実装に関する問題ですか？

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

  • https://new.crbug.com でバグを報告します。できるだけ詳細な情報と、再現するための簡単な手順を記載してください。

サポートを表示

キャプチャ ハンドルを使用する予定はありますか？皆様からの公開サポートは、Chrome チームが機能の優先順位を決定するうえで役立ち、他のブラウザ ベンダーにサポートの重要性を示すことにもつながります。

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

謝辞

この記事のレビューにご協力いただいた Joe Medley に感謝いたします。