HTML5のMediaStreamとは？音声・映像ストリームの基本と実装方法

MediaStreamとは

MediaStreamは、音声や映像など、同期されたメディアのストリームを表すオブジェクトです。WebRTCの中核を担うインターフェースの一つであり、マイクやWebカメラなどのデバイスから取得したデータをJavaScript上で扱うための基盤となります。

MediaStreamは内部に複数の「トラック」を持つ構造になっており、音声トラックと映像トラックをそれぞれ独立して操作できるのが特徴です。

トラックの取得：getAudioTracks() と getVideoTracks()

ストリーム内のトラックには、専用のメソッドを使ってアクセスします。

• 音声トラックがない場合： stream.getAudioTracks() は空の配列を返します。
• Webカメラが接続されている場合： stream.getVideoTracks() は、カメラからの映像ストリームを表す 1つのMediaStreamTrackオブジェクト を含む配列を返します。

この仕組みにより、取得したストリームにどの種類のメディアが含まれているかをプログラム側で柔軟に判定できます。

サンプルコード：マイク入力をそのまま出力する

以下は、getUserMediaで取得した音声ストリームをWeb Audio API経由で出力先につなぐ基本的な例です。

function gotStream(stream) {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    var audioContext = new AudioContext();

    // ストリームからAudioNodeを作成
    var mediaStreamSource = audioContext.createMediaStreamSource(stream);
    
    // destinationに接続すると自分の声が聞こえる
    // または、他のノードに接続してさまざまな処理を行える！
    mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

コードのポイント

• ブラウザ間の互換性対応： window.AudioContext || window.webkitAudioContext により、ベンダープレフィックス付きの古い実装にも対応しています。
• createMediaStreamSource()： 取得したMediaStreamをWeb Audio APIで扱えるAudioNodeに変換します。
• connect(destination)： 出力先（スピーカー）につなぐことで自分の声が聞こえます。エフェクト処理用のノードを挟めば、リアルタイムの音声加工も可能です。

getUserMediaによるストリームの取得

最後の行にある navigator.getUserMedia({audio:true}, gotStream) は、音声のみを要求してマイクへのアクセス許可をユーザーに求める呼び出しです。許可されると、コールバック関数gotStreamにMediaStreamが渡されます。

なお、この旧形式のgetUserMediaは現在では非推奨となっており、最新のブラウザではPromiseベースの navigator.mediaDevices.getUserMedia() を使うことが推奨されています。新しいAPIでは、成功・失敗をasync/awaitやthen/catchで直感的に記述できます。

まとめ

MediaStreamは、音声・映像の同期ストリームを統一的に扱うための重要な概念です。getAudioTracks() や getVideoTracks() でトラックを確認しながら、Web Audio APIやvideo要素と組み合わせることで、録音、通話、ライブ配信など多彩なメディアアプリケーションを構築できます。