dash.js で CORS に苦戦するの巻

投稿者: | 2017年7月3日

概要

  • MPEG-DASH ストリーミングのプレイヤー dash.js を試しに使ってみた
  • 軽い気持ちでいたら CORS が立ちはだかって勉強になりましたというお話

MPEG-DASH

MPEG-DASH とは

MPEG-DASH (Dynamic Adaptive Streaming over HTTP) は名前の通り、

HTTP 上で、ストリーミング配信を行う規格の一種で、

動的にコンテンツのビットレート等を切り替えることができる仕組みを持っています。

仕組み

MPEG-DASH では、動画の配信サーバーは「動画ファイル」と「メタ情報ファイル」のセットで、

一つのストリーミングコンテンツを保持します。

 

「動画ファイル」は動画の中身で、複数の異なる解像度のものが容易されたり、

一本の動画が複数のセグメントに分割されています。

「メタ情報ファイル」は MPD (Media Presentation Description) ファイルと呼ばれ、

その動画に用意されている解像度やビットレート、セグメントの位置等、

動画全体の情報が格納されています。

 

動画を再生する場合は、再生プレイヤーがまず MPD ファイルを配信サーバーからダウンロードします。

そして、MPD に記載されている順に、動画のセグメントを次々と要求し、

ダウンロードしたセグメントを再生していきます。

途中で、解像度などを切り替える場合は、この要求を変更することで、

配信サーバーから送られてくるセグメントの解像度が切り替わります。

 

dash.js

dash.js とは

MPEG-DASH では、配信サーバーは要求されたセグメントをそのまま配信するだけなので、

特別な機能は必要なく、通常の HTTP サーバーを使うことができます。

再生プレイヤー側では、MPD を見ながら、適切なタイミングで、

適切なセグメントの要求を配信サーバーに出さないといけません。

そのような再生プレイヤーが JavaScript で実装されたものが dash.js です。

 

サンプルを動かしてみる

dash.js のサイト:  https://github.com/Dash-Industry-Forum/dash.js では、

HTML のサンプルが公開されております。

そのサンプルプレイヤーでは、CDN 上に置かれた動画を参照しており、

MP4 のような動画ファイルそのものではなく、

メタファイル MPD を指定することで、動画を再生できることが分かります。

 

図を描くと上のようになります。

まず、ユーザーはブラウザーから再生プレイヤーの含まれた

HTML ファイルをダウンロードします。

そして、再生プレイヤーに組み込まれている MPD ファイルの URL を辿り、

MPD ファイルをダウンロードし、MPD ファイルに従って、

動画の連続再生を開始します。

 

自前の動画を再生してみる

サンプルが動かしてみたら、当然、次は自前の動画を再生してみたくなります。

そのためには、

  1. MPD ファイルを作る
  2. 動画サーバーを用意する

ことが必要になります。

 

MPD ファイルは、GPAC:https://gpac.wp.imt.fr/ に含まれている

MP4Box を用いることで生成できます。

MP4Box -dash 1000 -rap movie.mp4

上のコマンドは、元の動画ファイルを 1000 [ms] 間隔でセグメントに分割した

動画ファイルと、MPD ファイルを生成します。

 

次に、動画ファイルと MDP ファイルを提供する動画サーバーを用意すればいいのですが、

これは通常の HTTP サーバーでいいので、

python の SimpleHTTPServer などが使えます。

 

が、私は、ここで無駄につまづきました。

 

CORS (Cross-Origin Resource Sharing)

上に載せた図を見ると分かる通り、

再生プレイヤーのスクリプトを提供する HTTP サーバーと、

動画ファイル、MPDファイルを提供する HTTP サーバーがあります。

 

すると、ブラウザーは、2つの HTTP サーバーからコンテンツを持ってきて、

動画の表示を行うことになります。

 

この時に問題となるのが CORS です。

 

Same-Origin-Policy

Web のセキュリティー上のポリシーとして、

Same-Origin-Policy と呼ばれるものがあります。

(私も勉強不足で今まで知らなかったのですが。。。)

 

これは簡単に言うと、ブラウザーに同時に表示するコンテンツは、

同じ生成元で生成されたコンテンツのみにしましょうというものです。

 

今の場合、再生プレイヤーのスクリプトをダウンロードしてきたサーバーと、

動画サーバーが異なるサーバーなので、この制限に引っかかります。

 

ただし、すべてのコンテンツに対してこの制限を取っているわけではなく、

画像などは、別のサイトの画像であっても、制限されていないように思います。

 

MPDファイルは XML ファイルなのですが、この XML ファイルが実は、

Same-Origin-Policy の制限の対象となっているようです。

 

このため、再生プレイヤーは表示されるのですが、

動画を読み込むところでエラーが生じてしまいました。

 

CORS

Same-Origin-Policy の制限を回避して、

異なる生成元であっても、コンテンツの取得を可能と方法として、

CORS と呼ばれる方法があるようです。

 

これは、コンテンツを取得されるサーバー側から、

生成元が異なっても良いという許可を、

HTTP ヘッダーに追加するというものです。

 

一時的な解決方法

CORS で対応するのが、おそらく正しいと思うのですが、

まだまだ勉強不足で、上手く動かすことができませんでした。

そこで、すぐに実行できる一時的な解決策に走りました。

 

問題だったのは、2つのHTTPサーバーがあることなので、

1つにまとめてしまえば解決します。

 

つまり、再生プレイヤーの HTTP サーバーが、

動画サーバーとして働くというものです。

YouTube が動画プレイヤーを提供して、

動画も提供するようなものなので、むしろこっちの方が自然かもしれません。。

 

やり方は、単純で、MPD ファイルと再生プレイヤーを同じ HTTP サーバーに置き、

再生プレイヤーからは、相対パスで MPD ファイルを指定するだけです。

var url = “video/typing_dash.mpd“;
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector(“#videoPlayer”), url, true);

これで、動画が再生されるようになり、一応形になりました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です