Azure Communication Services でビデオチャットアプリを作ると○○分かかる #Azureリレー

こんにちは、佐藤が社内に複数いるのに「佐藤君」と呼ばれる佐藤です。

先日の三木さんの記事を見たときとても面白いなぁと思いました。

面白いなぁ……自分が書いたことにならんかなぁ……

と、いうことで自分もアプリ作成タイムアタック記事を書いてみることにしました。

目的

Azure Communication Services(ACS) を用いたビデオチャットアプリを作ってみます。

ACSは2020年9月23日に発表されたビデオチャットやテキストチャットを容易に作成できるようなクラウドサービスです。

Microsoft よりサンプルも豊富に用意されています。

今回はその中からグループ通話のヒーローサンプルをデプロイしてみようと思います。

リソースを作成する

さっそくタイマースタート!

手始めにリソースグループを作ります。

続いてAzure Communication Servicesのリソースを作ります。

Azure Portal の Marketplace 上では Communication Services という名称なことに注意してください。

頭にAzureを付けると検索に引っかからないです(なぜ)。

US以外のリージョンを選ぶと下に警告がでます(2021/08/04時点)が気にせず進みます。※1

最後に App Service のリソースを作ります。

App Service は Azure が提供するPaaSで、アプリケーションを容易に公開することが可能です。

Marketplace で Web アプリを選択するとWebアプリを公開するのに都合のいい感じで App Service のリソースを作れます。

今回利用するサンプルは .NET Core 3.1 なので選択します。

アプリケーションをデプロイする

ブラウザで「Azure Communication Services サンプル」と検索し、Microsoft Docs のサンプル記事を開きます。

上方にあるコードをダウンロードするという見出しの中にあるGitHubのリンクを開きソースコードのURLを取得します。

Visual Studio Code (VSCode) を開き、F1ボタンを押してコマンドパレットを開きます。

「Git:クローン」を選択し、先ほど取得したサンプルコードの GitHub のURLを入力します。

任意のディレクトリを指定するとそこにサンプルのコピーが出来上がっているはずです。

VSCode が「クローンしたリポジトリを開きますか?」と聞いてきた場合には開くを押します。

聞いてこなかった場合は自分で指定したディレクトリを開いてください。

デフォルトではAzure Communication Services の接続文字列はappsettings.jsonファイルから読み込むことになっていますが、App Serive の方で設定した値を読み込むように変更します。

開いたディレクトリの中の Calling/Contollers/UserTokenController.cs というファイルを開きます。

UserTokenControllerのコンストラクタを編集します。

        public UserTokenController(IConfiguration configuration)
        {
            var config = new ConfigurationBuilder().AddEnvironmentVariables()
                        .AddJsonFile("local.settings.json", true)
                        .Build();
            var connectionString = config.GetConnectionString("ACSConnectionString");
            _client = new CommunicationIdentityClient(connectionString);
        }

4行目の AddJsonFile() の部分は無くてもデプロイは可能です。※2

6行目の config.GetConnectionString() の中にある”ACSConnectionString”という文字列は任意の値です。

後で App Service に登録する名前になるので覚えておきましょう。

VSCode の Azure 拡張からデプロイします。

ちなみにこの時点でのタイムは6分20秒でした。

接続文字列を設定する

VSCode くんがデプロイ作業をしている間に、App Service の方にACSの接続文字列を追加します。

最初にACSの方から接続文字列を取得します。

続いて、 App Service の方の「設定」⇒「構成」から下の方にある「新しい接続文字列」を押します。

名前に先ほどアプリの方に設定した”ACSConnectionString”を入力します。

値にはACSの接続文字列を入力します。

追加したら忘れずに保存ボタンを押しましょう。

アプリを再起動する旨の確認ダイアログが出ますが、VSCode くんはまだ preDeployTask を実行しているので問題ありません。

ここまでのタイムはこちらです。

デプロイされた結果を確認する!

デプロイが完了したら実際にアクセスしてみます。

サンプルが立ち上がっていることが確認できます。

グループ通話に参加するとgroupidが振られたURLになります。

そちらをコピーして別タブで開きます。

二つのタブの自分がいることが確認できました!

動作テストも込みの最終タイムはこちら!

多分これが一番早いと思います。

おわりに

Azure Communication Services はまだ情報が少ないですが、公式のサンプルを動かすだけでも普通に使えるものが出来上がるのが凄いです。

WebRTC を自前で実装するとめちゃくちゃ大変なので、これだけの作業でビデオチャットアプリを作れるのはクラウドのパワーを感じましたね。

補足

※1

ACSには一般的な電話と通話する機能があります。

対象になるのはUSリージョンかつアメリカの電話番号のみなので、US以外のリージョンを選ぶと警告がでます。

※2

AddJsonFile()ではlocal.settings.jsonファイルがあれば読み込んで環境変数に追加しています。

local.settings.jsonファイルを用意することで、App Serviceの構成にある情報を参照できないローカルでも実行することができるようになります。

第二引数にtrueを設定することでlocal.settings.jsonがなくてもエラーを出さずにスルーされるため、デプロイされた環境でも同じコードで動きます。

参考

勤怠管理アプリ作成RTA (テレワーク支援) #PowerPlatformリレー | cloud.config Tech Blog (cloud-config.jp)

Azure Communication Services | Microsoft Docs

Group Calling Hero Sample – An Azure Communication Services sample overview | Microsoft Docs

Azure-Samples/communication-services-web-calling-hero: Hero sample to showcase web calling capabilities for Azure Communication Services (github.com)