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

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

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

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

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

目的

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);
        }