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

Screen capture

実験的機能: これは実験的な技術です

本番環境で使用する前に、ブラウザーの互換性一覧表を注意深く確認してください。

セキュアコンテキスト: この機能は、一部またはすべての対応ブラウザーにおいて、セキュアコンテキスト (HTTPS) でのみ利用可能です。

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

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

埋め込み

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`CaptureController` 実験的	109	109
`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
その他
`html.elements.iframe.allow.display-capture`	94	94	74	13	94
`http.headers.Permissions-Policy.display-capture` 実験的 HTTP の Permissions-Policy ヘッダーにおける display-capture ディレクティブは、現在の文書が画面キャプチャ API、すなわち MediaDevices.getDisplayMedia を使用して画面の内容をキャプチャすることを許可するかどうかを制御します。	94	94			94

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

基本構文

JAVASCRIPT

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: { displaySurface: 'monitor' },
  audio: true
});
const video = document.querySelector('video');
video.srcObject = stream;

実務での使いどころ

Screen capture の活用

実験的機能: これは実験的な技術です

注意点

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

対応ブラウザ

基本構文

実務での使いどころ

Screen capture の活用

注意点

アクセシビリティ

参考リンク