2013年06月18日

IIS Media ServicesとExpression Encoder Pro 4 SP2を使って、iOS向けにライブ配信を実施してみる

このエントリーをはてなブックマークに追加
IIS Media ServicesとExpression Encoder Pro 4を使って、iOSデバイスへのライブストリーミングをやってみました。

今回も自分のWindows7のノートPCを使ってやってみました。環境は以下のとおりです。
・Windows7
・IIS 7.5
・IIS Media Services 4.1
・Expression Encoder Pro 4 SP2

iPhoneでアクセスするためには、当然ながらiPhoneとノートPCが同じネットワーク内にある必要があります。今回は、iPhoneをWiFiでノートPCと同じLAN内に接続させて検証を行っています。なお、このエントリーも下記のMSの英語サイトを和訳した感じです。英語での文章を読むのが苦でない方は、下記を参考にしてください。
http://www.iis.net/learn/media/live-smooth-streaming/apple-http-live-streaming-with-iis-media-services


IISのインストール

まず、PCにIISをインストールする必要があります。またノートPC以外からIISにアクセスさせるためにPCの80番ポートを開けています。Windowsのパーソナルファイアウォールの設定を変更することになりますが、その手順については下記のページなどを参考にしてください。
http://awoni.net/tips/firewall/

IIS Media Services 4.1のインストール

IIS Media Services 4.1を下記サイトよりダウンロードしてインストールします。
http://www.microsoft.com/ja-jp/download/details.aspx?id=27956

Live Streaming 公開ポイントの設定

IS上にライブストリーミングを公開する場所を設定します。
IIS Media ServicesをインストールするとIISマネージャの該当サイトに「Live Streaming公開ポイント」というアイコンができていますので、こちらをクリックします。

PublishPoint001.png


右ペインの「操作」から公開ポイントの「追加」をクリックすると、公開ポイントを新たに追加する画面が表示されます。
PublishPoint003.png
ファイル名には、例えば「LiveStreaming.isml」と入力。タイトルは適宜入力してください。続いて、この画面の「詳細設定」タブをクリックします。
PublishPoint004.png

「最初のクライアント要求で自動的に公開ポイントを開始する」というチェックボックスに必ずチェックを入れてます。ここにチェックを入れないと、後ほどExpression Encoderで公開ポイントにアクセスすることができませんので、チェックを忘れないように。

また、いちばん上の「アーカイブメディア」にチェックを入れておくと、リアルタイムエンコードしたデータをアーカイブデータとしてIIS内で保存してくれます。

続いて、「モバイルデバイス」タブをクリックして、iOS用の設定を行います。
PublishPoint005.png
設定すると言っても、「Appleモバイルデジタルデバイスへの出力を有効にする」チェックボックスを入れるだけなのですが。ただしここのチェックボックスへのチェックを忘れてしまった場合には、iOS向けの映像は配信されず、Smooth Streaming用の映像のみが配信されることとなります。

ここまでの設定が終わると、OKボタンをクリックしてこの画面を終了させてください。

公開ポイントの開始

今作成した公開ポイントをスタートさせます。右ペインの操作から「公開ポイントの開始」リンクをクリックします。下記のように「公開ポイントの状態」一覧の「状態」が「開始中」となれば、公開ポイントは無事に動作していることとなります。
PublishPoint007.png

Expression Encoder Pro 4の前提条件

Expression Encoder Pro 4を利用する際ですが、注意点がいくつかあります。まずオンライン上では無償版があったり、MSDNにもProという名前でありますが、これらはそもそもH264への出力ができません。きちんとした製品版を購入する必要があります。また製品版もサービスパック2をあてている必要があります。こちらはオンラインで無償で手に入れることができます。僕は最初SP2をあてずに実施していたため、iPhoneで再生したところ音声のみで映像は再生されないという現象にけっこうはまってしまいました。

Expression Encoder Pro 4でのライブエンコーディングを設定

Expression Encoderを起動させ、下記の画面が表示されたところで、「ライブブロードキャストプロジェクト」を選択します。
ee4001.png
「ファイルソースの追加」を選択します。PCにカメラがついていて、このカメラで撮影した映像を配信したり、HDMIなどでTVなどと接続してそれらの映像ソースを再生する場合には、「ライブソースの追加」を選択します。今回はPC内にある映像ファイルを再生してWEB上に公開するという検証をするため、「ファイルソースの追加」をクリックして配信対象となる映像ファイルをPC内から選択します。
ee4002.png
ファイルを選択すると、映像ファイルが「ファイルソース」欄に表示されます。(Expression Encoderが読み込むのに、ファイサイズに応じて時間がかかりますので、気長に待ってください。)
ee4003.png
次にライブで配信する映像のプリセットなどを指定します。
ee4005.png
プリセットは今回は「H.264 IISのスムースストリーミング iPhone WiFi」を選択します。また「エンコード」については、
・出力形式:IISのスムースストリーミング
・ビデオ:H.264 - メイン
・オーディオ:AAC-LC
を選択します。

こちらにあるようにExpression EncoderとIIS Media Servicesを使ったライブストリーミングでは、一度マイクロソフトのストリーミング規格である「Smooth Streaming」に一度変換したのち、iOSに対応した形式に変換すると二段階で行うことになります。

続いて、「パブリッシュポイントの設定」を行います。「出力」タブのクリックします。
ee4006.png
「パブリッシュポイント」にチェックを入れて、場所欄に先ほどIISマネージャで作成した「公開ポイント」を指定します。今回の場合は、「http://(ノートPCのIPアドレス)/LiveStreaming.isml」となります。入力後に「接続」ボタンをクリックして、図のように丸印が緑色に表示され、「接続済み」と右端に表示されれば、IIS Media Servicesに接続できたことになります。

続いて映像を配信する最終準備を行います。
ee4007.png
ファイルソース欄に先ほど追加した映像の「キュー」ボタンをクリックします。そののち、メイン画面にある「開始」ボタンをクリックするとライブエンコードが開始されます。
ee4008.png

IISマネージャで配信されているかどうかを確認する

IISマネージャの公開ポイントで下図のように各状態が、開始中となっていればライブエンコード、ライブ配信が無事に実施されているはずです。
PublishPoint011.png

iPhoneで映像再生するためのHTMLファイルを作成する

iPhoneで映像再生を行うために、HTMLファイルを一つ作成します。サンプルのコードを下記に記します。videoタグを利用して映像再生を行います。

映像ソースはIISマネージャで公開ポイントを作成するときに指定した.ismlファイルを指定したのち、「/manifest(format=m3u8-aapl).m3u8」という書式を追加します。こんな書式でいいのかと思う書き方ですが、これで大丈夫です。

ちなみに今回は映像ファイルとこのHTMLファイルは同じディレクトリに配置されていることを前提としています。
<html>
<head>
<title>iPhone live streaming page</title>
</head>
<body>
<h1>Live stream.</h1>

<video width="640"
height="480"
src="LiveStreaming.isml/manifest(format=m3u8-aapl).m3u8"
poster="hogehoge.png"
autoplay="true"
controls="true" >Live</video>
</body>
</html>

iPhone(iOSデバイス)でこのHTMLファイルにアクセスする。

僕のiPhoneでは下記のような感じで映像が再生されました。
iphone_ss.PNG
上部のシークバーを戻すと、現在再生されているシーンではなく巻き戻して見るイメージでも使えますね。

ただライブとは言え、エンコードして配信しているので、リアルタイムにはならないです。僕のPCの非力さもありますが、Expression Encoderでエンコードしている絵とiPhoneで再生されている絵を比較すると20秒程度遅れているようですね。これをインターネット上で展開した場合には、ネットワークの問題などでもっと遅延が発生するかもしれませんが、こんなものと割り切るしかないような気もしています。

posted by motti at 22:46 | スマホ/タブレット | このブログの読者になる | はてなブックマークに追加
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。