ウェブ プラットフォームではすでに、Screen Capture API を使用してタブ、ウィンドウ、画面を共有できるようになりました。つまり、getDisplayMedia() を使用すると、画面または画面の一部（ウィンドウなど）を選択して、メディア ストリームとしてキャプチャできます。その後、このストリームを録画したり、ネットワーク経由で他のユーザーと共有したりできます。この記事では、プライバシー保護を強化し、個人情報が誤って共有されるのを防ぐために、API に最近加えられた変更について説明します。
プライバシー保護の画面共有には以下のコントロールがあります。
displaySurfaceオプションを使用すると、ウェブアプリが特定のディスプレイ サーフェス タイプ（タブ、ウィンドウ、スクリーン）を提供するように指定できます。monitorTypeSurfacesオプションを使用すると、ユーザーが画面全体を共有できないようにすることができます。surfaceSwitchingオプションは、Chrome でユーザーが共有タブを動的に切り替えられるようにするかどうかを指定します。selfBrowserSurfaceオプションを使用すると、ユーザーが現在のタブを共有できないようにすることができます。これにより、「鏡の間」効果を回避できます。systemAudioオプションを使用すると、Chrome では関連する音声キャプチャのみがユーザーに提供されます。
getDisplayMedia() の変更
getDisplayMedia() に次の変更が加えられました。
displaySurface オプション
ウィンドウや画面の共有に最適である特殊なユーザー ジャーニーを備えたウェブアプリでも、Chrome でメディア選択ツールでウィンドウまたは画面をより目立つように表示するよう設定できます。オファーの順序は変更されず、関連するペインが事前に選択されます。
displaySurface オプションの値は次のとおりです。
- タブの場合は
"browser"。 - Windows の場合は
"window"。 "monitor"（画面の場合）。
const stream = await navigator.mediaDevices.getDisplayMedia({
// Pre-select the "Window" pane in the media picker.
video: { displaySurface: "window" },
});
特定のウィンドウまたは画面を事前に選択するオプションは提供していません。これは、ウェブアプリがユーザーに過剰な権限を与えてしまうため、意図されたものです。
monitorTypeSurfaces オプション
従業員のエラーによる個人情報の漏洩から企業を保護するため、ビデオ会議用ウェブアプリで monitorTypeSurfaces を "exclude" に設定できるようになりました。これにより、メディア選択ツールで画面が除外されます。含めるには、"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() を呼び出すすべてのウェブアプリで使用できるようになりました。
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" に設定できるようになりました。これにより、ユーザーに表示されるタブのリストから現在のタブが除外されます。含めるには、"include" に設定します。現在、selfBrowserSurface のデフォルト値は "exclude" ですが、デフォルト値は今後変更される可能性があるため、ウェブアプリでは明示的に設定することをおすすめします。
const stream = await navigator.mediaDevices.getDisplayMedia({
video: true,
selfBrowserSurface: "exclude" // Avoid 🦶🔫.
});
明示的な selfBrowserSurface: "exclude" は preferCurrentTab: true と相互に排他的です。
systemAudio オプション
getDisplayMedia() を使用すると、動画とともに音声をキャプチャできます。ただし、すべての音声が同じように作られているわけではありません。ビデオ会議ウェブアプリを検討する:
- ユーザーが別のタブを共有する場合は、音声もキャプチャするとよいでしょう。
- 一方、システム音声にはリモートの参加者自身の音声が含まれているため、リモートの参加者に送信してはならない。
将来的には、キャプチャから一部の音源を除外できるようになる可能性があります。しかし、現在のところ、ビデオ会議用ウェブアプリでは、システム音声のキャプチャを避けるのが最善であることがよくあります。以前は、ユーザーが選択したディスプレイ サーフェスを確認し、画面を共有することを選択した場合は音声トラックを停止することで、これが可能になりました。ただし、システム音声を共有するチェックボックスを明示的にオンにすると、音声が聞こえないとリモートの参加者から通知されると、一部のユーザーが混乱するという小さな問題が生じます。
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 でデモを実行すると、これらの画面共有コントロールをお試しいただけます。必ずソースコードを確認してください。
ブラウザ サポート
- パソコン版 Chrome 107 で
displaySurface、surfaceSwitching、selfBrowserSurfaceを利用できるようになりました。
対応ブラウザ
- 105
- 105
- x
- x
systemAudioがパソコンの Chrome 105 で利用可能になりました。
対応ブラウザ
- 119
- 119
- x
- x
monitorTypeSurfacesがパソコンの Chrome 119 で利用できるようになりました。
フィードバック
Chrome チームとウェブ標準コミュニティは、この画面共有コントロールの使用経験を募集しています。
デザインについてお聞かせください
画面共有の設定に関して、ご期待に沿えない点はございませんか？あるいは、アイデアを実装するために必要なメソッドやプロパティが不足しているか？セキュリティ モデルについてご質問やご意見がある場合
- GitHub リポジトリで仕様の問題を提出するか、既存の問題に意見を追加します。
実装に問題がある場合
Chrome の実装にバグが見つかりましたか？あるいは、実装が仕様と異なるのでしょうか？
- https://new.crbug.com でバグを報告します。できるだけ詳しい情報と、再現するための簡単な手順を記載してください。Glitch はコードの共有に適しています。
サポートを示す
これらの画面共有コントロールを使用する予定はありますか？公開サポートによって、Chrome チームは機能の優先順位付けを行うことができ、サポートがいかに重要であるかを他のブラウザ ベンダーに示すことができます。
@ChromiumDev 宛てのツイートで、この機能をどこでどのように使っているかを教えてください。
関連情報
- の仕様
displaySurfaceの説明monitorTypeSurfacesの説明surfaceSwitchingの説明selfBrowserSurfaceの説明systemAudioの説明- TAG の審査
謝辞
ヒーロー画像（John Schnobrich）
この記事をレビューしてくれた Rachel Andrew に感謝します。