Azure Communication Services は、リアルタイムコミュニケーション基盤となるサービスで、テキスト | 音声 | ビデオによるコミュニケーションのハブとなり、接続やコントロールを行うアプリやサービスを SDK などを用いて容易に開発できます。また、Microsoft Teams 会議への参加 (Teams Interoperability) 機能を活用して、外部のユーザーがアカウントなどの準備なしに Teams 会議へ参加できるようになります。

今回は Azure Communication Services (以下 ACS) の Web Calling Sample (Web 通話サンプル) のサンプルアプリ (Node.JS) を用いて、基本機能を試してみるまでの手順を紹介します。

概要＆説明: Microsoft Docs > Azure > Communication Services : Web 通話サンプルの概要
ソースコード: GitHub > Azure Samples > Comminication Services Web Calling Tutorial

開発環境

Node.js & npm

以下、こちらの環境で操作しています

Windows 11 Enterprise (21H2)
Visual Studio Code (ver 1.63.2)
Node.js: v16.13.1
npm: v8.4.0

0. 事前準備

Azure Communication Services ことはじめ (1) 0. 事前準備の手順に従って、Azure Portal から ACS のサービスを作成し、接続文字列を取得しておきます。

1. アプリの起動

ソースコードを取得します。(Git-clone または ZIP ダウンロードなどお好みの方法で)

ソースコード communication-services-web-calling-tutorial 配下にある Project を Visual Studio Code で開きます。

config.json を開き、connectionString の値として、0.事前準備で取得しておいた接続文字列をペーストし、保存します。

Visual Studio Code でターミナルを開きます。

npm install で必要なパッケージをインストールします。

> npm install

いろいろ Warning が出ていますが．．．とりあえずそのまま続けます。
npm run build でビルドします。

> npm run build

無事ビルドできたら、npm run start で起動します。

> npm run start

ブラウザーが立ち上がり、http://localhost:5000 で画面が表示されたらOKです。

終わったら、コンソールから Ctrl + C で終了できます。

2. ACS の基本機能を試す

2-1. ACS ユーザーの作成

Optional display name に識別できるように名前を入力して　[Provision user and inifialize SDK] をクリックし、ACS ユーザーを作成します。

表示される ID (8:acs:xxxxxxx... で始まる文字列)が、このユーザーの ACS UserId になります。

Optional Tag で ACS への課金を振り分けるための利用プランをタグ付けすることができます (任意のGUID を設定)

ACS での通話、ビデオ会議をひとりで試すには、別ブラウザーで同じURL (localhost:5000) にアクセスし、2-1 の手順でACSユーザーを作成しておきます。

2-2. ACS での通話、ビデオ通話 (Call, Call with video) を試す

Placing and Receiving Calls の欄にある Place a call の機能を使います。
宛先の ACS User Id を入力して、Place Call をクリックします。

Incoming Call... と表示されて Call がかかってきたら、通話ボタンをクリックして受信します。

通話が繋がると、それぞれ相手の名前が表示されます。

ビデオボタンをクリックするとブラウザーで認識されているカメラの画像が相手の画面に出力されます。

通話終了ボタンをクリックして通話を終了します。

2-3. Teams 会議への参加を試す

Placing and Receiving Calls の欄にある Join a Teams meeting の機能を使います。
Microsoft Teams 側で会議を作成し、会議 URL (https://teams.microsoft.com/... で始まる URL) を取得、Meeting Link にペーストして [Join Teams meeting] (または [Join Teams meeting with video])をクリックします。

Teams 側で ACS ユーザーがロビー待機している旨が通知されます。[参加許可] をクリックします。

ACS ユーザーが参加すると、Teams 側には ACS ユーザーの情報、ACS 側には Teams 側の参加者情報がそれぞれ表示されます。

通話終了ボタンをクリックして通話を終了します。