Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

Screen capture

CaptureController インターフェイスは、キャプチャされた表示サーフェス (MediaDevices.getDisplayMedia() を介してキャプチャされた) をさらに操作するために使用できるメソッドを提供します。

CaptureController オブジェクトは、getDisplayMedia() の呼び出しにオプションオブジェクトの controller プロパティの値として渡すことで、キャプチャされた表示サーフェスに関連付けられます。

デバイス・センサー

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`CaptureController` 実験的	109	109
HTML 属性
`allow (display-capture)`	94	94	74	13	94
DOM API
`CaptureController` 実験的 CaptureController コンストラクターは、新しい CaptureController オブジェクトインスタンスを作成します。	109	109
`setFocusBehavior` 実験的 CaptureController インターフェイスの setFocusBehavior() メソッドは、関連付けられた MediaDevices.getDisplayMedia() Promise が満たされたときにキャプチャされたタブまたはウィンドウにフォーカスするかどうか、またはキャプチャアプリを含むタブにフォーカスを維持するかどうかを制御します。	109	109
`getDisplayMedia` getDisplayMedia() は MediaDevices インターフェイスのメソッドで、ディスプレイまたはその一部（ウィンドウなど）の内容を MediaStream としてキャプチャする許可を選択し、許可するようユーザーに促します。	72	79	66	13
`getDisplayMedia (audio capture support)` 音声の共有が必要なプロジェクトを開始する前に、getDisplayMedia()のブラウザ互換性を確認し、互換性を希望するブラウザがキャプチャした画面ストリームで音声をサポートしているかどうかを確認してください。	74	79
`getDisplayMedia (controller option)` 実験的 controller`オプション	109	109
`getDisplayMedia (monitorTypeSurfaces option)` 実験的 monitorTypeSurfaces`オプション	119	119
`getDisplayMedia (selfBrowserSurface option)` 実験的 selfBrowserSurface`オプション	112	112
`getDisplayMedia (surfaceSwitching option)` 実験的 surfaceSwitching`オプション	107	107
`getDisplayMedia (systemAudio option)` 実験的 systemAudio`オプション	105	105
`applyConstraints (displaySurface constraint)` MediaTrackConstraints辞書のdisplaySurfaceプロパティは、MediaTrackSettings.displaySurface制約可能プロパティの優先値を記述したConstrainDOMStringです。	107	107		11.1	107	11.3
`applyConstraints (logicalSurface constraint)` MediaTrackConstraints辞書のlogicalSurfaceプロパティは、MediaTrackSettings.logicalSurface制約可能プロパティの値に要求された、または必須の制約を記述するConstrainDOMStringである。				11.1		11.3
`applyConstraints (suppressLocalAudioPlayback constraint)` 実験的 MediaTrackConstraints ディクショナリの [suppressLocalAudioPlayback] プロパティは、MediaTrackSettings.suppressLocalAudioPlayback 制約可能プロパティの値に適用される要求された制約または必須の制約を記述する ConstrainBoolean です。このプロパティは、タブで再生されているオーディオをユーザーのローカル環境から引き続き再生するかどうかを制御します。	109	109			109
その他
`display-capture` 実験的 HTTP の Permissions-Policy ヘッダーにおける display-capture ディレクティブは、現在の文書が画面キャプチャ API、すなわち MediaDevices.getDisplayMedia を使用して画面の内容をキャプチャすることを許可するかどうかを制御します。	94	94			94

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

// Create a new CaptureController instance
const controller = new CaptureController();

// Prompt the user to share a tab, window, or screen.
const stream = await navigator.mediaDevices.getDisplayMedia({ controller });

// Query the displaySurface value of the captured video track
const [track] = stream.getVideoTracks();
const displaySurface = track.getSettings().displaySurface;

if (displaySurface === "browser") {
  // Focus the captured tab.
  controller.setFocusBehavior("focus-captured-surface");
} else if (displaySurface === "window") {
  // Do not move focus to the captured window.
  // Keep the capturing page focused.
  controller.setFocusBehavior("no-focus-change");
}

実務での使いどころ

Screen capture の活用

CaptureController インターフェイスは、キャプチャされた表示サーフェス (MediaDevices.getDisplayMedia() を介してキャプチャされた) をさらに操作するために使用できるメソッドを提供します。

注意点

一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

実装メモ

一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

対応ブラウザ

基本構文

実務での使いどころ

Screen capture の活用

注意点

実装メモ

参考リンク