メディア ストリーミングの基本

Derek Herman 氏
Derek Herman
X GitHub
ヤロスラフ・ポラコビッチ
Jaroslav Polakoviwbr 氏
X GitHub

この記事では、メディア ストリーミングのより高度なコンセプトについて説明します。最終的には、さまざまなストリーミングのユースケース、プロトコル、拡張機能を十分に理解する必要があります。まず ストリーミングとは何かを説明します

メディア ストリーミングは、メディア コンテンツを 1 つずつ配信して再生する方法です。プレーヤーは、ネットワーク用に最適化されていない場合に低速になる可能性のある単一のファイルを読み込むのではなく、ターゲット メディアがどのようにデータのチャンクに分割されるかを記述したマニフェスト ファイルを読み取ります。メディア チャンクは後で、異なるビットレートで実行時に動的に合成されます。これについては後で学習します。

ウェブサイトでストリーミングを提供するには、サーバーが Range HTTP リクエスト ヘッダーをサポートする必要があることにご注意ください。Accept-Ranges ヘッダーについて詳しくは、<video> タグと <source> タグの記事をご覧ください。

ストリーミングのユースケース

メディア チャンクやストリームを記述する必要なマニフェストを生成することは一筋縄ではいきませんが、ストリーミングによって、静的なソースファイルのセットを <video> 要素で指すだけでは実現できない、興味深いユースケースがいくつも生まれます。ウェブページにメディアを追加する方法については、後のセクションで説明します。まず、<video> 要素に複数のファイルを読み込むだけでなく、より高度な処理を行いたい場合は、マルチメディア ストリーミングのユースケースをいくつか知っておく必要があります。

  • アダプティブ ストリーミングでは、メディア チャンクが複数のビットレートでエンコードされ、クライアントが現在利用可能な帯域幅に適合する最高品質のメディア チャンクがメディア プレーヤーに返されます。
  • ライブ配信では、メディア チャンクがエンコードされ、リアルタイムで利用できるようになります。
  • メディアの挿入では、プレーヤーがメディアソースを変更せずに、アドバタイズなどの他のメディアをストリームに挿入します。

ストリーミング プロトコル

ウェブ上で最もよく使用されるストリーミング プロトコルは、Dynamic Adaptive Streaming over HTTP（DASH）と HTTP Live Streaming（HLS）の 2 つです。これらのプロトコルをサポートするプレーヤーは、生成されたマニフェスト ファイルを取得し、リクエストするメディア チャンクを特定して、最終的なメディア エクスペリエンスに結合します。

<video> を使用してストリームを再生する

多くのブラウザは、ストリームをネイティブで再生できません。一部のネイティブな HLS 再生サポートはありますが、ブラウザは通常、ネイティブ DASH ストリーム再生をサポートしていません。つまり、<video> 要素の <source> がマニフェスト ファイルを指しているだけでは不十分なことがよくあります。

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

赤字に見えても、実際には変装した強さです。ストリームは強力であり、ストリームを使用するアプリケーションには異なるニーズがあります。

通常、マニフェスト ファイルには単一メディアの多くのバリエーションが記述されます。異なるビットレート、複数の音声トラック、さらには異なる形式でエンコードされた同じメディアを考慮してください。

より多くの動画をバッファに保持するアプリ、次のエピソードから最初の数秒動画をプリフェッチするアプリ、アダプティブ ストリーミングの独自のロジックを実装するアプリなどがあります。その場合は、再生用のメディア ストリームを生成する、なんらかの組み込みのブラウザ機能が必要になりますが、まさにそのような機能があります。

メディアソース拡張機能

幸いなことに、W3C は JavaScript でメディア ストリームを生成できるようにする Media Source Extensions（MSE）と呼ばれるものを定義しました。簡単に言うと、MSE を使用すると、デベロッパーは MediaSource オブジェクトを <video> 要素にアタッチして、MediaSource インスタンスにアタッチされたバッファにポンプされたメディアデータをすべて再生できます。

基本的な例

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

上記の例では、次のことがわかります。

  • <video> に関しては、URL からメディアデータを受信しています。
  • 生成される URL は、単なる MediaSource インスタンスへのポインタです。
  • MediaSource インスタンスは、1 つ以上の SourceBuffer インスタンスを作成します。
  • 次に、fetch などを使用して、バイナリ メディアデータをバッファに追加します。

これらの基本的なコンセプトはシンプルで、DASH および HLS 対応の動画プレーヤーをゼロから作成することは可能ですが、ほとんどのユーザーは、Shaka Player、JW Player、Video.js など、既存の成熟したオープンソース ソリューションのいずれかを選択します。

ただし、Kino という Media PWA のデモを作成しました。このデモでは、シンプルな <video> 要素のみを使用してオフライン メディア再生を提供する独自の基本的なストリーミング メディア ウェブサイトを開発する方法を示します。Google のロードマップには、フレームワークやデジタル著作権管理などの機能をサポートする計画があります。随時最新情報をご確認いただくか、機能をリクエストしてください。 詳しくは、オフライン ストリーミングを使用する PWA をご覧ください。

メディア チャンク形式

長い間、DASH と HLS ではメディア チャンクを異なる形式でエンコードする必要がありました。ただし、2016 年には、DASH もサポートしている HLS に標準の断片化された MP4（fMP4）ファイルのサポートが追加されました。

fMP4 コンテナと H.264 コーデックを使用する動画チャンクは、両方のプロトコルでサポートされており、大多数のプレーヤーで再生可能です。これにより、コンテンツ制作者は動画を一度だけエンコードできるため、時間とディスク容量を節約できます。

品質を向上させ、ファイルサイズを小さくするには、VP9 などのより効率的な形式を使用して、複数のメディア チャンクのセットをエンコードすることをおすすめします。ただし、先に進む前に、ウェブ用にメディア ファイルを準備する方法を知っておく必要があります。次に説明します。