メディアキャプチャとストリーム API (メディアストリーム)
メディアキャプチャとストリーム API (Media Capture and Streams API) は、一般的に メディアストリーム API (Media Stream API または MediaStream API) と呼ばれ、音声や映像のデータのストリーミングへの対応を提供する WebRTC に関連した API です。
これは、ストリームとその構成トラックを操作するためのインターフェイスとメソッド、データ形式に関連する制約、データを非同期に使用する際の成功とエラーのコールバック、および処理中に発行されるイベントを提供するものです。
基本概念
この API は、音声または映像に関連づけられたデータの流れを表現するための MediaStream
オブジェクトの操作を基本としています。例としてメディアストリームの取得をご覧ください。
MediaStream
は 0 個以上の MediaStreamTrack
によって構成されます。これは様々な音声や映像のトラックを表現します。それぞれの MediaStreamTrack
は、1 つ以上のチャンネルを持ちます。このチャンネルはメディアストリームの最小の単位を表現します。例えば、ステレオの音声トラックの左と右のチャンネルのそれぞれのように、与えられたスピーカーに関連づけられた音声信号です。
MediaStream
オブジェクトは、1 つの入力と 1 つの出力を持ちます。 MediaStream
オブジェクトは、ローカルで呼び出される getUserMedia()
によって生成され、ユーザーのカメラやマイクの 1 つを入力ソースとして持ちます。ローカルでない MediaStream
は、 <video>
や <audio>
などのメディア要素や、WebRTC RTCPeerConnection
API によって取得できるネットワーク越しに生成されたストリーム、ウェブオーディオ API の MediaStreamAudioDestinationNode
によって作成されたストリームとして表現されます。
MediaStream
オブジェクトの出力はコンシューマー (consumer) に接続されます。出力として <audio>
や <video>
などのメディア要素、 WebRTC RTCPeerConnection
API、ウェブオーディオ API の MediaStreamAudioSourceNode
が使用できます。
インターフェイス
これらのリファレンス記事では、メディアキャプチャとストリーム API を構成する各インターフェイスについて知っておく必要がある基本的な情報を見つけられます。
CanvasCaptureMediaStreamTrack
InputDeviceInfo
MediaDeviceKind
MediaDeviceInfo
MediaDevices
MediaStream
MediaStreamEvent
MediaStreamTrack
MediaStreamTrackEvent
MediaTrackCapabilities
MediaTrackConstraints
MediaTrackSettings
MediaTrackSupportedConstraints
NavigatorUserMedia
NavigatorUserMediaError
OverconstrainedError
URL
イベント
ガイドとチュートリアル
能力と制約と設定の記事では、制約と能力、メディア設定の概念について説明しています。また、制約エクササイザ―を記載しており、コンピューターの A/V 入力機器(ウェブカメラやマイクなど)からの音声と映像のトラックに対して異なる制約集合を適用した結果を試してみることができます。
getUserMedia() による写真の撮影 の記事では、getUserMedia()
を使用して、 getUserMedia()
に対応しているコンピューターや携帯電話のカメラにアクセスし、それで写真を撮る方法を示しています。
ブラウザーの互換性
api.MediaStream
BCD tables only load in the browser
api.MediaStreamTrack
BCD tables only load in the browser
api.MediaDevices
BCD tables only load in the browser
api.MediaDeviceInfo
BCD tables only load in the browser
api.InputDeviceInfo
BCD tables only load in the browser
api.CanvasCaptureMediaStreamTrack
BCD tables only load in the browser
関連情報
- WebRTC - API の入門ページ
mediaDevices.getUserMedia()
- WebRTC による写真の撮影:
getUserMedia()
を用いたデモとチュートリアル