タグ別アーカイブ: HTML5

HTML5 へのストリーミング! MPEG-DASHでのストリーミングを行う (DRMなし版)

投稿日: 投稿者:
返信

HTML5 Videoエレメントですが、以下の2つが出来ません。

  • ストリーミング配信: つまりライブ配信が出来ません。
  • コンテンツ保護

そのため、ストリーミング配信の実現のため、MPEG-DASH、コンテンツ保護ではCommon Encryptionという仕様がISOにて固まりつつあります。
それらをHTML5の中で処理するために、Media Source Extension (MSE) とEncrypted Media ExtensionsもようやくW3Cにて勧告近くまで来ています。ちなみに、この2つのAPIですが、執筆時点のWebブラウザーですと、以下で動作確認ができます。いずれもPC用です。

  • IE 11 (ただし、Windows 8.1のみ)
    • ファイルフォーマット: ISO Base Media File Format
    • コーデック: H264 / AAC

・Chrome 23以降

いずれも最終系ではなく、フルサポートはまだなのですが、簡単に試す手順について説明をします。
手順以外については、別稿にて。

必要なもの

  • デバイス/Web Browser側
    • Windows 8.1
  • サーバー/配信側
    • Windows Azure Media Services
    • Web Server: 個人的にはWindows Azure WebSite を推奨!!!
  • ビデオファイル

手順

  1. ビデオファイルの用意
  2. MPEG-DASH用にトランスコードと配信設定を行う
  3. HTML5 と JavaScriptの記述
  4. HTML5およびdash.jsファイルの、Webサーバーへのアップロード

それでは、「2」から、見ていきましょう。

MPEG-DASH用にトランスコードと配信設定を行う

Dynamic Packagingを使ってMPEG-DASHのファイルを送信できるようにします。また、APIを使うのではなく、Windows Azure の管理コンソールから作業を行います。

Dynamic Packaging:
http://msdn.microsoft.com/ja-jp/library/jj889436.aspx

ファイルはSmooth Streamingのものを作成します。
MP4でも実装できますが、今日はWindows Azureの管理コンソールから、MPEG-DASH用の配信設定が出来ないためです。Windows Azure Media ServicesのAPIを使う場合は、勿論MP4でも大丈夫です。

Dynamic Packagingを有効にする

具体的には、オンデマンドストリーミングの占有ユニットを、1以上にします。

ファイルをアップロードする。

Windows Azure Media Servicesの管理画面で[コンテンツ]に移動します。
ファイルの一覧が見えますね。

画面下の [アップロード] から、用意したビデオファイルをアップロードします。

Smooth Streaming用のファイルを作成

アップロードしたファイルを「トランスコード」します。

該当ファイルを選択して、画面下の[エンコード] にて [PC/Mac での再生 (Flash/Silverlight を使用) ] を選択します。

トランスコードは、映像ファイルのサイズや長さで待ち時間が異なりますので、ご注意ください。途中経過は [ジョブ] 画面にて確認が出来ます。

配信の設定

[コンテンツ] 画面から、トランスコード後のファイルを選択して [発行] を押します。
これで、プレイヤーが参照するURLが作成されます。

発行後ですが、該当ファイルを選択して、[発行URL] の一番右側にマウスカーソルを持っていくと、その文字列を「コピペ」出来ますので、そちらにて。

MPEG-DASH リファレンス クライアントでの動作確認

MPEG-DASHは、DASH Industry Forumにて仕様が策定されています。その中で、HTML5ブラウザーのみで動作する「リファレンス クライアント」が提供をされていますので、そちらにて作成したMPEG-DASHコンテンツの動作を確認します。

DASH Industry Forum:

http://dashif.org

MPEG-DASH リファレンス クライアント:

http://dashif.org/reference/players/javascript/index.html

Windows 8.1のIE11を起動して、リファレンス クライアントのサイトへ移動します。

先ほどの[発行URL]を、入力し (実際はコピペですが)、最後に以下の文字列を追加します。ここがマジックで、ここがストリーミングサーバー上で処理されているものになります。

(format=mpd-time-csf)

こんな感じです。

[Load] を押すと、再生がされます。

プラグイン不要ですね!

ちなみに、デスクトップ版と、モダンUI版のIE、どちらでも動きます!!! グレートですね。

以下、余談です。

MPEG-DASHは純粋なるHTTP GETリクエストだけで映像ファイルを取得します。要はサーバー側では、HTTP Byte-Rangeリクエストが出来ればいいのです。
つまり、純粋なるVODの場合、ストリーミングサーバーは実は不要です。
ただし、ライブ配信の場合はそうは行きません。ストリーミングサーバーが必須となります。

HTML5とJavaScriptの記述

さて、いよいよHTML5側に入ります。

Dash.js の入手

実は、Dash Industry Forum では、JavaScript のライブラリーを提供してくれています。Dash.js というものです。
これは、Githubにて開発されています。そのライセンスの元、誰でも無料で使う事が出来ます。

GitHubのDash.js :

https://github.com/Dash-Industry-Forum/dash.js

ここでは、そこから、dash.all.js というファイルをダウンロードして使います。

HTML5の記述

サンプルのソースコードは、以下になります。

HTML5 記述サンプル : index.htm

<html>

<head>

<span class=”hiddenSpellError” pre=””>HTML5</span> VIDEO

<script src=”dash.all.js”></script>

<script>

// Videoエレメントの設定と、Dash Playerのアタッチ

function setupVideo() {

var url = “<発行URL>”;

var context = new Dash.di.DashContext();

var player = new MediaPlayer(context);

player.startup();

player.attachView(document.querySelector(“#videoplayer”));

player.attachSource(url);

}

window.addEventListener(“load”, setupVideo, false);

</script>

</head>

<body>

autoplay controls id=”videoplayer” width=”80%” height=”80%”>

</video>

</body>

</html>

ポイントを。
dash.js のMediaPlayer は、HTTP GETリクエストで取得したデータを、Videoエレメントの裏で動いている、SourceBuffer に追加しています。その設定をするだけで、ある程度自動的に処理をしてくれます。

dash.js でのオブジェクト構造などは、また別の機会に。

HTML5およびdash.jsファイルの、Webサーバーへのアップロード

さて、作成したファイルをWebサーバーへアップロードします。

Windows Azure WebSite を使う場合は、こちらのBlog POSTもご参考にしてください。私はLove WebSiteなので(笑)。
ちなみに、WebSiteへFTPでアップロードした場合、こんなディレクトリー構成になります。先のサンプルですと、dash.all.js も一緒にアップロードする必要がありますから、お忘れなく。

さ、アクセスをしてみましょう!

映像の部分を右クリックしてみると、HTML5 Videoエレメントだという事が分かりますね。

これで、皆さんのWebページの画面に、組み込む方法が分かりましたね!!!

楽しんでください!

ご参考:

  • Dash.js関連

Build 2013: Building Media Streaming Apps and Sites Without Plug-Ins Using MPEG-DASHBuilding Media Streaming Apps and Sites Without Plug-Ins Using MPEG-DASHBuilding Media Streaming Apps and Sites Without Plug-Ins Using MPEG-DASH:

http://channel9.msdn.com/Events/Build/2013/3-089

MPEG-DASH Tutorial: Embedding an adaptive streaming video within your HTML5 application – by MS Open Tech:

http://msopentech.com/blog/2014/01/03/streaming_video_player/

  • Windows Azure Media Services

MPEG DASH preview from Windows Azure Media Services – by John Deutscher:

http://blog.johndeutscher.com/2013/06/10/mpeg-dash-preview-from-windows-azure-media-services/

  • Demo

IE Test Drive:

http://ie.microsoft.com/testdrive/HTML5/eme/