iPhone から Azure Media Services のライブストリーミング機能に RTMP でインジェストして、ライブ配信を試してみた。

# この記事に書いてあること
Azure Media Services を利用したライブストリーミングを iPhone からやってみる方法。
# なぜそんなことをしたのか
Azure Media Services のデモをやらなきゃいけなくなったのだけど、簡単にライブストリーミングのデモができるといいなーと思いまして。。。
# テストに必要な環境
・iPhone
　・当方は iPhone 8 Plus を利用
・Edge/Chrome/Firefox/Safari のどれかがインストールされた PC
　・当方は Windows 10 Enterprise / Edge を利用
・Azure のサブスクリプション
# 前置き
とりあえず Azure Media Services のストリーミングエンドポイントやらの設定はすでに終わっている前提 (VOD の配信などはできるところまで準備してある前提) で以下の手順は書きます。
そこがまだの方は、まずは[ここらへん](https://docs.microsoft.com/ja-jp/azure/media-services/previous/media-services-portal-vod-get-started)のチュートリアルを進めてみてください。

# Azure 側の準備
1. Media Services のダッシュボードを開き、メニューから「ライブ ストリーミング」を展開します。
2. 「カスタム作成」のボタンをクリックします。
![Streaming001r.png](https://qiita-image-store.s3.amazonaws.com/0/199379/6c9fb119-19ba-b142-79d6-51454c619049.png)
3. Live Channel の作成を行います。
![Streaming002r.png](https://qiita-image-store.s3.amazonaws.com/0/199379/f12b64c0-2109-f5b8-8d0b-0bc5f94c512e.png)
![Streaming003.png](https://qiita-image-store.s3.amazonaws.com/0/199379/e4e4e525-5487-2dc0-cd36-991f168343ab.png)
![Streaming004.png](https://qiita-image-store.s3.amazonaws.com/0/199379/07e76d29-59a2-16f6-d87a-4ffbe69c2fa6.png)
![Streaming005.png](https://qiita-image-store.s3.amazonaws.com/0/199379/a03a3af2-5bd5-5482-7082-85e2b93e1a56.png)
4. ひとしきり設定が終わったら、「作成」ボタンをクリックしてライブチャンネルを作成します。
![Streaming006.png](https://qiita-image-store.s3.amazonaws.com/0/199379/37ac6cdb-5bcb-bd7d-3292-44e26d9cd7f4.png)

5. 作成したライブチャンネルを開き、「取り込み URL (プライマリ) の内容をメモします。
ここの内容を iPhone 側に設定するので、iPhone でコピペしやすいような形にすると楽です！
![Streaming007.png](https://qiita-image-store.s3.amazonaws.com/0/199379/8787ebbb-ba4d-78e6-da3a-c79a19a91075.png)

6. ライブイベントを作成します。
![Streaming008.png](https://qiita-image-store.s3.amazonaws.com/0/199379/38dee923-b9af-16be-8790-e6b88e12a609.png)

7. のちほど再生のテストを行うときのために、ここにある「ロケーターの URL」をメモします。
![Streaming009.png](https://qiita-image-store.s3.amazonaws.com/0/199379/66123710-f3f4-ee07-36a9-402e9c62bcc3.png)


# iPhone 側の準備
1. ストアから、"Live:Air Solo" をインストールします。
![LiveAirSolo.png](https://qiita-image-store.s3.amazonaws.com/0/199379/67c67584-3468-12dc-3f61-7d86c7923cae.png)
2. 画面左上の「歯車のアイコン」をクリックし、設定画面に入ります。
![IMG_1077-prep.png](https://qiita-image-store.s3.amazonaws.com/0/199379/9546754e-1d3a-1a5c-25f4-d5bfbdc42d02.png)
3. 赤枠で囲った 2 箇所の設定を行います。
![IMG_1073r.png](https://qiita-image-store.s3.amazonaws.com/0/199379/03eba7f0-5f62-7839-5693-5289130bd7cd.png)
4. まずは配信先の設定から。
ここで、先ほどメモした、取り込み先 URL を "URL" フィールドに入力。
Stream 名は任意でつけていただいて構いません。
![IMG_1074r.png](https://qiita-image-store.s3.amazonaws.com/0/199379/5c81a3da-80ee-8421-fbd2-aa89dc6e8ff7.png)
5. ビデオの解像度の設定を行います。
今回は 720p/30fps にしました。
![IMG_1075r.png](https://qiita-image-store.s3.amazonaws.com/0/199379/951a292d-52a2-7b55-25f8-a05c86553541.png)

これで準備完了です！

# 配信！
あとは、iPhone の画面から、右上の "Go Live!" をクリックすれば、（RTMP サーバーの URL や設定が間違っていない限り）配信が始まるはずです！
![IMG_1077_Live.png](https://qiita-image-store.s3.amazonaws.com/0/199379/ae3d5755-cac7-89bf-6af8-38399c28fd47.png)

再生テストを行うのには、[Azure Media Player](https://ampdemo.azureedge.net/azuremediaplayer.html) を使うのがお勧めです。

画面下部の URL 入力用のテキストボックスに、先ほどメモした「ロケーター」の URL のアタマの部分を、"http" から "https" に変更したものを張り付け、"Update Player" ボタンをクリックすると、ライブストリーミング機能で配信中の動画が再生されるはずです！
![Streaming010.png](https://qiita-image-store.s3.amazonaws.com/0/199379/0bfeede8-dc03-f877-4faf-9ae6abdf5fde.png)