メディアキャプチャとストリーム 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

イベント

• addtrack
• ended
• mute
• overconstrained
• removetrack
• unmute

ガイドとチュートリアル

能力と制約と設定の記事では、制約と能力、メディア設定の概念について説明しています。また、制約エクササイザ―を記載しており、コンピューターの A/V 入力機器（ウェブカメラやマイクなど）からの音声と映像のトラックに対して異なる制約集合を適用した結果を試してみることができます。

getUserMedia() による写真の撮影 の記事では、getUserMedia() を使用して、 getUserMedia() に対応しているコンピューターや携帯電話のカメラにアクセスし、それで写真を撮る方法を示しています。

ブラウザーの互換性

api.MediaStream

Enable JavaScript to view this browser compatibility table.

api.MediaStreamTrack

Enable JavaScript to view this browser compatibility table.

api.MediaDevices

Enable JavaScript to view this browser compatibility table.

api.MediaDeviceInfo

Enable JavaScript to view this browser compatibility table.

api.InputDeviceInfo

Enable JavaScript to view this browser compatibility table.

api.CanvasCaptureMediaStreamTrack

Enable JavaScript to view this browser compatibility table.

関連情報

• WebRTC - API の入門ページ
• mediaDevices.getUserMedia()
• WebRTC による写真の撮影: getUserMedia() を用いたデモとチュートリアル