画面キャプチャ API
画面キャプチャ API (Screen Capture API) は、既存のメディアキャプチャおよびストリーム API に追加して、ユーザーが画面または画面の一部(ウィンドウなど)を選択してメディアストリームとしてキャプチャできるようにしたものです。このストリームは、ネットワーク上で録画したり、他の人と共有したりすることができます。
画面キャプチャ API の概念と使用方法
画面キャプチャ API は比較的簡単に使用することができます。唯一のメソッドは MediaDevices.getDisplayMedia()
で、その仕事はユーザーにキャプチャする画面または画面の一部を選択するよう促し、 MediaStream
形式でキャプチャすることです。
画面から動画をキャプチャするには、 getDisplayMedia()
を navigator.mediaDevices
上で呼び出してください。
captureStream =
await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
Promise
が getDisplayMedia()
から返され、これはキャプチャされたメディアをストリーミングする MediaStream
で解決します。
画面キャプチャ API を使用する方法については、画面キャプチャ API の使用の記事を参照してください。
インターフェイス
CaptureController
-
MediaDevices.getDisplayMedia()
による開始とは別に、キャプチャセッションをさらに操作するために使用できるメソッドを提供します。CaptureController
オブジェクトは、getDisplayMedia()
呼び出しに options オブジェクトのcontroller
プロパティの値として渡すことで、キャプチャセッションに関連付けられます。
MediaDevices インターフェイスへの追加
MediaDevices.getDisplayMedia()
-
getDisplayMedia()
メソッドがMediaDevices
インターフェイスに追加されています。getUserMedia()
と同様、このメソッドは、ユーザーが選択した表示領域を、指定されたオプションに一致する形式で含むMediaStream
で解決するプロミスを作成します。
既存の辞書への追加
画面キャプチャ API は、他の仕様書で定義された以下の辞書にプロパティを追加します。
MediaTrackConstraints
MediaTrackConstraints.displaySurface
-
ConstrainDOMString
で、キャプチャする表示面の種類を指定します。値はapplication
、browser
、monitor
、window
のいずれかです。 MediaTrackConstraints.logicalSurface
-
ストリームの映像が、論理的な表示面(つまり、画面上に完全に表示されていない、あるいは完全に画面外にある可能性のあるもの)を表しているかどうかを示します。値が
true
の場合、論理的な表示面をキャプチャすることを示します。 MediaTrackConstraints.suppressLocalAudioPlayback
-
タブがキャプチャされた際に、タブ内で再生中の音声をユーザーのローカルスピーカーから引き続き再生するか、または停止するかを制御します。値が
true
の場合、停止することを示します。
MediaTrackSettings
MediaTrackSettings.cursor
-
文字列で、現在キャプチャしている表示面にマウスカーソルが含まれているかどうか、含まれている場合はマウスが動いている間だけ見えるのか、常に見えているのかを示します。値は
always
、motion
、never
のいずれかです。 MediaTrackSettings.displaySurface
-
文字列で、現在キャプチャしている表示面の種類を示します。値は
browser
、monitor
、window
のいずれかです。 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
ディレクティブを使用して指定することができます。
<iframe allow="display-capture" src="/some-other-document.html">…</iframe>
既定の許可リストは self
で、同一オリジン内のあらゆるコンテンツに画面キャプチャを使用させることができます。
仕様書
Specification |
---|
Screen Capture # dom-mediadevices-getdisplaymedia |
ブラウザーの互換性
BCD tables only load in the browser