【Inter BEE 2020 記念】まずはほぼコマンドコピペで作って動かしてみる！ライブ配信のクラウドインフラ入門！

# 今回の目標
下記のアーキテクチャ図にあるようなライブ配信のシステムを（出来るだけ手間をかけずに）作る！
![Azure Media Services (Live)_1s.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/5071daa6-976d-4acf-bd6a-49d23603e9f0.png)

ポイントとしては以下の通り。

* クラウド側の環境はほぼコマンドコピペで作れるようにする
* CDN を使ってちゃんと負荷分散する（このまま本番運用できる形に出来るだけ近く！）
* マルチデバイス対応をする (Windows / Mac / iPhone / Android etc...)

# 手順
## 前提条件
### Azure のサブスクリプションを入手する
まずは Azure のサブスクリプションをどうにかして入手しましょう！
会社で使える方や Visual Studio の特典をお持ちの方はそれで OK です！

もし何も手立てがない方は、一か月限定 & 22500 円まで Azure の機能をタダで使える「無料評価版」がありますので、こちらに登録しましょう！
[Azure 無料評価版 作成ページへのリンクはこちら](https://azure.microsoft.com/ja-jp/free/)

### OBS Studio をインストールする
OBS Studio をインストールしましょう！
[OBS Studio](https://obsproject.com/ja)

### テスト用に流すビデオを用意する
適当なビデオで構いません。
お洒落で著作権フリーなビデオを探すならこういうサイトもあります。
[Mazwai](https://mazwai.com/)

## Azure ポータルでの作業
### まずはポータルへログイン
[Azure ポータル](https://portal.azure.com/) へログインしましょう！

### Cloud Shell を開く
ログインしたら、画面の最上部の検索窓の隣にある ["Cloud Shell"](https://docs.microsoft.com/ja-jp/azure/cloud-shell/overview) を開くボタンを押します。
![スクリーンショット 2020-11-19 075834.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/dc40fa5f-3e64-e30b-efa9-87c0087df262.png)

初回起動時にはシェルの選択画面と内部的に使うストレージの作成の許可を求める画面が出るかもしれませんが、シェルは "Bash" を選択し、ストレージは作成するようにしてください。

ブラウザ下部に下記のような画面が出たら起動成功です！
![スクリーンショット 2020-11-19 080258.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/34d970da-fef7-05b3-d02e-0b5aa46995a7.png)

ここで動作チェックがてら、以下のコマンドを打つと、いま自分が使っているサブスクリプション（Azure 利用契約) が表示されるはずです。

```bash
az account show
```

ここで見知らぬサブスクリプションが出てくる人は、複数サブスクリプション持ちの富豪か Azure 経験者だと思います。
今回実験するサブスクリプションを選ぶには、[このドキュメント](https://qiita.com/kaorunix/items/d226635bff8ddbc339e4) の手順に従い ```az account set ``` を行ってください。

### Bash の変数にこれから作る Media Service の名前などを入れる
下記の Bash コマンドの ```<ここに名前を入れる>``` のところに、適当に今回作る Media Service の名前を入れて、Cloud Shell で実行します。
あとのコマンドの引数の制約の関係で、ここで付ける名前は**アルファベット小文字と数字の組み合わせで15文字程度**にしておくことをお勧めします。（他の文字を入れたり長すぎるとエラーになるかもしれません。）

```bash
NAME=<ここに名前を入れる>
```

例えばこんな感じ。

```
NAME=tokawamediatest
```

上手くいったか気になるときには、以下のコマンドを打ってみると、さっき入れた名前が応答されることで、ちゃんと変数に代入されていることを確認できるはずです。

```
echo $NAME
```

### 早速 Media Service を立ち上げる
この先は、以下のコマンドを順番に Cloud Shell にコピペしては実行していく作業です！

#### まずはリソースグループの作成
これから作るリソースをひとまとめにして管理しやすくするための「箱」を作ります。

```bash
az group create -n ${NAME}-rg -l japaneast
```

#### 動画を保存する先のストレージを作る
Azure Media Services では、ライブ配信をすると自動的にバックアップが取られます。その保存先ストレージをここで作ります。

```bash
az storage account create -n ${NAME}str --kind StorageV2 --sku Standard_LRS -l japaneast -g ${NAME}-rg
```

#### Media Service 本体のアカウントの作成
ここで、Media Service の機能を使うための本体のアカウントの作成です。

```bash
az ams account create --n ${NAME} -g ${NAME}-rg --storage-account ${NAME}str -l japaneast
```

#### ストリーミングエンドポイント（配信用サーバー & CDN）を起動
このコマンド一発で、CDN と統合された配信用サーバーが立ち上がります。

```bash
az ams streaming-endpoint start  -n default -a ${NAME} -g ${NAME}-rg
```

**※注意点**
Media Services アカウント作成直後の場合、内部的なリソース作成が追いついておらず、下記エラーが出る場合があります。その場合に 5 分くらい、コーヒーでもお茶でも飲んでから改めて試してみてください。

```bash
tokawa-ms@Azure:~$ az ams streaming-endpoint start  -n default -a ${NAME} -g ${NAME}-rg
(ResourceNotFound) The Resource 'Microsoft.Media/mediaservices/***/streamingEndpoints/default' under resource group '***-rg' was not found. For more details please go to https://aka.ms/ARMResourceNotFoundFix
```

### ライブ配信用の設定を行う
ライブ配信を行うために、ライブイベントの作成やオンプレミスのエンコーダーの設定を行います。

#### ライブイベントの作成
ライブ配信を行うために必要なクラウド上のリソースである「ライブイベント」を作成します。

```bash
az ams live-event create --account-name ${NAME} --ips "AllowAll" --name ${NAME}event --resource-group ${NAME}-rg --streaming-protocol RTMP --encoding-type Basic --preview-ips "AllowAll"
```

#### ライブイベントの起動
ライブイベントを立ち上げ、OBS の入力を受け付けられるようにします。

```bash
az ams live-event start -a ${NAME} -n ${NAME}event -g ${NAME}-rg
```

出力の中の ```"endpoints"``` 要素を一通りメモします。ここに書いてある RTMP の URL が、OBS に設定する URL となります。
また、同様に出力の中にある ```"preview"``` 要素の中身も全部コピーします。ここに書いてある、manifest で終わる URL は、動画をプレビューするときに使います。

#### OBS Studio を使って動作テスト
OBS Studio を起動し、画面下のソースに「メディアソース」を追加します。
ここに、配信テスト用に用意した mp4 ファイルを設定しましょう。
![2020-11-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/c18da273-2036-dca7-1c61-8a1ffc23af52.png)

「繰り返し」のチェックボックスにチェックを入れておくとずっと同じビデオを再生し続けてくれるので楽だと思います。

続いて、画面右下の「設定」ボタンを押して開いた画面の「配信」タブを開きます。
「サービス」のドロップダウンを「カスタム」に設定し、以下のように情報を入力します。

* 「サーバー」には先ほどメモした "endpoints" 要素の中から、"RTMP://" で始まる URL をどれか一つ選んで入力
* 「ストリームキー」には適当な値 (例 : mystream1)
![2020-11-19 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/ea797c4b-3fac-0812-a3d4-480e6368d778.png)

OK で設定を保存し、元の画面に戻ったら画面右下の方にある「配信開始」ボタンを押すと、Azure Media Service に動画のストリームが開始されます。

#### Preview 動画をチェックしてみる
Azure Media Player を使って、入力した動画がきちんと見られるかチェックしてみます。

まずは [Azure Media Player のサイト](http://ampdemo.azureedge.net/) にアクセスします。
画面中ほどの URL の設定用のテキストボックスに、先ほどライブイベントを作るときにメモした、プレビュー用の URL を入れて "Update Player" ボタンを押します。
![スクリーンショット 2020-11-19 111935.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/a45defe6-df91-8ed3-9c4c-a46898684db0.png)

配信開始直後だとたまにエラーになることもあるので、その場合はページをリロードしたり、Update Player ボタンを再度押したりして試してみてください。
上手くいくと、上のプレイヤーに、自分が OBS Studio から配信している動画が流れるはずです。

### 世界中の人に届けるための設定を行う
最後に、世界中の人がライブ配信している動画を見られるように、CDN で負荷分散された配信用の URL を生成します。

#### アセットの作成
このライブ配信に使う動画のフラグメントデータを保存するために、アセットをまずは作成します。

```bash
az ams asset create -a ${NAME} -n ${NAME}asset -g ${NAME}-rg
```

#### ライブ出力の作成
先ほど作ったライブイベントに入力されている動画と、世界中に配信を行うアセットを紐づけるため、「ライブ出力」を作ります。

```bash
az ams live-output create -a ${NAME} --archive-window-length PT1H --asset-name ${NAME}asset --live-event-name ${NAME}event --name ${NAME}output -g ${NAME}-rg
```

#### ストリーミングロケーターの作成
いよいよ動画を配信するための URL となる、「ストリーミングロケーター」を作成します。

```bash
az ams streaming-locator create -a ${NAME} --asset-name ${NAME}asset --name ${NAME}locator -g ${NAME}-rg --streaming-policy-name Predefined_DownloadAndClearStreaming
```

出来上がったロケーターのパスは以下のコマンドで列挙できます。

```bash
az ams streaming-locator get-paths -a ${NAME} -n ${NAME}locator -g ${NAME}-rg
```

幾つか表示されるロケーターのパスのうち、"manifest" で終わる行をメモしておきましょう。

```
    {
      "encryptionScheme": "NoEncryption",
      "paths": [
        "/af965858-2237-479e-9265-b1887c4bbd9a/8863d1bd-d9bc-4dc1-91cf-d63fbdcab8a4.ism/manifest"
      ],
      "streamingProtocol": "SmoothStreaming"
    }
```


#### 動画再生用の URL の作成
ロケーターのパスと、ストリーミングエンドポイントのベースの URL を組み合わせたものが動画再生用の URL になります。

まずはストリーミングエンドポイントの URL を確認しましょう。

```bash
az ams streaming-endpoint show -a ${NAME} -n default -g ${NAME}-rg
```

出力の "hostName" 行がホスト名を示しています。

```
"hostName": "tokawamediatest-jpea.streaming.media.azure.net"
```

ここまでの情報が整ったら、以下のルールに従って URL を生成します。

* プロトコルはHTTPS
* その次にホスト名をつけて
* 最後にパスをつなぐ

こんなルールですね。

```
https://ホスト名/パス
```

今までの例だとこんな感じです。

```
https://tokawamediatest-jpea.streaming.media.azure.net/af965858-2237-479e-9265-b1887c4bbd9a/8863d1bd-d9bc-4dc1-91cf-d63fbdcab8a4.ism/manifest
```

#### 動画を再生してみましょう！
また [Azure Media Player](https://ampdemo.azureedge.net/) のサイトに移動し、動画を再生してみます。

プレビューの時には、プレビュー用の URL を入れた部分に、今度は直前の手順で作った本番用の配信 URL を入力します。

![スクリーンショット 2020-11-19 114958.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199379/67366e17-4526-e025-8fbf-a7afa7e3c89d.png)

これで動画のライブ配信ができました！
あとは、この配信用 URL をお好みの動画プレイヤーに組み込んだり、サイトに組み込んだりしたら、世界中の人からライブ配信を見てもらえるようになります。

ちなみに、Azure Media Player を使った場合、再生するデバイスによって見られる動画フォーマットが違うことは勝手に吸収してよしなにやってくれます。ですので、Media Player のデモサイトをスマホで開いて同じ URL を指定したら、同じように動画が見られるはずです。

### Azure Media Player のサイトへの組み込み
先ほどの手順で動画のプレビューを行うのに使った Azure Media Player ですが、実はこのコンポーネントは HTML5 / JavaScript で組まれており、みなさまのサイトに手軽に組み込むことも可能です。

組み込み方のドキュメントはこちらにありますので、ライブ配信の視聴用システムを作りたい方は、こちらもご覧ください！
[Azure Media Player ドキュメント](https://amp.azure.net/libs/amp/latest/docs/index.html)

### あとかたづけ！
ここまでに使っていたリソースが残っていると、万が一サブスクリプションの設定で課金可能な設定になっていた場合に意図せぬ課金が発生する場合があります。

是非実験が終わった後には、下記コマンドを打って、今回作ったリソース丸ごと全部削除をすることをお勧めします。

```bash
az group delete --name ${NAME}-rg
```


## まとめ
Azure Media Services を使うと、簡単に動画のライブ配信用のインフラを作れることを体験いただけたかと思います！
昨今、ライブ配信の需要が高まる一方ですが、是非こういった簡単に使える PaaS をうまく活用して、みなさまのビジネスや活動に役立てていただければ幸いです！

## 参考文献
今回の記事を書くのに参考にしたドキュメントはこのあたりです。
[Azure Media Services CLI コマンドリファレンス](https://docs.microsoft.com/ja-jp/cli/azure/ams?view=azure-cli-latest)
[ライブ ストリーミング ワークフロー](https://docs.microsoft.com/ja-jp/azure/media-services/latest/live-streaming-overview)
[Azure Media Services のドキュメント](https://docs.microsoft.com/ja-jp/azure/media-services/latest/)