はじめに
合同会社DMM.comでフロントエンドエンジニアとして動画配信サービスの開発をしている今西（@nisshii0313）です。
アルバイト等を経て2021年に新卒で入社して以降、DMM TVをはじめとする動画配信サービスのフロントエンド（主に再生プレイヤー部分）の開発に携わってきました。他にも、社外向けのフロントエンドの勉強会である「Think ! FrontEnd」の主催も行っています。
今回は「MSE/EME」を利用した、Webブラウザ上での動画再生について解説していきます。
MSEについて
前回の記事では、hls.jsを使ってHLS（HTTP Live Streaming）を再生し、最適なビットレートがユーザーに提供されている（Adaptive Bit Rate、ABR）ことを確認しました。その際にhls.js経由で使用していた動画再生にまつわるWeb APIがMSE（Media Source Extentions）になります。
video要素にsrc属性としてファイルを渡すことで動画は再生できますが、断片的なチャンクファイルが次々に流れてくる以上、ファイルごとにsrc属性を逐一切り替えて再生させるのは現実的ではありません。なぜなら、再生が途切れたり、再生位置の管理が複雑になったりと、シームレスなストリーミング体験を実現するのが困難になるためです。
実は、video要素はsrc属性にURLを受け付ける以外に、Media Provider Objectと呼ばれるメディアリソースを表すオブジェクトを扱うこともできます。その中には、MSEのMediaSourceオブジェクトも含まれます。
MediaSourceオブジェクトはSourceBufferというチャンクを格納（appendBuffer）する機構を持っています。つまり、チャンクファイルを元にMediaSourceオブジェクトを生成してvideo要素に流し込むことで、src属性の書き換えを行うことなく動画の再生が可能になります。また、チャンク単位で再生する際に、ユーザーに流れるファイルサイズをモニタリングすることで帯域幅を推測し、前章で紹介したABRを実現しています。
このようにMSEは強力ですが、チャンクのダウンロード管理、帯域幅の推定、適切なタイミングでのバッファへのデータ追加などを手動で行うのは非常に複雑です。とはいえ、我々が直接MSEのAPIにアクセスすることは少なく、前回の記事で使ったhls.jsやShaka Playerといったストリーミングクライアントライブラリを通して使うことが多いです。
前回の記事で使用したように、プレイリストファイルを渡すだけで以降の処理を行ってくれます。
