この前作成した Azure Media Service を使用したストリーミングサービスを自分のWeb Site に組み込む方法を紹介します。なにかプラグインやれ色々インストールしなくてはいけないのかなーと思ったのですが、まさかの HTML5 Code 貼り付けだけで超簡単でした！

Azure Media Player でライブストリーミングが開始されているか確認する

Azure Media Player のポータルページでストリーミングが開始されているか確認します。私の場合は、Wirecast のモバイルアプリから Azure Media Service の REST サーバーに配信をしています。Azure Media Service のポータルページからも確認することができます。

Azure Media Player から埋め込みコードを取得する

Azure Media Player のデモページで、配信したURLを入力し、Streaming を確認します。
右上い Code というボタンがあるので、それを押すと埋め込む Site の HTML Code ができてます。
そちらを作成した Web Site に埋め込むだけです。

Web App にコードを埋め込む

Azure WebApp の場合は、Azure App Editer というものが用意されており、ブラウザから編集することができます。
今回は千曲川のリアルタイム画像を表示する WebApp を作成し、そこに合わせて Azure Media Service の埋め込みを入れました。

これだけで、Azure WebApps にストリーミングができる iFrame が完成しました。
災害の時など、ある個所の情報を web 経由で配信したいときにはおすすめかもしれません。

参考URL

Azure Media Player
https://amp.azure.net/libs/amp/latest/docs/

Media Services を使用したライブストリーミングの概要
https://docs.microsoft.com/ja-jp/azure/media-services/previous/media-services-manage-channels-overview

Azure Media Service を使用して、災害時でもニーズに合わせ情報を配信できるライブストリーミングサービスを構築する
https://qiita.com/komiyasa/items/08ab6089a12b74fe32f6