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