このページは Cloud Translation API によって翻訳されました。

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

François Beaufort

GitHub

Ead Alon

GitHub

対応ブラウザ

ウェブプラットフォームには、キャプチャハンドルが付属しています。キャプチャハンドルは、キャプチャしたウェブアプリとキャプチャしたウェブアプリのコラボレーションを支援するメカニズムです。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 のみ）のトップレベルのメインフレームでのみ使用できます。

サンプル

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.
}

次のステップ

ウェブ版の画面共有機能の改善に関する今後の予定を以下にご紹介します。

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

フィードバック

Chrome チームとウェブ標準コミュニティでは、Capture Handle を使用した経験についてご意見をお待ちしています。

デザインについてお聞かせください

キャプチャハンドルについて、何かご不明な点はございませんか？あるいは、アイデアを実装するために必要なメソッドやプロパティが不足しているか？セキュリティモデルについてご質問やご意見がある場合

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

実装に問題がある場合

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

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

サポートを示す

ハンドルの取得を使用する予定はありますか？公開サポートによって、Chrome チームは機能の優先順位付けを行うことができ、サポートがいかに重要であるかを他のブラウザベンダーに示すことができます。

@ChromiumDev 宛てのツイートで、この機能をどこでどのように使っているかを教えてください。

謝辞

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

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

キャプチャ ハンドルについて