画面キャプチャ API
画面キャプチャ API (Screen Capture API) は、既存のメディアキャプチャおよびストリーム API に追加して、ユーザーが画面または画面の一部(ウィンドウなど)を選択してメディアストリームとしてキャプチャできるようにしたものです。このストリームは、ネットワーク上で録画したり、他の人と共有したりすることができます。
画面キャプチャ API の概念と使用方法
画面キャプチャ API は比較的簡単に使用することができます。唯一のメソッドは MediaDevices.getDisplayMedia()
で、その仕事はユーザーにキャプチャする画面または画面の一部を選択するよう促し、 MediaStream
形式でキャプチャすることです。
画面から動画をキャプチャするには、 getDisplayMedia()
を Media
navigator.mediaDevices
のインスタンス上で呼び出してください。
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 使用の希望を指定することができます。
<iframe allow="display-capture" src="/some-other-document.html">
既定の許可リストは self
で、文書内の任意のコンテンツに画面キャプチャを使用させることができます。
機能ポリシーをどのように使うかについてのより深い解説については、機能ポリシーの使用を参照してください。
仕様書
仕様書 |
---|
Screen Capture |
ブラウザーの互換性
BCD tables only load in the browser