Windows Azure メディアサービスネタその1 〜動画のアップロードと再生〜

現在は Preview 版のWindows Azure メディアサービスを利用してみたので、簡単に内容をまとめてみた。サービス自体とMedia Service SDK 2.0 は Preview 版だが、正式リリース前にまずはどの様に開発するか、味見の意味でもご覧頂きたい。メディアサービスの概要については http://www.windowsazure.com/ja-jp/home/features/media-services/ を参照頂くとして、さっそくメディアサービスを利用した動画アップロード・再生を行いたい。

管理ポータルの操作

まず、管理ポータルからメディアサービスを作成する。メディアサービスの作成までの手順は Xeno's Labo - Windows Azure Media Servicesを使ってみる① を参照していただきたい。
メディアサービス作成後、以下を参考に作成したメディアサービスの「アカウント名」と「サービスアクセスキー(プライマリ、セカンダリどちらでもよい)」をコピーする（これは後ほどアプリケーションから利用する）。

デフォルトではメディアサービスのサービスアクセスキーはメディアサービスに関連付けられたストレージサービスのサービスアクセスキーと異なる点に注意してほしい。

ファイルアップロード用のプロジェクト作成と設定

Visual Studio を起動し、以下を参考にコンソールアプリケーションを作成する。例では MediaConsoleApp1 という名前でアプリケーションを作成している。

次に、NuGetを利用して Media Service SDK の参照を追加する。Visual Studio のメニューから [ツール]-[ライブラリパッケージマネージャ]-[パッケージマネージャコンソール] を選択し、画面下部に表示されるパッケージマネージャコンソールに以下のコマンドを入力する。

PM> Install-Package windowsazure.mediaservices

コマンドが正常に実行されると、以下の様に MediaService の参照がプロジェクトに追加されていることが Visual Studio のソリューションエクスプローラから確認できる。

設定を完了したコンソールアプリケーションに対し、以下のコードを記述する。今回は *.mp4 形式のファイルをアップロードする。

using System;
using System.IO;
using Microsoft.WindowsAzure.MediaServices.Client;

namespace MediaConsoleApp1
{
    class Program
    {
        private readonly static string _accountName = "＜アカウント名＞";
        private readonly static string _accountKey = "＜サービスサクセスキー＞";

        static void Main(string[] args)
        {
            Console.WriteLine("Application Start");
            var startTime = DateTime.Now;

            //MediaService 制御用のコンテキスト作成。ここに数秒の時間がかかる
            var context = new CloudMediaContext(_accountName, _accountKey);
            Console.WriteLine("MediaContext create at {0}", (DateTime.Now - startTime).TotalSeconds);

            //動画の絶対パス。適宜変更すること
            string filePath = @"C:\temp\鍋動画.mp4";

            // アセットのインスタンスを作成、ストレージ暗号化はしない
            var asset = context.Assets.Create("テストのアセット名", AssetCreationOptions.None);

            // ファイル名からアセットファイルを作成する
            var assetFile = asset.AssetFiles.Create(Path.GetFileName(filePath));

            // アップロード進捗を確認するためのハンドラ追加
            assetFile.UploadProgressChanged += AssetFile_UploadProgressChanged;

            Console.WriteLine("upload start");
            //アップロードメソッド、非同期版(UploadAsync)も存在
            assetFile.Upload(filePath);
            Console.WriteLine("upload end");

            Console.ReadLine();
        }

        static void AssetFile_UploadProgressChanged(object sender, UploadProgressChangedEventArgs e)
        {
            //現在のファイルアップロード状況を確認
            Console.WriteLine("★ {0}% uploaded. {1}/{2} bytes", e.Progress, e.BytesUploaded, e.TotalBytes);
        }
    }
}

ファイルアップロード用のアプリケーション実行

アプリケーション実行前、管理ポータルで確認するとメディアサービスのコンテンツは以下のように空となっている。

次に、作成したアプリケーションを Visual Studio から起動してファイルアップロードを実行する。回線速度・動画サイズにもよるが約数十秒で処理が完了し、以下のメッセージがコンソールに出力される。

Application Start
MediaContext create at 3.6504423
upload start
★ 7.95485339095714% uploaded. 1048576/13181588 bytes
★ 15.9097067819143% uploaded. 2097152/13181588 bytes
★ 23.8645601728714% uploaded. 3145728/13181588 bytes
★ 31.8194135638286% uploaded. 4194304/13181588 bytes
★ 39.7742669547857% uploaded. 5242880/13181588 bytes
★ 47.7291203457429% uploaded. 6291456/13181588 bytes
★ 55.6839737367% uploaded. 7340032/13181588 bytes
★ 63.6388271276572% uploaded. 8388608/13181588 bytes
★ 71.5936805186143% uploaded. 9437184/13181588 bytes
★ 79.5485339095714% uploaded. 10485760/13181588 bytes
★ 84.0902932180857% uploaded. 11084436/13181588 bytes
★ 92.0451466090429% uploaded. 12133012/13181588 bytes
★ 100% uploaded. 13181588/13181588 bytes
upload end

アプリケーションの実行後は、管理ポータルを通して動画ファイルの作成を確認できる。

動画ファイルの再生

上記の処理を実施しただけでは動画ファイルは再生できない。今回は管理ポータルを通して（もちろんC#, VB.NETコードでも可能）動画ファイルの「発行」を行い、動画ファイルを再生可能な形で公開する。メディアサービスのコンテンツから作成した動画ファイルを選択し、次の画像を参考に「発行」を実行して動画を公開する。

まず、管理ポータルから「再生」を行う。動画のアップロード・発行がうまく行っていれば以下のように動画が再生される。

次に、HTMLファイルから動画を再生する。以下の画像を参考に、管理ポータルから動画のURIをクリップボードにコピーする。

以下を参考に管理ポータルから取得した動画のURIを利用し、メディアサービスにアップロードした動画を再生可能なHTMLを作成する。

<!DOCTYPE html>
<html>
<head>
    <title>Media Service での動画再生</title>
    <script type="text/javascript">
    </script>
</head>
<body>
    <form id="form1">
    <video style="width:400px;" src="＜管理ポータルから取得した動画のURI＞" preload="auto" autoplay controls>
      <p>動画を再生するにはvideoタグをサポートしたブラウザが必要でごんす</p>
    </video>
    </form>
</body>
</html>