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

François Beaufort
François Beaufort
GitHub
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" },
});