🙆‍♀️

【爆速構築】Azure Communication Services でビデオ通話アプリを10分で作ってみた

5 min read

Azure Communication Services とは?

Azure Communication Services は、2020年9月23日に発表された音声、ビデオ、チャット、電話等をアプリに簡単に追加できるクラウドベースの通信サービスです。

  • Microsoft Teamsと同じ信頼性とセキュリティが担保されたインフラストラクチャーを採用
  • クラウド側は特に何もコードを書かずに、アプリにTeamsのコミュニケーション機能のような機能を追加できます。
  • 電話番号を利用したSMSや通話も利用可能(現在はアメリカ限定)
  • 開発できるプラットフォームはWebブラウザ,Android,iOS,Windows
  • 対応開発言語はC#,Java,JavaScript,Python

詳細は[公式ドキュメントへ](Azure Communication Services とは)

Azure Communication Serviceの価格

公式ドキュメントを見ましたがよくわからない…

https://docs.microsoft.com/ja-jp/azure/communication-services/concepts/pricing

こちらの価格ページを見ると日本円では算出できないのでドル表示で見てみると以下の通りです。目安程度ですね。

音声およびビデオ通話 - オーバー IP:$0.004/ユーザー (分)
→60分で0.24ドル(26円ぐらい)

チャット:$0.0008/ユーザー メッセージ
→100メッセージで0.08ドル(9円ぐらい)

ビデオ通話アプリ構築にあたって使うサービス

  • Azure Communication Services
  • Azure App Service
    • インフラストラクチャを管理することなくWeb アプリや API を条件に合わせて迅速に構築、デプロイ、スケーリングできるPaaS。静的なHTMLを配置するだけの単純なWebサイトから、任意の言語で開発したWebアプリの実行環境まで柔軟に対応できます。
  • グループ通話のヒーローサンプル(Microsoftが提供するサンプルのWebアプリ)
  • https://docs.microsoft.com/ja-jp/azure/communication-services/samples/calling-hero-sample?pivots=platform-web

構築の概要

以下の3ステップで構築します。↑の概要図はテキストチャットの内容ですが今回はグループのビデオ通話で構築します。
1.Azure Communication Servicesをデプロイ
2.Azure App Serviceをデプロイ
3.Video Web AppをAzure App Serviceにデプロイ

↑の3ステップはGithubの「Deploy to Azure」ボタンでワンクリックで終わりますので、お急ぎの方はこちらをクリックしてみてください。

Azure Communication Servicesをデプロイ

Azure Portalで「communication service」を検索。「Azure communication service」で検索するとなぜか出てこないので注意。

デプロイは数分で完了します。完了したらAzure Communication Serviceの「キー」の画面で接続文字列を確認。(この接続文字列はアプリ側で使います)

Azure App Servicesをデプロイ

Azure PortalでApp Serviceを検索します。

以下のように設定を行い、デプロイします。デプロイは数分で完了します。
今回は簡単なテストなので、プランはFREEを選びました。事前にリソースグループを作成しておいてください。

Azure App Serviceへ接続文字列を設定する

Azure Communication Serviceをデプロイした際にメモった接続文字列をここで使います。

設定→構成→新しい接続文字列

名前:ACSConnectionString
値:↑のAzure Communication Serviceでメモった接続文字列
種類:Custom

設定後保存してください。

サンプルのVideo Web AppをAzure App Serviceにデプロイ

ヒーローサンプルのコードを公開しているGitHubにアクセスし、クローン用のURLを取得します。

https://github.com/Azure-Samples/communication-services-web-calling-hero

VS Codeを起動します。事前にAzure App Serviceの拡張プラグインとGitをインストール、セッティングを行ってください。

F1キーを押して、コマンドパレットを表示させ、Gitクローンで、↑のGitHubで取得したURLを入力しローカルにクローンします。

以下のファイルを開き、コンストラクタを修正します。
Calling/Contollers/UserTokenController.cs

以下修正内容

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

Azure App Serviceへソースコードのデプロイ

事前にデプロイしておいたAzure App Serviceに、↑で編集したソースコードをデプロイします。
以下の手順です。
1.Configure Deployment SoruceでAzure App ServiceにローカルGitを繋ぐ
2.Deploy To WebAppでデプロイ

動作確認

作成したアプリは、Azure App Serviceの概要画面の「URL」から確認できます。

URLにアクセスしてみましょう。
この画面が出たら成功です!
Start a Callをクリックしてみます。

グループ通話に参加することができ、マイクやビデオのオンオフができます。
右下のリンクを共有することで、他の方も参加できます。

参考

今回はグループ通話のサンプルを使いましたが他にも以下のサンプルが用意されています。
今回は試しにチャットのサンプルも上記と同じ手順でデプロイしてみました。爆速でチャットも作れるなんてすごい…

音声とビデオでの通話のサンプル
チャットのサンプル
SMS のサンプル
UI ライブラリのサンプル
GitHub で公開されている SDK およびサンプル (英語)

Discussion

ログインするとコメントできます