gihyo.jpサイトのロゴ

キャッチアップ！ Windows Azure メディアサービス

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

2014-02-07

はじめに

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以降で、その動作確認ができます。以下のサイトにて、その動作を試せます。

また、DASH Industry Forumというフォーラムにて、具体的な仕様・ガイドラインについて話されていますが、そこではdash.js と呼ばれる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);
    });

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

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

試してみましょう。

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のリファレンスクライアントに設定して、映像が流れるか確認をしてください。

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

dash.jsプレーヤの実装

MPEG-DASHのIndustry Forumでは、先にも述べましたが、HTML5＋JavaScriptで使えるdash.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の設定をしているだけです。

プレーヤの動作確認

ここでは、作成したHTMLファイルとdash.jsのファイルを、Windows Azure Webサイトにアップロードして、プレーヤ側の動作確認をします。

Webサイトの作成

Windows Azureの管理画面から、［⁠コンピューティング］―［Webサイト］―［簡易作成］から、任意のURLとリージョンを選択して［Webサイトの作成］をクリックします。

数秒で、サイトが使えるようになります。

［ダッシュボード］に進むと、画面右側に[FTPホスト名]があり、リンクがあります。そのリンクをそのままクリックします。

ユーザ名とパスワードを尋ねられます。

ユーザ名は、［⁠デプロイ / FTPユーザー］でいいのですが、パスワードは、Windows Azure WebSite作成時のものを入力します。

Internet ExplorerからもFTPアクセスできます。画面の指示の通り［ALT］キーを押して、［⁠表示］―［エクスプローラーでFTPサイトを開く］をクリックします。

これで、ドラックアンドドロップがやりやすくなりました。

［site］―［wwwroot］に移動し、先のファイルをアップロードしてください。

後はWindows Azure Webサイトにアクセスするだけです。

DRM付きで、HTML5のWebブラウザ向けに動画配信ができているのが確認できます。繰り返しですが、画面のスクリーンキャプチャも取れない点をご確認ください。

まとめ

今回は、DRMを付けてHTML5 Webブラウザへ動画配信をする手順を解説しました。クラウド上で作成したファイルは、もともとSilverlight用ですから、Windows 8を含むSilverlight環境にも同時配信ができます。

Windows Azure メディアサービスを使うことで、現在のプラグインモデルと、仕様が固まりつつあるMPEG-DASHとCENC両方に、非常に簡単かつ柔軟に対応できる事がご理解いただけたのではないかと、思います。

MSDN: Windows Azure メディアサービス
http://msdn.microsoft.com/ja-jp/library/hh973629

Windows Azure Webサイトハンズオン+Wordpress
徹底解説セミナー参加無料！

数クリックで瞬時にWebサイトが構築できるWindows Azureをハンズオンで体験！ 大阪、福岡、仙台開催

URL：http://resocia.jp/skillup/azure/wp/

おすすめ記事

記事・ニュース一覧