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

プライバシーに配慮した画面共有の管理

François Beaufort

Elad Alon

タブ、ウィンドウ、画面の共有は、ウェブプラットフォームで Screen Capture API を使用してすでに可能です。つまり、getDisplayMedia() を使用すると、ユーザーは画面または画面の一部（ウィンドウなど）を選択して、メディアストリームとしてキャプチャできます。このストリームは、録画したり、ネットワーク経由で他のユーザーと共有したりできます。プライバシーの保護を強化し、個人情報の誤っての共有を防止するために、最近 API が変更されました。

プライバシー保護画面共有で使用できるコントロールの一覧は次のとおりです。

displaySurface オプションは、ウェブアプリが特定のディスプレイサーフェスタイプ（タブ、ウィンドウ、画面）を優先することを示します。
monitorTypeSurfaces オプションを使用すると、ユーザーが画面全体を共有できないようにできます。
surfaceSwitching オプションは、ユーザーが共有タブを動的に切り替えることを Chrome で許可するかどうかを示します。
selfBrowserSurface オプションを使用すると、ユーザーが現在のタブを共有できないようにできます。これにより、「鏡の回廊」効果を回避できます。
systemAudio オプションを使用すると、Chrome は関連する音声キャプチャのみをユーザーに提示します。

`getDisplayMedia()` の変更

getDisplayMedia() に次の変更が加えられました。

`displaySurface` オプション

ウィンドウまたは画面の共有に最適な、特別なユーザージャーニーを持つウェブアプリは、引き続き Chrome に、メディア選択ツールでウィンドウまたは画面をより目立つように表示するようリクエストできます。オファーの順序は変更されませんが、関連するペインが事前選択されます。

displaySurface オプションの値は次のとおりです。

タブの場合は "browser" です。
"window"（Windows の場合）。
"monitor" は画面用です。

const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});

事前選択された — メディア選択ツールで [ウィンドウ] ペインが事前選択されています。

特定のウィンドウや画面を事前に選択するオプションはありません。これは、ウェブアプリがユーザーに対して過度な権限を持ちすぎないようにするための設計です。

`monitorTypeSurfaces` オプション

従業員のミスによる個人情報の漏洩から企業を保護するため、ビデオ会議ウェブアプリで monitorTypeSurfaces を "exclude" に設定できるようになりました。その後、Chrome はメディア選択ツールで画面を除外します。含めるには、"include" に設定します。現在、monitorTypeSurfaces のデフォルト値は "include" ですが、デフォルトは今後変更される可能性があるため、ウェブアプリでは明示的に設定することをおすすめします。

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});

メディア選択ツールのスクリーンショット（ — メディア選択ツールに [画面全体] ペインが表示されません。

明示的な monitorTypeSurfaces: "exclude" は displaySurface: "monitor" と相互に排他的です。

`surfaceSwitching` オプション

画面全体を共有する理由として最も多く挙げられるのは、セッション中にさまざまなサーフェスの共有をシームレスに切り替えたいというものです。この問題に対処するため、Chrome に、ユーザーが異なるタブの共有を動的に切り替えることができるボタンが表示されるようになりました。この [代わりにこのタブを共有] ボタンは、これまで Chrome 拡張機能でのみ使用可能でしたが、getDisplayMedia() を呼び出すすべてのウェブアプリで使用できるようになりました。

異なるタブの共有を動的に切り替えるために使用されるボタンのスクリーンショット — Chrome の [代わりにこのタブを共有] ボタン。

surfaceSwitching が "include" に設定されている場合、ブラウザにボタンが表示されます。"exclude" に設定すると、そのボタンはユーザーに表示されなくなります。Chrome のデフォルト値は時間の経過とともに変更される可能性があるため、ウェブアプリでは明示的な値を設定することをおすすめします。

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Ask Chrome to expose browser-level UX elements that allow
  // the user to switch the underlying track at any time,
  // initiated by the user and without prior action by the web app.
  surfaceSwitching: "include"
});

`selfBrowserSurface` オプション

ビデオ会議のシナリオでは、ユーザーがビデオ会議タブ自体を選択してしまうことがよくあり、鏡の部屋のような効果、ハウリング、混乱につながります。

ユーザーを保護するため、ビデオ会議ウェブアプリで selfBrowserSurface を "exclude" に設定できるようになりました。その後、Chrome は、ユーザーに表示されるタブのリストから現在のタブを除外します。含めるには、"include" に設定します。現在、selfBrowserSurface のデフォルト値は "exclude" ですが、デフォルトは今後変更される可能性があるため、ウェブアプリでは明示的に設定することをおすすめします。

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});

現在のタブを除くメディア選択ツールのスクリーンショット — 現在のタブは除外され、2 番目のタブのみが表示されます。

明示的な selfBrowserSurface: "exclude" は preferCurrentTab: true と相互に排他的です。

`systemAudio` オプション

getDisplayMedia() を使用すると、動画とともに音声をキャプチャできます。ただし、すべての音声が同じように作成されているわけではありません。ビデオ会議のウェブアプリについて検討します。 - ユーザーが別のタブを共有する場合は、音声もキャプチャすることをおすすめします。 - 一方、システム音声にはリモート参加者自身の音声が含まれるため、リモート参加者に送信しないでください。

今後、一部の音声ソースをキャプチャから除外できる可能性があります。現時点では、ビデオ会議ウェブアプリでは、システム音声をキャプチャしないことをおすすめします。以前は、ユーザーが選択したディスプレイサーフェスを確認し、画面共有を選択した場合はオーディオトラックを停止することで、この操作を行うことができました。ただし、システム音声を共有するチェックボックスを明示的にオンにしても、リモートの参加者から音声が届かないと通知されるため、一部のユーザーが混乱する可能性があります。

タブの音声共有を備えたメディア選択ツールのスクリーンショット — タブの音声の共有は [Chrome タブ] ペインで提供されますが、[画面全体] ペインでは提供されません。

systemAudio を "exclude" に設定すると、ウェブアプリは混乱するシグナルによってユーザーを混乱させることを回避できます。Chrome では、タブやウィンドウと一緒に音声をキャプチャできますが、画面と一緒にキャプチャすることはできません。

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,           // Ask to capture audio; caveat follows.
  systemAudio: "exclude" // Do not offer to capture *system* audio.
});

現在、systemAudio のデフォルト値は "include" ですが、デフォルトは今後変更される可能性があるため、ウェブアプリでは明示的に設定することをおすすめします。

デモ

これらの画面共有コントロールを試すには、Glitch でデモを実行します。ソースコードを確認してください。

ブラウザサポート

displaySurface、surfaceSwitching、selfBrowserSurface は、パソコン版 Chrome 107 で利用できます。

対応ブラウザ

systemAudio は、パソコン版 Chrome 105 で利用できます。

対応ブラウザ

monitorTypeSurfaces は、パソコン版 Chrome 119 で利用できます。

フィードバック

Chrome チームとウェブ標準コミュニティでは、これらの画面共有の管理機能に関するご意見をお聞かせいただきたいと考えています。

デザインについて

画面共有コントロールで、期待どおりに動作しない点はありますか？または、アイデアを実装するために必要なメソッドやプロパティが不足している場合は、セキュリティモデルについてご質問やご意見がございましたら、

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

実装に関する問題

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

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

クリエイターを応援する

画面共有のコントロールを使用する予定ですか？公開されている機能のサポートは、Chrome チームが機能の優先順位を決める際に役立ちます。また、他のブラウザベンダーに、その機能のサポートがどれほど重要であるかを示します。

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

謝辞

Rachel Andrew 様による確認

プライバシーに配慮した画面共有の管理

getDisplayMedia() の変更

displaySurface オプション

monitorTypeSurfaces オプション

surfaceSwitching オプション

selfBrowserSurface オプション

systemAudio オプション

デモ

ブラウザ サポート