画面キャプチャ API

画面キャプチャ API (Screen Capture API) は、既存のメディアキャプチャおよびストリーム API に追加して、ユーザーが画面または画面の一部(ウィンドウなど)を選択してメディアストリームとしてキャプチャできるようにしたものです。このストリームは、ネットワーク上で録画したり、他の人と共有したりすることができます。

画面キャプチャ API の概念と使用方法

画面キャプチャ API は比較的簡単に使用することができます。唯一のメソッドは MediaDevices.getDisplayMedia() で、その仕事はユーザーにキャプチャする画面または画面の一部を選択するよう促し、 MediaStream 形式でキャプチャすることです。

画面から動画をキャプチャするには、 getDisplayMedia()navigator.mediaDevices 上で呼び出してください。

js
captureStream =
  await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);

PromisegetDisplayMedia() から返され、これはキャプチャされたメディアをストリーミングする MediaStream で解決します。

画面キャプチャ API を使用する方法については、画面キャプチャ API の使用の記事を参照してください。

インターフェイス

CaptureController

MediaDevices.getDisplayMedia() による開始とは別に、キャプチャセッションをさらに操作するために使用できるメソッドを提供します。CaptureController オブジェクトは、getDisplayMedia() 呼び出しに options オブジェクトの controller プロパティの値として渡すことで、キャプチャセッションに関連付けられます。

MediaDevices インターフェイスへの追加

MediaDevices.getDisplayMedia()

getDisplayMedia() メソッドが MediaDevices インターフェイスに追加されています。 getUserMedia() と同様、このメソッドは、ユーザーが選択した表示領域を、指定されたオプションに一致する形式で含む MediaStream で解決するプロミスを作成します。

既存の辞書への追加

画面キャプチャ API は、他の仕様書で定義された以下の辞書にプロパティを追加します。

MediaTrackConstraints

MediaTrackConstraints.displaySurface

ConstrainDOMString で、キャプチャする表示面の種類を指定します。値は applicationbrowsermonitorwindow のいずれかです。

MediaTrackConstraints.logicalSurface

ストリームの映像が、論理的な表示面(つまり、画面上に完全に表示されていない、あるいは完全に画面外にある可能性のあるもの)を表しているかどうかを示します。値が true の場合、論理的な表示面をキャプチャすることを示します。

MediaTrackConstraints.suppressLocalAudioPlayback

タブがキャプチャされた際に、タブ内で再生中の音声をユーザーのローカルスピーカーから引き続き再生するか、または停止するかを制御します。値が true の場合、停止することを示します。

MediaTrackSettings

MediaTrackSettings.cursor

文字列で、現在キャプチャしている表示面にマウスカーソルが含まれているかどうか、含まれている場合はマウスが動いている間だけ見えるのか、常に見えているのかを示します。値は alwaysmotionnever のいずれかです。

MediaTrackSettings.displaySurface

文字列で、現在キャプチャしている表示面の種類を示します。値は browsermonitorwindow のいずれかです。

MediaTrackSettings.logicalSurface

論理値で、キャプチャした映像が、画面上の単一の表示領域に直接対応していない場合に true となります。

MediaTrackSettings.suppressLocalAudioPlayback

論理値で、キャプチャされた音声がユーザーのローカルスピーカーから再生されていない場合は true となります。

MediaTrackSupportedConstraints

MediaTrackSupportedConstraints.displaySurface

論理値で、 true であれば現在の環境が MediaTrackConstraints.displaySurface 制約に対応していることを示します。

MediaTrackSupportedConstraints.logicalSurface

論理値で、 true であれば現在の環境が MediaTrackConstraints.logicalSurface 制約に対応していることを示します。

MediaTrackSupportedConstraints.suppressLocalAudioPlayback

論理値で、現在の環境が MediaTrackConstraints.suppressLocalAudioPlayback 制約に対応している場合は true となります。

権限ポリシーの検証

(HTTP の Permissions-Policy ヘッダーまたは <iframe>allow 属性のいずれかを使用した)権限ポリシーに対応するユーザーエージェントは、画面キャプチャ API を使用する意思を、display-capture ディレクティブを使用して指定することができます。

html
<iframe allow="display-capture" src="/some-other-document.html"></iframe>

既定の許可リストは self で、同一オリジン内のあらゆるコンテンツに画面キャプチャを使用させることができます。

仕様書

Specification
Screen Capture
Element Capture
Region Capture

ブラウザーの互換性

api.MediaDevices.getDisplayMedia

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
getDisplayMedia()
Audio capture support
controller option
Experimental
monitorTypeSurfaces option
Experimental
preferCurrentTab option
ExperimentalNon-standard
selfBrowserSurface option
Experimental
surfaceSwitching option
Experimental
systemAudio option
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

api.CropTarget

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CropTarget
Experimental
fromElement() static method
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

api.RestrictionTarget

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
RestrictionTarget
Experimental
fromElement() static method
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

関連情報