タグ別アーカイブ: Azure Application Insight

Azureを使った、シンプルなライブ視聴システムの構築

投稿日: 投稿者:
返信

最近Webinarという名の動画配信形式が使われ始めました。スピーカーがいて、ライブ配信をし、適時質問にも答えていく形ですね。マイクロソフトでも実施をしています。週に1-2度くらいしかやらない場合も多いので、インフラを常時持たない事の出来るAzureが役に立ちます。

Azure Media ServicesもHTML5ベースのPlayerが搭載され、その利用に役に立ちそうですが、幾つか不足している事があります。

  • 視聴者
    • ライブでの質問受付。投稿。話しながらなので、ミリセカンドのリアルタイムでの返答の必要はない。これはSkype for Businessの打ち合わせ中でも、体験できること。
  • サービス提供者
    • 視聴者数の把握。参加者0名ですと、切ないですから。

アイディア

全部作らないといけないか?というと実はそうではなく、Azure の各サービスを見渡すと、以下のサービスが役に立ちます。
いずれも高度な開発ができるプラットフォームですが、ここでは、ビジネスで利用できるための容易に使え、セキュアなPaaSを前提に考えてみます。同時アクセス100名くらいの規模でしたら、大きなシステムを組まなくてもこなせます (絶対ではないですが・・・)。

  • Azure Mobile App
    • https://azure.microsoft.com/ja-jp/services/app-service/mobile/
    • 各種デバイス用のUIと、バックエンドのAPIサービス + データベースとのやり取りを持っています。最初の構築では、「ToDoリスト」を登録するアプリケーションの作成ができるのですが、これはすなわち、「質問投稿」とラベルを変えても利用できます。即時性は無いですが。
  • Visual Studio Application Insight (執筆時点ではプレビューです)

画面構成

画面は、1ページに、以下の構成で作成をしてみます。
この場合は、Azure Mobile Appが作成してくれる「HTML」ページに、Azure Media Playerを加えるだけとなります。勿論、CSSの調整は必要ですが…

構築手順

スイッチャーがあるので、少しデラックスかもしれません。カメラとPC入力があるような場合は、例として下記のようなシステムを組みます。

用意するもの

  • カメラ。マイクですが、カメラの撮影場所ではなく、できたら話している人に近くで音が取れるように。
  • エンコーダー。
  • (おまけ) スイッチャー
  • 映像ケーブル、インターネット接続回線
  • AzureのSubscription (契約ともいいますね)

前日までの準備

  • Azure Mobile Appの作成
  • Application Insightの作成
  • Azure Media Servicesのアカウント作成。
  • ライブ配信用の「チャネル」作成。
  • HTMLページの編集。Azure Media Servicesと、Application Insightの連携
  • Azure Web Appの作成。上記のHTML5のホスティング
  • Azure Media Servicesでのライブ配信確認

そして、実は一番苦労するのが…

  • 収録システムの構築。カメラの台数を慎重に考えてください。1台のカメラで撮影するだけなら簡単です。PCの画面出力もあって複数となると、その切り替え、カメラ映像の一部にスライドを入れるPicture in Picture など、考慮が必要です… これは経験が必要!

本番当日

  • Azure Web App、Mobile App、SQL Databaseのキャパシティを本番用に。
  • Azure Media Servicesの本番設定。

さて、ここから実際の構築手順を見ていきます。

前日までの準備: 実際の手順

  1. Azure Mobile Appの作成

こちらの手順に従って[HTML5アプリ]を作成してください。
https://azure.microsoft.com/ja-jp/documentation/articles/app-service-mobile-dotnet-backend-html-get-started-preview/

途中、Visual Studioで変更設定を行います。Windowsをお持ちでない方は、Azure上にVisual Studioインストール済みの仮想マシンがありますので、そちらをご利用ください。

  1. Application Insightの作成

こちらも手順通りで作成してください。HTML 1ページですから、[Webページ]のものになります。
実作業が、JavaScriptのコードのコピーアンドペーストだけになります。
https://azure.microsoft.com/ja-jp/documentation/articles/app-insights-javascript/

  1. Azure Media Servicesの作成

同じく、以下を参考に作成してください。
https://azure.microsoft.com/ja-jp/documentation/articles/media-services-create-account/

  1. ライブ用のチャネルを作成

Azure Media Servicesでは、2つの種類のチャネルを用意しています。
作成して[開始]すると、課金されますので、そのタイミングは注意してください。

料金がかなり異なります。ライブエンコーダーは、画質をあげたくて、オンプレミスのエンコーダーの能力があまり無い時に使ってください。視聴端末にPCがある場合は、コストパフォーマンスを考えると高いと思われますが、ライブエンコーダーがお勧めです。視聴者に画面の文字等がきちんと映るように。

料金の詳細はこちらの[ライブ ビデオ]を参照してください。
https://azure.microsoft.com/ja-jp/pricing/details/media-services/

通常のチャネル:    約100円 / 1時間

ライブエンコーダー:    約4,000円 / 1時間

上記を考慮した上で、チャネルを作成します。

通常のチャネル:    https://azure.microsoft.com/ja-jp/documentation/articles/media-services-manage-channels-overview/

ライブエンコーダー:    https://azure.microsoft.com/ja-jp/documentation/articles/media-services-portal-creating-live-encoder-enabled-channel/

  1. HTMLページの編集

Azure Mobile AppのHTMLをベースにします。Azure Media Playerの文字列を以下より取得して作成します。

Azure Media Player のドキュメント (英語):    http://amp.azure.net/libs/amp/latest/docs/

こちらの[Quick Start]にある、以下の2つを行います。

  • Js/css ライブラリへの参照
  • videoタグへの設定

そして、Application InsightのJava Script文字列も取得します。

以下、サンプルのHTMLです。

———————————————————————————————-

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<meta http-equiv=”Pragma” content=”no-cache” />

<meta http-equiv=”Cache-Control” content=”no-cache” />

<meta http-equiv=”Expires” content=”Thu, 01 Dec 1994 16:00:00 GMT” />

<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ />

<title>タイトル</title>

<link rel=”stylesheet” href=”styles.css” />

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

<!–[if lt IE 9]>https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js<![endif]–>

<link href=”//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css” rel=”stylesheet”>

//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js

http://smartRollover.js

</head>

<body>

タイトル

    autoplay controls width=”760px” height=”400″ align=”center”poster=”images/img_01.jpg” data-setup='{“nativeControlsForTouch”: false,

“language”:”ja”}’>

To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video

    コメントの追加

    </form>

    <p id=”summary”>読み込み中…</p>

    </article>

    </div>

    <footer> <a href=”http://www.windowsazure.com/en-us/develop/mobile/”&gt; Learn more about Microsoft Azure Mobile Services </a>

    <ul id=”errorlog”>

    </ul>

    </footer>

    </div>

    https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js

    http://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.2.5.min.js

    http://page.js

    <!–

    アプリケーションに関するエンド ユーザーの利用状況分析を収集するには、

    追跡する各ページに以下のスクリプトを挿入します。

    このコードを、終了 </head> タグの直前と、

    andその他のすべてのスクリプトの前に配置します。最初のデータが数秒後に

    自動的に表示されます。

    –>

    var appInsights=window.appInsights||function(config){

    function r(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o=”script”,s=u.createElement(o),i,f;for(s.src=config.url||”//az416426.vo.msecnd.net/scripts/a/ai.0.js”,u.getElementsByTagName(o)[0].parentNode.appendChild(s),t.cookie=u.cookie,t.queue=[],i=[“Event”,”Exception”,”Metric”,”PageView”,”Trace”];i.length;)r(“track”+i.pop());return r(“setAuthenticatedUserContext”),r(“clearAuthenticatedUserContext”),config.disableExceptionTracking||(i=”onerror”,r(“_”+i),f=e[i],e[i]=function(config,r,u,e,o){var s=f&&f(config,r,u,e,o);return s!==!0&&t[“_”+i](config,r,u,e,o),s}),t

    }({

    instrumentationKey:”fa12e109-658e-4b57-b60e-76d064e7a878”

    });

    window.appInsights=appInsights;

    appInsights.trackPageView();

    </body>

    </html>

    ———————————————————————————————-

    1. Azure Web Appの作成

    作成した、HTMLファイルをホスティングします。
    方法はいくつかありますが、ここではFTPアップロードの手順と、Visual Studio “Monaco”の方法を提示します。

    FTP upload:
    https://daiyuhatakeyama.wordpress.com/2013/11/25/windows-azure-website-%e3%81%b8%e3%81%aephp%e3%82%a2%e3%83%97%e3%83%aa%e3%82%b1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e4%bd%9c%e6%88%90%e6%89%8b%e9%a0%86/

    [de:code 2014] Visual Studio Online “Monaco” の全貌 ～ あのエリック・ガンマが作った最新開発環境のすべて ～

    https://channel9.msdn.com/events/de-code/2014/TL-009

    さて、ここまで来ると視聴ページができて、Mobileサービスを使った投稿の動作確認もできていると思います。

    よくある問題:

    ・Mobile Servicesで投稿ができない

    CROSの設定をしてください。具体的には、Azure Web Appでページホスティングをしていますので、「*.azurewebsite.net 」の様に指定をします。

    1. Azure Media Servicesでのライブ配信確認

    収録システムで、実際にライブ配信ができているか、確認を行います。
    先のAzure Media Servicesでのチャネル作成の手順の最後でも良いですし、以下も参考にしてください。

    https://daiyuhatakeyama.wordpress.com/2014/09/11/azure-media-services-live-streaming-%e3%81%aa%e3%81%a9%e3%81%8cpublic-preview%e3%81%ab%e3%81%aa%e3%82%8a%e3%81%be%e3%81%97%e3%81%9f/

    無事に映像が出ていれば、OKです。

    当日朝の作業

    1. Azure Web App、Mobile App、SQL Databaseのキャパシティを本番用に。

    いずれも、「無料」モードですと、アクセスできる数に上限があります。スケーリング設定を行いましょう。

    Azure Web App、Mobile App:

    https://azure.microsoft.com/ja-jp/documentation/articles/web-sites-scale/

    Webの高速化には、Redis Cacheも併用を。今回の規模では不要だと思います。

    https://azure.microsoft.com/ja-jp/documentation/services/redis-cache/

    SQL Database:
    https://azure.microsoft.com/ja-jp/documentation/articles/sql-database-scale-up/

    データ量も、同時書き込みも多くなる場合には、こちらをご参考にしてください。
    Azure SQL データベースのパフォーマンス ガイダンス: https://msdn.microsoft.com/library/azure/dn369873.aspx

    1. Azure Media Servicesの本番設定

    Streaming Unitの数を2以上にし (念のため、です)、Streaming Unit上でのCDNを有効化します。設定完了に90分はかかりますので、前日には設定完了している事が望ましいです。
    https://azure.microsoft.com/ja-jp/documentation/articles/media-services-manage-origins/#enable_cdn

    実際のライブ配信時には、手順の指さし確認が大事です。以下大まかなものですが、ご参考にしてください。

    Azure Media Servicesを使ったライブ配信ご参考:

    < https://channel9.msdn.com/Events/de-code/decode-2015/DEV-014>

    サンプルコード

    ここまでお読みいただけるとご理解いただけると思いますが、大したものはありません…

    https://github.com/dahatake/Azure-Media-Services-Samples

    今後について

    今回は手順をドキュメントとしてご紹介しました。これが、何度か実際に行えて手順としての妥当性確認が終わると、今度は「自動化」という事につながります。現在、Azureのインフラは、Azure Resource Managerベースに置き換えられていっていますが、Azure Mobile App、Azure Media Services、Application Insightがその対応を終えると、この手順はテンプレートから実施、という道が見えてきます。パラメーターセットを都度行うだけですね。

    お時間あれば、ご一読ください。

    Azure Resource Managerの概要: https://azure.microsoft.com/ja-jp/documentation/articles/resource-group-overview/

    Azure Resource Managerの本質とhow: https://docs.com/user313939/1c4aec6f-3d43-48e5-b839-51f4f6124155/azure-resource-manager-how