画面キャプチャ API
===========

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

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

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

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


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


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

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

既存インターフェイスへの追加
--------------

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

### MediaDevices インターフェイス

`MediaDevices.getDisplayMedia()`

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

既存の辞書への追加
---------

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

### MediaTrackConstraints

`MediaTrackConstraints.cursor` (en-US)

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

`MediaTrackConstraints.displaySurface` (en-US)

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

`MediaTrackConstraints.logicalSurface` (en-US)

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

### MediaTrackSettings

`MediaTrackSettings.cursor` (en-US)

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

`MediaTrackSettings.displaySurface` (en-US)

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

`MediaTrackSettings.logicalSurface` (en-US)

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

### MediaTrackSupportedConstraints

`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 使用の希望を指定することができます。


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


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

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

仕様書
---

| 仕様書 |
| --- |
| Screen Capture |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

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