DOM 要素からのメディアキャプチャ

W3C 作業草案

この文書についての詳細
このバージョン:
https://www.w3.org/TR/2025/WD-mediacapture-fromelement-20250212/
最新公開バージョン:
https://www.w3.org/TR/mediacapture-fromelement/
最新エディターズドラフト:
https://w3c.github.io/mediacapture-fromelement/
履歴:
https://www.w3.org/standards/history/mediacapture-fromelement/
コミット履歴
テストスイート:
https://github.com/web-platform-tests/wpt/tree/master/mediacapture-fromelement
編集者:
Martin Thomson (Mozilla)
(Google, Inc.) (Media Element 部分。)
(Google, Inc.) (Canvas Element 部分。)
フィードバック:
GitHub w3c/mediacapture-fromelement (プルリクエスト, 新しい課題, 未解決の課題)
public-webrtc@w3.org に、件名行 [mediacapture-fromelement] … メッセージのトピック … を付けて送信してください (アーカイブ)
参加
メーリングリスト

概要

この文書は、 videoaudio、 または canvas 要素などの DOM 要素から、メディアのストリームを MediaStream [GETUSERMEDIA] の形でキャプチャする方法を定義します。

この文書のステータス

この節は、公開時点におけるこの 文書のステータスを説明します。現在の W3C 公開文書およびこの技術レポートの最新改訂版の一覧は、 https://www.w3.org/TR/ にある W3C 技術 レポート索引で確認できます。

この文書は完成していません。大きな変更が加えられる可能性があり、初期の 実験は推奨されますが、実装を目的としたものではありません。

この文書は、Web Real-Time Communications Working Group によって、 勧告トラックを使用した 作業草案として公開されました。

作業草案としての公開は、 W3C およびそのメンバーによる承認を意味しません。

これは草案文書であり、いつでも他の文書によって更新、置換、または廃止される可能性があります。 この文書を、作業中のもの以外として引用することは不適切です。

この文書は、 W3C 特許 ポリシーの下で運営される グループによって作成されました。 W3C は、 グループの成果物に関連して行われた特許開示の 公開リストを維持しています。 そのページには、特許を開示するための 手順も含まれています。個人が、 必須クレームを含むと その個人が信じる特許について実際の知識を有している場合、 その情報を W3C 特許ポリシーの第 6 節に従って開示しなければなりません。

この文書は、 2023年11月3日版 W3C プロセス文書に準拠します。

1. はじめに

この節は非規範的です。

この文書は、HTML メディア要素と HTML canvas 要素の両方に対する拡張を説明します。この拡張により、要素の出力をストリーミング メディアの形でキャプチャできます。

キャプチャされたメディアは MediaStream [GETUSERMEDIA] に形成され、その後、 WebRTC [WEBRTC] や Web Audio [WEBAUDIO] など、メディアのストリームを処理するさまざまな API によって 消費できます。

2. 適合性

非規範的と示された節に加えて、この仕様におけるすべての作成ガイドライン、図、例、および注記は非規範的です。 この仕様におけるそれ以外のすべては規範的です。

この文書におけるキーワード MUST および MUST NOT は、 ここに示すようにすべて大文字で現れる場合に限り、 BCP 14 [RFC2119] [RFC8174] で説明されているように解釈されるものとします。

この仕様は、単一の製品、すなわちこの仕様に含まれるインターフェイスを実装する ユーザーエージェントに 適用される適合性基準を定義します。

ECMAScript を使用してこの仕様で定義される API を実装する実装は、 この仕様が Web IDL 仕様 [WEBIDL] とその 用語を使用しているため、その仕様で定義される ECMAScript バインディングと一致する方法で実装しなければなりません。

3. HTML メディア要素メディアキャプチャ拡張

メソッド captureStream は、HTML [HTML5] メディア 要素に追加されます。 キャプチャ用のメソッドは、HTMLMediaElementHTMLCanvasElement の 両方に追加されます。

MediaStreamHTMLMediaElement は いずれも トラックの概念を公開します。 HTMLMediaElement に 使用される共通の型は存在しないため、 この文書では、 VideoTrack または AudioTrack のいずれかを 指すために、トラックという用語を使用します。 MediaStreamTrack は、 MediaStream 内の メディアを識別するために使用されます。

WebIDLpartial interface HTMLMediaElement {
    MediaStream captureStream ();
};

メソッド

captureStream

captureStream() メソッドは、 メディア要素にレンダリングされるメディアのリアルタイムキャプチャを生成します。

キャプチャされた MediaStream は、 メディア要素からの 選択されたVideoTrack、または その他の排他的に選択される トラック型の場合)または 有効化されたAudioTrack、または 複数選択をサポートするその他の トラック型の場合) トラックの集合からのコンテンツをレンダリングする MediaStreamTrack群で 構成されます。メディア要素に、指定された型の選択済みまたは有効化済み トラックがない場合、その型の MediaStreamTrack はキャプチャされたストリーム内に存在しません。

したがって、 video 要素は、動画 MediaStreamTrack と任意の数の音声 MediaStreamTrackを キャプチャできます。 audio 要素は、任意の数の音声 MediaStreamTrackを キャプチャできます。 いずれの場合も、キャプチャされた MediaStreamTrackの 集合は空である可能性があります。

指定された型の トラックが選択または有効化されているまでは、 その型の MediaStreamTrack はキャプチャされたストリーム内に存在しません。特に、メディア要素にソースが割り当てられていない場合、 キャプチャされた MediaStream にはトラックがありません。したがって、ready state が HAVE_NOTHING であるメディア要素は、キャプチャされた MediaStreamTrack インスタンスを生成しません。メタデータが利用可能になり、 選択済みまたは有効化済みの トラックが決定されると、 新しいキャプチャ済み MediaStreamTrack インスタンスが作成され、 MediaStreamに追加されます。

キャプチャされた MediaStreamTrack は、 終了します。これは、 再生が 終了したとき(かつ ended イベントが発火したとき)、またはそれがキャプチャするトラックが 再生のために選択または有効化されなくなったときです。メディア要素の src または srcObject 属性を設定してソースが変更された場合、トラックは選択または有効化されなくなります。

キャプチャされた MediaStreamTrackの 集合は、メディア要素のソースが変更されると変化します。メディア要素のソースが終了した場合、 別のソースが選択されます。

メディア要素の選択された VideoTrack または有効化された AudioTrackが 変更された場合、 以前は選択または有効化されていなかった各 トラックについて、新しい MediaStreamTrackを伴う addtrack イベントが生成されます。また、選択または有効化されなくなった各 トラックについて、 removetrack イベントが生成されます。 MediaStreamTrack は、 MediaStreamから 削除される前に終了しなければなりません。

MediaStreamTrack は 一度しか終了できないため、有効化され、無効化され、再び有効化されたトラックは、 2 つの別々のトラックとしてキャプチャされます。同様に、再生終了後に再生を再開すると、 新しいキャプチャ済み MediaStreamTrack インスタンスの集合が作成されます。再生中にシークしても、トラック選択が変更されない限り、 イベントは生成されず、キャプチャされた MediaStreamTrack は終了しません。

キャプチャされた MediaStreamを構成する MediaStreamTrackは、 それらがキャプチャするトラックの状態が変化するにつれて、ミュートまたはミュート解除されます。 いつでも、メディア要素はさまざまな理由により、指定されたトラック上でキャプチャ可能な アクティブコンテンツを持たない場合があります。

  • メディア再生が一時停止されている可能性があります。
  • トラックは、現在の再生時刻が そのトラックのコンテンツの開始前または終了後である場合、その再生時刻のコンテンツを持たない可能性があります。
  • ソースとして機能している MediaStreamTrack が、 ミュート または 無効化されている可能性があります。
  • トラックの内容は、クロスオリジン保護により、 現在のオリジンからアクセスできなくなる可能性があります。たとえば、HTTP URL からレンダリングされるコンテンツは、 部分コンテンツのリクエストでリダイレクトの対象となる場合があり、または有効化もしくは選択されたトラックが クロスオリジンコンテンツを含むように変更される場合があります。

コンテンツの不在は、キャプチャされたトラックでは muted 属性を通じて反映されます。キャプチャされた MediaStreamTrack は、 対応するソース トラックに利用可能かつアクセス可能なコンテンツがない場合、 muted 属性を true に設定しなければなりません。 コンテンツの利用可能性が変化すると、 mute イベントが MediaStreamTrack上で 発生します。

ミュートされたキャプチャが結果として生成する出力は、メディアの型によって異なります。 VideoTrack は、 ミュートされると新しいフレームのキャプチャを停止し、 キャプチャされたストリームには最後にキャプチャされたフレームが表示されます。ミュートされた AudioTrack は 無音を生成します。

メディア要素が実際にコンテンツをレンダリングしているかどうか(たとえば画面や音声デバイスへ)は、 キャプチャされたストリームの内容に影響しません。メディア要素の音声をミュートしても、 キャプチャが無音を生成することはなく、メディア要素を非表示にしても、 キャプチャされた動画が停止することはありません。同様に、メディア要素の音声レベルまたは音量は、 キャプチャされた音声の音量に影響しません。

有効な 再生レートが 1.0 以外の要素からキャプチャされた音声は、タイムストレッチされなければなりません。 再生不能な再生レートは、キャプチャされた音声トラックをミュート状態にします。

4. HTML Canvas 要素メディアキャプチャ拡張

captureStream メソッドは、 HTML [HTML5] canvas 要素に追加されます。結果として得られる CanvasCaptureMediaStreamTrack は、 canvas からフレームをサンプリングするタイミングを制御するためのメソッドを提供します。

WebIDLpartial interface HTMLCanvasElement {
    MediaStream captureStream (optional double frameRequestRate);
};

メソッド

captureStream

captureStream() メソッドは、 canvas の表面のリアルタイム動画キャプチャを生成します。結果として得られるメディアストリームは、 canvas 要素の寸法と一致する単一の動画 CanvasCaptureMediaStreamTrack を持ちます。

origin-clean でない canvas からのコンテンツはキャプチャしてはなりません。このメソッドは、 canvas が origin-clean でない場合、 SecurityError 例外を投げます。

キャプチャされたストリームは、 captureStream() によって 作成された後に、ソース canvas の origin-clean フラグが false になった場合、 直ちにコンテンツのキャプチャを停止しなければなりません。 キャプチャされた MediaStreamTrack は、canvas がこの状態にある間、新しいコンテンツを生成せず、 ミュート状態にならなければなりません。

canvas をキャプチャする各トラックには、 canvas から新しいフレームがリクエストされたときに true に設定される [[frameCaptureRequested]] 内部スロットがあります。

新しいすべてのトラックにおける [[frameCaptureRequested]] の値は、 トラックが作成されたときに true に設定されます。特定の非ゼロの frameRequestRate を伴ってキャプチャされたトラックが作成されると、 ユーザー エージェント1/frameRequestRate 秒の間隔で周期タイマーを開始します。タイマーが作動するたびに、 [[frameCaptureRequested]]true に設定されます。

requestFrame() メソッドによるフレームキャプチャの手動制御をサポートするため、 ブラウザーは frameRequestRate に値 0 をサポートしなければなりません。 ただし、キャプチャされたストリームは、frameRequestRate がゼロであっても、 作成時にフレームのキャプチャをリクエストしなければなりません。

frameRequestRate が負の場合、このメソッドは NotSupportedError を投げます。

[[frameCaptureRequested]] が true であり、canvas が描画されたとき、canvas から新しいフレームがリクエストされます。 キャプチャされた canvas が描画されるたびに、次の手順が実行されます。

  1. canvas からキャプチャしている各 track について、次の手順を実行します。
    1. canvas が最後に描画されてから新しいコンテンツが canvas に描画されており、 track[[frameCaptureRequested]] 内部スロットが設定されている場合、 canvas に描画された内容を含む新しいフレームを track に追加します。
    2. frameRequestRate 値が指定されていた場合、 track[[frameCaptureRequested]] 内部スロットを false に設定します。

canvas に描画された内容を含む新しいフレームを track に追加するとき、 canvas が完全に不透明でない場合は、canvas のアルファチャンネルの内容をキャプチャして保持しなければなりません。 この track の消費者は、アルファチャンネルを保持しない可能性があります。

注記

このアルゴリズムの結果、canvas 内で何かが変化するまで、キャプチャされたトラックは開始されません。

パラメーター nullable 任意 説明
frameRequestRate double
戻り値の型: MediaStream

CanvasCaptureMediaStreamTrack は、 MediaStreamTrack の拡張であり、 単一の requestFrame() メソッドを提供します。 メディアストリームへのコンテンツのレンダリングを厳密に制御する必要があるアプリケーションは、 このメソッドを使用して、canvas からフレームがキャプチャされるタイミングを制御できます。

WebIDL[Exposed=Window] interface CanvasCaptureMediaStreamTrack : MediaStreamTrack {
    readonly        attribute HTMLCanvasElement canvas;
    undefined requestFrame ();
};

属性

canvas、型は HTMLCanvasElement、 readonly
このメディアストリームがキャプチャする canvas 要素です。

メソッド

requestFrame

requestFrame() メソッドにより、 アプリケーションは、canvas からフレームをキャプチャしてトラックにレンダリングするよう手動で リクエストできます。アプリケーションが canvas へ段階的にレンダリングする場合、 これにより、部分的にレンダリングされたフレームをキャプチャしないようにできます。

注記

現在指定されているとおりでは、canvas が origin-clean でない場合でも、 SecurityError やその他の エラーフィードバックは発生しません。これは部分的には、 フレームのリクエストがどこから来たかを追跡していないためです。この点を強調したいでしょうか。

パラメーターなし。
戻り値の型: undefined

5. セキュリティに関する考慮事項

メディア要素は、そのメディア要素のオリジンとは異なるオリジンのメディアリソースをレンダリングできます。 そのような場合、結果として得られる MediaStreamTrack の 内容は、文書オリジンによるアクセスから保護されなければなりません。

この保護がどのように現れるかは、コンテンツがどのようにアクセスされるかによって異なります。 たとえば、アクセス不能な動画を canvas 要素 [HTML] にレンダリングすると、 canvas の origin-clean フラグは false になります。Web Audio MediaStreamAudioSourceNode [WEBAUDIO] を作成しようとすると成功しますが、 文書オリジンには情報を生成しません(つまり、音声コンテキストには無音だけが送信されます)。 WebRTC [WEBRTC] を使用して メディアを転送しようとすると、情報は送信されません。

メディア要素によってレンダリングされるメディアのオリジンは、いつでも変化する可能性があります。 これは単一のメディアリソースであっても当てはまります。ユーザーエージェントは、メディアのオリジンの変化が クロスオリジンコンテンツの公開につながらないことを保証しなければなりません。

6. 変更履歴

この節は公開前に削除されます。

6.1 2015-tbd-tbd 以降の変更

A. 謝辞

この文書は、Robert O'Callahan によって最初に開発されたストリーム処理仕様 [streamproc] に基づいています。

B. 参考文献

B.1 規範的参考文献

[HTML]
HTML Standard. Anne van Kesteren; Domenic Denicola; Dominic Farolino; Ian Hickson; Philip Jägenstedt; Simon Pieters. WHATWG. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[HTML5]
HTML5. Ian Hickson; Robin Berjon; Steve Faulkner; Travis Leithead; Erika Doyle Navara; Theresa O'Connor; Silvia Pfeiffer. W3C. 27 March 2018. W3C Recommendation. URL: https://www.w3.org/TR/html5/
[mediacapture-streams]
Media Capture and Streams. Cullen Jennings; Bernard Aboba; Jan-Ivar Bruaroey; Henrik Boström; youenn fablet. W3C. 19 December 2024. CRD. URL: https://www.w3.org/TR/mediacapture-streams/
[RFC2119]
Key words for use in RFCs to Indicate Requirement Levels. S. Bradner. IETF. March 1997. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc2119
[RFC8174]
Ambiguity of Uppercase vs Lowercase in RFC 2119 Key Words. B. Leiba. IETF. May 2017. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc8174
[streamproc]
MediaStream Processing API. Robert O'Callahan. W3C. 31 May 2012. W3C Working Group Note. URL: https://www.w3.org/TR/streamproc/
[WEBAUDIO]
Web Audio API. Paul Adenot; Hongchan Choi. W3C. 17 June 2021. W3C Recommendation. URL: https://www.w3.org/TR/webaudio-1.0/
[WEBIDL]
Web IDL Standard. Edgar Chen; Timothy Gu. WHATWG. Living Standard. URL: https://webidl.spec.whatwg.org/
[WEBRTC]
WebRTC: Real-Time Communication in Browsers. Cullen Jennings; Jan-Ivar Bruaroey; Henrik Boström; Florent Castelli. W3C. 8 October 2024. W3C Recommendation. URL: https://www.w3.org/TR/webrtc/

B.2 参考情報の参考文献

[GETUSERMEDIA]
Media Capture and Streams. Cullen Jennings; Bernard Aboba; Jan-Ivar Bruaroey; Henrik Boström; youenn fablet. W3C. 19 December 2024. CRD. URL: https://www.w3.org/TR/mediacapture-streams/