画面キャプチャ 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 で、同一オリジン内のあらゆるコンテンツに画面キャプチャを使用させることができます。

仕様書

ブラウザーの互換性

api.MediaDevices.getDisplayMedia

api.CropTarget

api.RestrictionTarget

関連情報

• 画面キャプチャ API の使用
• MediaDevices.getDisplayMedia()