第1回　Windows Azure メディアサービスを使って、HTML5へのストリーミング配信を実現する

はじめに

Windows Azure メディアサービスは、マルチデバイス向けの動画ストリーミングをPaaSという形で提供しています。現在はサポート外ですが、MPEG-DASHというHTML5と大変相性の良い標準仕様にも試していただけます。ここでは、どうやってMPEG-DASH向けの動画配信を行うのか、簡単なサンプルコードを元に説明します。

MPEG-DASHとは?

HTTPを前提にした動画配信の方式では、プログレッシブダウンロードと呼ばれる方式のみがサポートされていました。これは、HTTP GETリクエストに、Byte-Range指定をし、動画ファイルの中から断片的にデータを送信して、再生されるという仕組みです。サーバ側は、一般的なWeb Serverのみで動作します。

ですが、ライブ配信を行うようなストリーミング仕様はありません。また、データ保護の仕組みもありません。

多くの動画配信事業者は、上記2点を実現させるため、SilverlightやFlashをプラグインという形で提供しています。そして、Microsoft、Adobe、Appleなどがベンダ独自のHTTPストリーミング実装をしていました。

MPEG-DASHは、ISOで議論されている、ストリーミング用の動画データの構造になります。データ保護に関しても、同じくISOにてCommon Encryption（CENC）という仕様が議論されています。CENCは、DRMそのものではありませんし仕様と実装が異なりますので、その点はご留意ください。

また、HTML5自身を拡張する形で、Media Source Extensions（MSE）とEncrypt Media Extensions（EME）という仕様がW3Cにて話されています。MSEは、Videoエレメントに動画データを追加させるAPI拡張です。EMEは、DRMシステムを呼び出すためのAPI拡張です。

これらによって、HTML5ブラウザの中でも、ストリーミング配信ができるようになりつつあります。

MPEG-DASH対応Webブラウザ

執筆時点では、IE11（Windows 8.1限定）と、Chrome v23以降で、その動作確認ができます。以下のサイトにて、その動作を試せます。

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

また、DASH Industry Forumというフォーラムにて、具体的な仕様・ガイドラインについて話されていますが、そこではdash.js と呼ばれるJavaScriptベースのプレーヤライブラリも提供されています。

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

設計

プレーヤは、Windows 8.1のIE11を対象にdash.jsを組み込みます。

配信側は、任意の動画ファイルを、Windows Azure メディアサービスを使って、クラウド上でエンコードし、PlayReadyのDRM設定をし、配信時にMPEG-DASHとCENC＋PlayReadyの形式で配信します。

Windows Azure メディアサービスには、Dynamic Packagingという機能が搭載されており、配信時に動的にSmooth StreamingのファイルをMPEG-DASHに変換することができます。コーデックを変換するいわゆるエンコード（トランスコード）はできませんのでご注意ください。

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

一般的に、コーデック変換をトランスコード。ファイル形式の変換をパッケージングと呼んでいます。

事前準備

以下のものを用意します。

動画ファイル：Windows Azure Media Encoderのサポートしているものから選んでください。
Windows Azure アカウント
Visual Studio 2012以降

Media Services SDK for .NET での開発のセットアップ: http://msdn.microsoft.com/ja-jp/library/jj129588.aspx

MPEG-DASH配信環境の準備

まずは配信サーバの用意をします。

Windows Azure メディアサービスアカウントの作成

Windows Azure管理画面の、画面下から、［⁠アプリケーションサービス］―［メディアサービス］―［簡易作成］を選択します。

名前	適切なWindows Azure メディアサービスのアカウント名を設定ください。
リージョン	データセンターの場所になります。
ストレージアカウント	メディアサービスではファイルをBlob ストレージに格納します。そのストレージアカウントを指定します。

数分でアカウントが作成されます。

オリジン占有ユニットの設定

Dynamic Packagingを有効化しないと、MPEG-DASHのデータを送信できません。そのため、［⁠オリジン］にて占有ユニットを1以上に設定します。［⁠オリジン］のタブをクリックします。

右矢印をクリックして、オリジンの設定画面に入ります。［⁠スケール］をクリックして、「⁠1」以上に設定、画面下の［保存］を押してください。

注：ストリーミングの占有ユニットはUTCの日割り計算です。他のWindows Azureサービスに多い、分単位・時間単位の課金ではないので、ご注意ください。

これだけで配信側の用意は整いました。

MPEG-DASHファイルの作成

動画配信のワークフローは直線的です。

インジェスト	クラウドの場合は多くはファイルのアップロード
エンコード	動画ファイルを配信用に変換
パッケージ	DRM設定など
配信	ストリーミングサーバへの設定

ここでは、Visual Studio 2013を使い、一連のワークフローに沿って動画ファイルを作成します。

Visual Studio にてコンソールアプリケーションを選択します。

Windows Azure Media Services .NET SDK Extensionsの組み込み

Visual Studioからは、Windows Azure Media ServicesのSDKが、NuGetから追加できます。ここでは、さらにコーディングを簡略化してくれる、.NET SDK Extensionsを利用します。

ソリューションエクスプローラーの、［⁠参照設定］を右クリックして、［⁠NuGetパッケージの管理］を選択します。

NuGetパッケージの中から、「⁠windowsazure.media」にて検索を行います。執筆日時点では、SDKとSDK Extensionsの2つがヒットします。Extensionsを選択し、［⁠インストール］をクリックします。

参照設定として、Media ServicesのSDKを指定します。

using Microsoft.WindowsAzure.MediaServices.Client;

Windows Azure メディアサービスへの接続

メディアサービスへの接続情報は、CloudMediaContextオブジェクトにて保持しています。

var context = new CloudMediaContext(
            "accountName",
            "accountKey");

最低限、アカウント名と、アカウントキーを設定しますが、それは、Windows Azure管理画面から入手します。

インジェスト

ここでは、単一のファイルをアップロードします。

// ファイルのアップロード
var asset = context.Assets.CreateFromFile(
    @"C:\Users\dahatake\Desktop\azure.wmv",
    AssetCreationOptions.StorageEncrypted,
    (a, p) =>
    {
        Console.WriteLine("  経過 {0}%", p.Progress);
    });

引数は次のようになります。

アップロード対象のファイルパスを直接指定します。
ファイルの暗号化の有無。
アップロード途中経過を、画面に出力するようにしています。

試してみましょう。

Media Services上で管理されている動画ファイルは、[コンテンツ]にて確認できます。

正しく動いていると、ファイルアップロードの途中経過とともに、［⁠コンソール］タブの中に1件ファイルが登録さているのが確認できます。

エンコード

まずは、入力ファイルを、Smooth Streamingのファイル形式にします。

//Smooth Streaming トランスコード + PlayReady DRM パッケージング
var job = context.Jobs.Create(String.Format("DASH_CENC: {0}", asset.Name));
var transcodeTask = job.Tasks.AddNew("AnyFileToSmooth",
    context.MediaProcessors.GetLatestMediaProcessorByName(
    MediaProcessorNames.WindowsAzureMediaEncoder),
    MediaEncoderTaskPresetStrings.H264SmoothStreamingSD4x3,
    TaskOptions.None);

//入力ファイル
transcodeTask.InputAssets.Add(asset);
//出力ファイル
var SmoothOutputAsset = transcodeTask.OutputAssets.AddNew(
    asset.Name + "-Smooth",
    AssetCreationOptions.StorageEncrypted);

Jobの中に、複数のTaskを持てます。Tasks.AddNewメソッドの引数ですが、2番目、3番目はそれぞれ以下の意味を持ちます。

2番目：Windows Azure Media Encoder を設定しています。
3番目：ストリーミング用の設定、つまりタスクプリセットを指定しています。MPEG-DASHとPlayReadyの設定を行う場合は、H264 Smooth Streaming xxx から選択ください。ちなみに現在のIE11ではH.264しか、サポートされていません。

Windows Azure Media Encoder 用のタスクプリセット文字列: http://msdn.microsoft.com/ja-jp/library/jj129582.aspx

パッケージング

続けて、PlayReadyDRMの設定を行います。

// PlayReady へのパッケージング設定
var ExecConfigString = File.ReadAllText(
    @"C:\Demo\WindowsAzureMediaServices\Config\PlayReady Protection.xml");
var PlayReadyTask = job.Tasks.AddNew("PlayReadyPackage",
    context.MediaProcessors.GetLatestMediaProcessorByName(
    MediaProcessorNames.WindowsAzureMediaEncryptor),
        ExecConfigString,
        TaskOptions.None
    );
PlayReadyTask.InputAssets.Add(SmoothOutputAsset);
PlayReadyTask.OutputAssets.AddNew(
    asset.Name + "-PlayReadyDRM",
    AssetCreationOptions.None);

PlayReady DRM設定については、エンコーダと違い、以下のパラメータ設定を使います。

メディアプロセッサ	Windows Azure Media Encryptor
パラメーター	PlayReadyパッケージ用XML文字列

重要な動画ファイルに、PlayReady DRMを設定する際には、そのキーの管理は下記ドキュメントを一読の上、十分注意してください。

あくまで、動作テスト目的という前提で、同じく以下のドキュメントにあるXML文字列をベースに利用します。本番環境で利用する際には、このまま使うことは推奨されませんので十分にご注意ください。

Windows Azure Media Encryptor のタスクプリセット: http://msdn.microsoft.com/ja-jp/library/hh973610.aspx

注目してもらいたい点は、入力ファイルの指定です。先のSmooth Streamingへのエンコード結果を、指定しています。これによって、先のタスクが完了した後で、このタスクが実行されるように直列化されます。

また、出力ファイルは、そのままストリーミング配信をしますので、暗号化設定はしないようにしてください。そもそもDRM暗号化されていますし。

ここまでで、エンコードとパッケージ設定ができましたので、そのジョブを実行します。

// エンコード実行
job.Submit();
job = job.StartExecutionProgressTask(
    j =>
    {
    Console.WriteLine("   状態: {0}", j.State);
    Console.WriteLine("   経過: {0:0.##}%", j.GetOverallProgress());
    },
    System.Threading.CancellationToken.None).Result;

if (job.State == JobState.Error)
{
    Console.WriteLine("エラー発生!!!");
    Console.WriteLine("何かキーを押してください。");
    Console.ReadLine();
    return;
}

var TobeStreamAsset = job.OutputMediaAssets[job.OutputMediaAssets.Count
 - 1];

ジョブの実行状態は、逐次コンソールに出力されます。

配信

配信時には、ストリーミングの種類と、先ほど作成したSmooth Streaming＋PlayReady DRMのファイルを設定します。

// 配信
context.Locators.Create(
    LocatorType.OnDemandOrigin,
    TobeStreamAsset,
    AccessPermissions.Read,
    TimeSpan.FromHours(1));

// URLを出力
Console.Write(
    TobeStreamAsset.GetMpegDashUri().AbsoluteUri);

Console.ReadLine();

さて、これで完了です。

早速すべて実行してみましょう。

エンコードが開始された、［⁠ジョブ］タブにて、個々のジョブの実行経過も確認できます。

すべて完了すると、MPEG-DASHプレーヤに設定するURLが出力されます。

作成されたURLを、Dash Industry Forumのリファレンスクライアントに設定して、映像が流れるか確認をしてください。

http://dashif.org/reference/players/javascript/1.0.0/

PlayReadyのDRMを設定していますから、OSのプリントスクリーンでも、画面キャプチャは取れません。

dash.jsプレーヤの実装

MPEG-DASHのIndustry Forumでは、先にも述べましたが、HTML5＋JavaScriptで使えるdash.jsプレーヤが開発されています。下記サイトから執筆時点の最新版を入手可能です。

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

上記ライブラリをVideoエレメントに設定するコードをJavaScriptにて記述します。なお、執筆時点では、最低限の動作をする実装までで、パフォーマンスチューニングはこれからのようです。

<html>
    <head>
        <title>HTML5 VIDEO</title>
        <script src="dash.all.js"></script>
        <script>
        function setupVideo() {
          var url = "<MPEG-DASH用 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>
        <video controls id="videoplayer" width="80%" height="80%"></video>
    </body>
</html>

ソースコードからもわかるとおり、VideoタグにDashのMediaPlayerの設定をしているだけです。