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

Derek Herman
Derek Herman
X GitHub
Jaroslav Polakovič
Jaroslav Polakovič
X GitHub

この記事では、より高度なメディアのコンセプトについて説明します。 このコースを終える前に、さまざまなトピックについて ストリーミングのユースケース、プロトコル、拡張機能まずは、 実際のストリーミングとは何かを 説明します

メディア ストリーミングは、1 つのストリーミング形式でメディア コンテンツを配信、再生する あります1 つのファイルを読み込むのではなく、最適化しないと遅くなる可能性があります。 プレーヤーは、ターゲット メディアの状態を記述したマニフェスト ファイルを読み取ります。 データチャンクに分割されますメディア チャンクは後で動的に合成される 異なるビットレートで復元されます。これらのビットレートについては、 説明します。

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

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

メディア チャンクと、ストリームを記述する必要なマニフェストの生成は、 ストリーミングでは、いくつかの興味深いユースケースが <video> 要素を指定するだけでは達成できない 静的ソースファイルのセットに 割り当てることができます次のトピックの ウェブページへのメディアの追加については、後のセクションで説明します。まず、知っておくべきこととして、 ストリーミング マルチメディアのユースケースは限られており、 複数のファイルを <video> 要素に読み込む。

  • アダプティブ ストリーミングでは、メディア チャンクが複数のフォーマットでエンコードされます。 クライアントの要件を満たす最高品質のメディア チャンク、 現在使用可能な帯域幅がメディア プレーヤーに返されます。
  • ライブ配信では、メディア チャンクがエンコードされて、 できます。
  • メディアの挿入: 広告などの他のメディアが挿入される場所です。 プレーヤーでメディアソースを変更せずにストリームをストリーミングできます。

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

ウェブ上で最もよく使用されるストリーミング プロトコルは、 Adaptive Streaming over HTTP（DASH）と HTTP Live Streaming（HLS）があります。 これらのプロトコルをサポートするプレーヤーは、生成されたマニフェスト ファイルを取得します。 どのメディア チャンクをリクエストすればよいかを判断し、それらを組み合わせて 提供できます

<video> を使用したストリームの再生

多くのブラウザでは、ストリームをネイティブで再生できません。他にも HLS 再生のネイティブ サポート。ブラウザは通常、ネイティブ DASH をサポートしません。 ストリーム再生つまり、多くの場合、単に <source> を指定するだけでは不十分です。 <video> 要素をマニフェスト ファイルに追加する必要があります。

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

不足しているように見えるかもしれませんが、実際には偽装の強みです。ストリームは ストリームを消費するアプリケーションによって ニーズは異なります

通常、マニフェスト ファイルには単一メディアの多数のバリエーションが記述されます。他とは違う考え方をする 同じメディアでも異なるビットレートでエンコードされたものが 使用できます。

アプリケーションによっては、バッファに多くの動画を保持したい場合があります。 次の動画から最初の数秒をプリフェッチしてほしいという人もいるでしょう。 アダプティブ ストリーミング用に独自のロジックを実装したいと考えるユーザーもいます。 そのような場合は、なんらかの組み込みブラウザ機能が必要です。 再生用のメディアストリームを生成しています

メディアソース拡張機能

幸いなことに、W3C では Media Source Extensions（MSE）と呼ばれるものが定義されています。 JavaScript がメディア ストリームを生成できるようにします。簡単に言えば、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 ではメディア チャンクを異なる 2 つの形式でエンコードする 使用できます。2016 年には、標準の断片化された MP4（fMP4）ファイルもサポートされるようになりました。 DASH でもサポートされている形式である HLS に追加されました。

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

画質を高め、ファイルサイズを小さくするには、次のいずれかの方法をおすすめします。 VP9 のような効率的な形式を使用して、複数のメディア チャンクのセットをエンコードします。 その前に、Google Chat の機能を 次はウェブ用のメディア ファイルを準備するだけです。