画面キャプチャ API

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

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

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

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

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

画面キャプチャ API は独自のインターフェイスを持たず、既存の MediaDevices インターフェイスに 1 つのメソッドを追加しています。

MediaDevices.getDisplayMedia()

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

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

MediaTrackConstraints.cursor (en-US)

ConstrainDOMString (en-US) で、カーソルをキャプチャした表示面のストリームに含めるかどうか、また、常に表示するか、マウスが動いている間だけ表示するかを指定します。

MediaTrackConstraints.displaySurface (en-US)

ConstrainDOMString (en-US) で、キャプチャする表示面の種類を指定します。値は application、browser、monitor、window のいずれかです。

MediaTrackConstraints.logicalSurface (en-US)

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

MediaTrackSettings.cursor (en-US)

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

MediaTrackSettings.displaySurface (en-US)

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

MediaTrackSettings.logicalSurface (en-US)

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

MediaTrackSupportedConstraints.cursor (en-US)

論理値で、 true であればユーザーエージェントと機器が MediaTrackConstraints.cursor (en-US) 制約に対応していることを示します。

MediaTrackSupportedConstraints.displaySurface (en-US)

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

MediaTrackSupportedConstraints.logicalSurface (en-US)

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

以下の辞書が画面キャプチャ API で定義されています。

CursorCaptureConstraint

列挙文字列型で、設定と制約の cursor プロパティの値を提供するために使用されます。指定できる値は always、motion、never です。

DisplayCaptureSurfaceType

列挙文字列型で、キャプチャするディスプレイ表面の種類を識別するために使用されます。この型は、制約と設定オブジェクトの displaySurface プロパティに使用され、application, browser, monitor, window という値を持つことが可能です。

ユーザーエージェントのうち（HTTP の Feature-Policy ヘッダーまたは <iframe> 属性を使用する）機能ポリシーをに対応するものは、ポリシー制御ディレクティブ display-capture によってが画面キャプチャ API 使用の希望を指定することができます。

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

既定の許可リストは self で、文書内の任意のコンテンツに画面キャプチャを使用させることができます。

機能ポリシーをどのように使うかについてのより深い解説については、機能ポリシーの使用を参照してください。

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