【爆速】Azure Communication Services を早速試してみた！

Ignite で Azure Communication Service が発表されました。果たしてどんなことができるのか、、。プレビュー版としてリソースが公開されていたので、これを使って早速試してみたいと思います！
【9/28更新】Chat機能も試してみました -> [Azure Communication Services を使ってみた！(Chat編)](https://qiita.com/komiyasa/items/d34fd97d7e32b6f5a230)
#Azure Communication Services
Azure Communication Services の概要ですが、こちらの YouTube 動画が参考になります。
https://www.youtube.com/watch?v=49oshhgY6UQ
動画の中ではチャットからビデオ通話で問い合わせをするようなデモがありました。チャットやビデオ通話を様々なプラットフォームで動かすためのサービスみたいですね。これは便利そうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/3646b80e-be9a-553d-aff5-bcf9373e2bdc.png)
早速試して見ましょう！

#Azure Communication Services のリソースデプロイ
まずは Azure Communications Service のページにアクセスしてください。
https://azure.microsoft.com/ja-jp/services/communication-services/
Azure にログインしている状態で、`Get Started` ボタンをクリックすると、Azure Portal のリソース作成のページにジャンプします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/06ba07c5-d6ce-70d5-ac86-c8b836714208.png)
リソースを作成するサブスクリプションを選択し、リソースグループ名、リソース名を入力してリソースを作成します。プレビュー版のため、データロケーションは US しか選べないのは注意が必要です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/d5c79a94-fdfe-1dd5-821a-1c110ba15789.png)
1分くらいでリソースの作成は完了しました。作成したリソースの `Key` の中の、`Connection String` をメモ帳などにコピペしておきます。(あとでアプリ側の Application Setting に値を入力します。) Key 丸見えですが、既に削除したリソースなのでご了承ください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/55726ce0-68b0-b374-ecda-9d82ccf9c7f0.png)
ここまででリソースの作成と準備は完了です。非常に簡単でした！

#サンプルコード
今回は以下 GitHub のサンプルコードを使いたいと思います。
https://github.com/Azure/Communication/tree/master/samples/Group%20Calling%20Hero%20Sample/Web/Calling
`Git Clone` で自身のローカルディレクトリにコードをクローンし、プロジェクトを Visual Studio 2019 で開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/e75ab49f-04ca-81db-286a-5e630f43ac0b.png)
`appsettings.json` を開き、`ResourceConnectionString` の値を先ほどコピペした `Connection Strings` に置き換えます。

```appsettings.json
{
  "Logging": {
    "LogLevel": {
      "Default": "Trace",
      "System": "Information",
      "Microsoft": "Information"
    }
  },
  "AllowedHosts": "*",
  "ResourceConnectionString": "ここを Connection String を置き換える！"
}
```
プロジェクトをビルドすると、以下のような画面が立ち上がります。ここまでできればソースコードの準備は完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/b39a83b6-f4ed-b7e2-3e20-e205e6630c3a.png)

#実際に動かしてみる
実際に Web アプリとしてビデオ通話アプリを動かしてみたいので、リソースを Azure App Service にデプロイします。
##App Service のデプロイ
ここでは Visual Studio 2019 からプロジェクトを選択し、Azure App Service に発行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/30c7102c-4eac-77fb-496a-990a601849fc.png)
発行する際、既にある Web App を使用しても良いですがせっかくなので新しいリソースを作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/14e7e289-721c-68c2-5ca3-0eda774ad3c6.png)
ここで発行を選択する前に、App Service の Application Setting の値を編集します。
##App Service の Application Settings の設定
App Service の Setting の値を設定するために、Azure Portal から App Service にアクセスします。左側のメニューの `構成` で、アプリケーション設定を追加します。名前は `RecourceConnectionString` で値には Connection String の値を挿入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/11ed44b5-86af-95f7-aa4f-e89489506943.png)
ここまで設定したら Visual Studio から発行をします。
##使ってみる！
発行が無事終わったら Web App の URL にアクセスします。すると以下のような画面が出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/44e9ab9a-0991-6ad5-8dcf-595138a1a360.png)
`Start Call` ボタンをクリックすると、なにやらビデオ通話画面のようなものが立ち上がりました。これがいわゆる「チャット部屋」のようなものですかね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/04f57f2f-557f-7aac-2cf9-5260345f2c1b.png)
ビデオをオンにして入ってみると、Teams 通話で待機をするような画面が立ち上がりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/4d5836f8-66f2-616d-cbc4-9fbf45ffb84a.png)
ユーザーをもう一人追加するために、上の人を招待するっぽいボタンからインバイト URL をコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/e26fc039-49dd-4044-875a-72853c0b52d8.png)
これを招待するユーザーにテキストメッセージで送り、リンクをクリックしてもらうことで会議に参加してもらうことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/0d5e9be8-9092-9a33-1d01-dc8086f0be3c.png)
モバイルのブラウザからも参加させることができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/9fccafbc-6bfe-4d08-cb79-e62164db3924.png)
今回使用したサンプルはチャット機能を除いたものですが、こんなに簡単にビデオ通話ができる Web アプリを作成できるとは思いませんでした。控えめに言って最高！

#わかったこと
##ビデオ通話アプリを構築する際に非常に便利
ビデオ通話アプリをさくっと作成するには非常に便利なサービスかと思いました。また既存の Web サービスやアプリにビデオ通話機能を追加させたい時にも役立ちそうです。チャットボットとか問い合わせを AI で受けきれなくなったらビデオ通話に誘導するとか、活用できるシナリオはたくさんありそうですね。
##価格はそんなに高くない？
気になるお値段ですが、Microsoft の Docs によると以下のような価格設定になっています。
https://azure.microsoft.com/en-in/pricing/details/communication-services/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/186718f3-8303-06da-8082-050a90de35de.png)
プレビュー版なのであくまで参考価格となりますが、ビデオ通話だと、1分間0.4円ですね。
例えば問い合わせビデオ通話アプリを作成するとして、ユーザー一人当たり10分という計算、かつ1日に100件ほどの問い合わせがあると想定すると、1日あたり400円、1か月で12000円、そんなに高いわけではないのかな？と思いました。(今回のサンプルで使用した Web App の価格は抜いてあります。)
##今後の発展に期待！
Microsoft が開発している Communication Service なので様々な AI プロダクトとの連携が期待できます。例えば Speech Service と連携した文字お越しサービスや、Text Analytics と連携させて感情分析ビデオ通話アプリ、さらには Transfer と連携させて同時翻訳通話などなど、今後色々発展形がでてくるのではないでしょうか！今後に期待できるプロダクトだと思います！