通話のヒーローサンプルを使ってみる

[アーティクル]
12/05/2022

Azure Communication Services の グループ通話のヒーローサンプルは、Communication Services Calling Web SDK を使用して、グループ通話エクスペリエンスを構築する方法を示しています。

このサンプルのクイックスタートでは、サンプルがどのように動作するかを学習した後で、サンプルをローカルコンピューターで実行します。次に、独自の Azure Communication Services リソースを使用して、サンプルを Azure にデプロイします。

コードをダウンロードする

GitHub でこのサンプルのプロジェクトを見つけてください。 Teams の相互運用機能および通話レコーディングなど、現在パブリックプレビュー中の機能を含むサンプルのバージョンは、別のブランチにあります。

概要

このサンプルには、クライアント側アプリケーションとサーバー側アプリケーションの両方があります。 クライアント側アプリケーションは、Microsoft の Fluent UI フレームワークを使用する React/Redux Web アプリケーションです。このアプリケーションは、クライアント側アプリケーションが Azure に接続するのを助ける ASP.NET Core のサーバー側アプリケーションに要求を送信します。

サンプルは次のようになります。

サンプルアプリケーションのランディングページを示すスクリーンショット。

[Start a Chat](通話を開始) ボタンを押すと、サーバー側アプリケーションからユーザーアクセストークンがフェッチされます。このトークンは、クライアントアプリを Azure Communication Services に接続するために使用されます。トークンの取得後、使用するカメラとマイクを指定するように求められます。切り替えコントロールを使用して、これらのデバイスを無効または有効にできます。

サンプルアプリケーションの通話開始前の画面を示すスクリーンショット。

表示名とデバイスを構成すると、通話セッションに参加できるようになります。その後、メインの通話キャンバスが表示され、通話のコアエクスペリエンスが提供されます。

サンプルアプリケーションのメイン画面を示すスクリーンショット。

通話のメイン画面のコンポーネントは以下のとおりです。

メディアギャラリー: 参加者が表示されるメイン領域。参加者のカメラが有効になっている場合は、そのビデオフィードがここに表示されます。各参加者の表示名とビデオストリーム (ある場合) がタイル表示されます。
ヘッダー:ここには通話のメインコントロールがあり、設定と参加者のサイドバーの切り替え、ビデオとマイクのオン/オフ切り替え、画面の共有、通話の終了を行えます。
サイドバー: ヘッダーのコントロールを使用して、参加者と設定情報の表示を切り替えます。このコンポーネントは、右上隅にある 'X' を使用して閉じることができます。参加者のサイドバーには参加者の一覧と、チャットするユーザーをさらに招待するためのリンクが表示されます。 [設定] サイドバーでは、マイクとカメラの設定を構成できます。

Note

Web Calling SDK の制限に基づいて、4 つのビデオストリームと 1 つの画面共有ストリームのみがレンダリングされます。詳細については、Calling SDK でのストリームのサポートに関するページを参照してください。

以下で、サンプルを設定するための前提条件と手順について詳しく説明します。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。詳細については、無料アカウントの作成に関するページをご覧ください。
Node.js (12.18.4 以上)
Visual Studio Code (安定したビルド)
Azure Communication Services リソース。詳細については、Azure Communication Services リソースの作成に関するページを参照してください。このクイックスタートで使用するリソースの接続文字列を記録する必要があります。

サンプルを初めて実行する前に行う手順

PowerShell、Windows ターミナル、コマンドプロンプト、またはそれと同等のインスタンスを開き、サンプルの複製先のディレクトリに移動します。
```
git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git`
```
Azure portal から、または Azure CLI を使用して Connection String を取得します。
```
az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"
```
接続文字列の詳細については、Azure Communication リソースの作成に関するページを参照してください。
Connection String を取得したら、samples/Server/appsetting.json ファイルに接続文字列を追加します。変数 ResourceConnectionString に接続文字列を入力します。
Azure portal から、または Azure CLI を使用して Endpoint string を取得します。
```
az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"
```
エンドポイント文字列の詳細については、Azure Communication リソースの作成に関するページをご覧ください。
Endpoint String を取得したら、samples/Server/appsetting.json ファイルにエンドポイント文字列を追加します。変数 EndpointUrl にエンドポイント文字列を入力します

ローカルの実行

依存関係のインストール
```
npm run setup
```
通話アプリを起動します
```
npm run start
```
これにより、Web サイトファイルを提供するポート 3000 上のクライアントサーバーと、通話参加者のトークンの作成などの機能を実行するポート 8080 上の API サーバーが開きます。

トラブルシューティング

アプリに [サポートされていないブラウザー] 画面が表示されますが、サポートされているブラウザーを使用しています。

アプリが localhost 以外のホスト名で提供されている場合は、http ではなく https 経由でトラフィックを提供する必要があります。

Azure に発行する

npm run setup
npm run build
npm run package
Azure 拡張機能を使用し、Calling/dist ディレクトリを App Service にデプロイします

リソースをクリーンアップする

Communication Services サブスクリプションをクリーンアップして解除する場合は、リソースまたはリソースグループを削除できます。リソースグループを削除すると、それに関連付けられている他のリソースも削除されます。詳細については、リソースのクリーンアップに関する記事を参照してください。

次の手順

GitHub からサンプルをダウンロードする

詳細については、次の記事を参照してください。

Calling SDK の使用法について理解する
通話のしくみの詳細について確認する

その他の情報

サンプル - その他のサンプルと例については、「サンプルの概要」ページを参照してください。
Redux - クライアント側の状態管理
FluentUI - Microsoft が提供する UI ライブラリ
React - ユーザーインターフェイスを構築するためのライブラリ
ASP.NET Core - Web アプリケーションを構築するためのフレームワーク

Azure Communication Services の iOS 用のグループ通話のヒーローサンプルは、Communication Services Calling iOS SDK を使用して、音声とビデオを含むグループ通話エクスペリエンスを構築する方法を示しています。このサンプルクイックスタートでは、サンプルを設定して実行する方法について説明します。背景情報については、サンプルの概要を参照してください。

コードをダウンロードする

GitHub でこのサンプルのプロジェクトを見つけてください。

概要

このサンプルはネイティブ iOS アプリケーションであり、音声通話とビデオ通話の両機能を備えた通話エクスペリエンスを実現するために、Azure Communication Services iOS SDK が使用されています。このアプリケーションは、サーバー側コンポーネントを使用してアクセストークンをプロビジョニングします。それを使用して、Azure Communication Services SDK が初期化されます。サーバー側コンポーネントを構成する際は、Azure Functions を使用した信頼できるサービスについてのチュートリアルに従ってください。

サンプルは次のようになります。

サンプルアプリケーションのランディングページを示すスクリーンショット。

[新しい通話の開始] ボタンを押すと、iOS アプリケーションから、通話に使用する表示名を入力するように求められます。

サンプルアプリケーションの通話開始前の画面を示すスクリーンショット。

[通話を開始] 画面で [次へ] をタップすると、iOS 共有シートを使用して通話のグループ ID を共有できます。

このアプリケーションでは、既存の通話の ID または Teams ID リンクを指定することで、Azure Communication Services の既存の通話に参加することもできます。

サンプルアプリケーションの [通話に参加] 画面を示すスクリーンショット。

通話に参加すると、カメラとマイクへのアクセスをアプリケーションに許可するよう求められます (まだ許可していない場合)。すべての AVFoundation ベースのアプリと同様に、真のオーディオとビデオの機能は実際のハードウェアでのみ使用できるということに留意してください。

表示名を構成して通話に参加すると、メインの通話キャンバスが表示され、通話のコアエクスペリエンスが提供されます。

サンプルアプリケーションのメイン画面を示すスクリーンショット。

通話のメイン画面のコンポーネントは以下のとおりです。

メディアギャラリー: 参加者が表示されるメイン領域。参加者のカメラが有効になっている場合は、そのビデオフィードがここに表示されます。参加者ごとに個別のタイルがあり、その表示名とビデオストリーム (存在する場合) が表示されます。ギャラリーでは複数の参加者がサポートされており、通話への参加者が追加または削除されると更新されます。
アクションバー: 主要な通話コントロールが配置される場所です。これらのコントロールを使用して、ビデオとマイクのオンとオフを切り替えたり、画面を共有したり、通話を終了したりすることができます。

以下で、サンプルを設定するための前提条件と手順について詳しく説明します。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。詳細については、アカウントの無料作成に関するページを参照してください。
Xcode を実行しており、有効な開発者証明書がキーチェーンにインストールされている Mac。
Azure Communication Services リソース。詳細については、Azure Communication Services リソースの作成に関するページを参照してください。
認証エンドポイントを実行してアクセストークンをフェッチする Azure 関数。

サンプルをローカルで実行する

グループ通話サンプルは、XCode を使用してローカルで実行することができます。開発者は、各自の物理デバイスまたはエミュレーターを使用してアプリケーションをテストできます。

サンプルを初めて実行する前

pod install を実行して依存関係をインストールします。
XCode で AzureCalling.xcworkspace を開きます。
ルートに AppSettings.xcconfig という名前のテキストファイルを作成して、次の値を設定します。
```
communicationTokenFetchUrl = <your authentication endpoint, without the https:// component>
```

サンプルを実行する

任意のシミュレーターまたはデバイスで AzureCalling ターゲットを使用して、XCode でサンプルをビルドして実行します。

(省略可) 認証エンドポイントのセキュリティを確保する

このサンプルはデモンストレーション上、既定では、パブリックにアクセスできるエンドポイントを使用して、Azure Communication Services のアクセストークンをフェッチします。運用のシナリオでは、セキュリティを確保した独自のエンドポイントを使用して独自のトークンをプロビジョニングすることをお勧めします。

別途構成を行うことにより、このサンプルは、Azure Active Directory (Azure AD) で保護されたエンドポイントへの接続をサポートし、Azure Communication Services のアクセストークンをフェッチするアプリにユーザーログインを要求することができます。以下の手順を参照してください。

アプリの Azure Active Directory 認証を有効にします。
- アプリを Azure Active Directory に登録する (iOS または macOS プラットフォームの設定を使用)
- Azure AD ログインを使用するように App Service または Azure Functions アプリを構成する
Azure Active Directory の [アプリの登録] から、登録済みアプリの概要ページに移動します。 Application (client) ID、Directory (tenant) ID、Application ID URI を書き留めておきます。

Azure portal における Azure Active Directory の構成。

ルートに AppSettings.xcconfig ファイルを作成し (まだ存在しない場合)、次の値を追加します。

communicationTokenFetchUrl = <Application ID URI, without the https:// component>
aadClientId = <Application (client) ID>
aadTenantId = <Directory (tenant) ID>

リソースをクリーンアップする

次の手順

GitHub からサンプルをダウンロードする

詳細については、次の記事を参照してください。

Calling SDK の使用法について理解する
通話のしくみの詳細について確認する

その他の情報

Azure Communication GitHub - 他の例や情報は公式 GitHub ページで見つかります。
サンプル - その他のサンプルと例については、「サンプルの概要」ページを参照してください。
Azure Communication の通話機能 - Calling iOS SDK の詳細 - Azure Communication iOS Calling SDK

Azure Communication Services の Android 用のグループ通話のヒーローサンプルは、Communication Services Calling Android SDK を使用して、音声とビデオを含むグループ通話エクスペリエンスを構築する方法を示しています。このサンプルクイックスタートでは、サンプルを設定して実行する方法について説明します。背景情報については、サンプルの概要を参照してください。

コードをダウンロードする

GitHub でこのサンプルのプロジェクトを見つけてください。

概要

このサンプルはネイティブ Android アプリケーションであり、音声通話とビデオ通話の両機能を備えた通話エクスペリエンスを実現するために、Azure Communication Services Android UI クライアントライブラリが使用されています。このアプリケーションは、サーバー側コンポーネントを使用してアクセストークンをプロビジョニングします。それを使用して、Azure Communication Services SDK が初期化されます。サーバー側コンポーネントを構成する際は、Azure Functions を使用した信頼できるサービスについてのチュートリアルに従ってください。

サンプルは次のようになります。

サンプルアプリケーションのランディングページを示すスクリーンショット。

[新しい通話の開始] ボタンを押すと、Android アプリケーションから、通話に使用する表示名を入力するように求められます。

サンプルアプリケーションの通話開始前の画面を示すスクリーンショット。

[通話を開始] ページで [次へ] をタップすると、"グループ通話 ID" を共有できます。

このアプリケーションでは、既存の通話の ID または Teams 会議 ID リンクと表示名を指定することで、Azure Communication Services の既存の通話に参加できます。

サンプルアプリケーションの [通話に参加] 画面を示すスクリーンショット。

通話に参加すると、カメラとマイクへのアクセスをアプリケーションに許可するよう求められます (まだ許可していない場合)。メインの通話キャンバスが表示され、通話のコアエクスペリエンスが提供されます。

サンプルアプリケーションのメイン画面を示すスクリーンショット。

通話のメイン画面のコンポーネントは以下のとおりです。

メディアギャラリー: 参加者が表示されるメイン領域。参加者のカメラが有効になっている場合は、そのビデオフィードがここに表示されます。参加者ごとに個別のタイルがあり、その表示名とビデオストリーム (存在する場合) が表示されます。ギャラリーでは複数の参加者がサポートされており、通話への参加者が追加または削除されると更新されます。
アクションバー: 主要な通話コントロールが配置される場所です。これらのコントロールを使用して、ビデオとマイクのオンとオフを切り替えたり、画面を共有したり、通話を終了したりすることができます。

以下で、サンプルを設定するための前提条件と手順について詳しく説明します。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。詳細については、アカウントの無料作成に関するページを参照してください。
お使いのコンピューターで実行されている Android Studio
Azure Communication Services リソース。詳細については、Azure Communication Services リソースの作成に関するページを参照してください。
認証エンドポイントを実行してアクセストークンをフェッチする Azure 関数。

サンプルをローカルで実行する

グループ通話サンプルは、Android Studio を使用してローカルで実行することができます。開発者は、各自の物理デバイスまたはエミュレーターを使用してアプリケーションをテストできます。

サンプルを初めて実行する前

Android Studio を開き、Open an Existing Project を選択します
サンプルのダウンロードされたリリース内の AzureCalling フォルダーを開きます。
app/assets を展開して appSettings.properties を更新します。キー communicationTokenFetchUrl の値を、前提条件として設定された認証エンドポイントの URL に設定します。

サンプルを実行する

Android Studio でサンプルをビルドして実行します。

(省略可) 認証エンドポイントのセキュリティを確保する

このサンプルはデモンストレーション上、既定では、パブリックにアクセスできるエンドポイントを使用して、Azure Communication Services トークンをフェッチします。運用のシナリオでは、セキュリティを確保した独自のエンドポイントを使用して独自のトークンをプロビジョニングすることをお勧めします。

別途構成を行うことにより、このサンプルは、Azure Active Directory (Azure AD) で保護されたエンドポイントへの接続をサポートし、Azure Communication Services のトークンをフェッチするアプリにユーザーログインを要求することができます。以下の手順を参照してください。

アプリの Azure Active Directory 認証を有効にします。
- アプリを Azure Active Directory に登録する (Android プラットフォームの設定を使用)
- Azure AD ログインを使用するように App Service または Azure Functions アプリを構成する
Azure Active Directory の [アプリの登録] から、登録済みアプリの概要ページに移動します。 Package name、Signature hash、MSAL Configutaion を書き留めておきます。

Azure portal における Azure Active Directory の構成。

AzureCalling/app/src/main/res/raw/auth_config_single_account.json を編集し、isAADAuthEnabled を設定して Azure Active Directory を有効にします

AndroidManifest.xml を編集し、android:path をキーストア署名ハッシュに設定します。 (省略可能。現在の値では、バンドルされた debug.keystore からのハッシュが使用されます。別のキーストアを使用する場合は、これを更新する必要があります)

<activity android:name="com.microsoft.identity.client.BrowserTabActivity">
         <intent-filter>
             <action android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.DEFAULT" />
             <category android:name="android.intent.category.BROWSABLE" />
             <data
                 android:host="com.azure.samples.communication.calling"
                 android:path="/Signature hash" <!-- do not remove /. The current hash in AndroidManifest.xml is for debug.keystore. -->
                 android:scheme="msauth" />
         </intent-filter>
     </activity>

MSAL Android の構成を Azure portal からコピーし、AzureCalling/app/src/main/res/raw/auth_config_single_account.json に貼り付けます。 Include "account_mode": "SINGLE"

   {
      "client_id": "",
      "authorization_user_agent": "DEFAULT",
      "redirect_uri": "",
      "account_mode" : "SINGLE",
      "authorities": [
         {
            "type": "AAD",
            "audience": {
            "type": "AzureADMyOrg",
            "tenant_id": ""
            }
         }
      ]
   }

AzureCalling/app/src/main/res/raw/auth_config_single_account.json を編集し、キー communicationTokenFetchUrl の値を、セキュリティで保護されている認証エンドポイントの URL に設定します。
AzureCalling/app/src/main/res/raw/auth_config_single_account.json を編集し、Azure Active DirectoryExpose an API スコープのキー aadScopes の値を設定します
ユーザー情報をフェッチする Graph API エンドポイントとして、AzureCalling/app/assets/appSettings.properties で graphURL の値を設定します。
AzureCalling/app/src/main/assets/appSettings.properties を編集して、サイレントログインを有効にするようにキー tenant の値を設定します。これにより、アプリケーションの再起動中にユーザーを何度も認証する必要がなくなります。

リソースをクリーンアップする

次の手順

GitHub からサンプルをダウンロードする

詳細については、次の記事を参照してください。

Calling SDK の使用法について理解する
通話のしくみの詳細について確認する

その他の情報

Azure Communication GitHub - 他の例や情報は公式 GitHub ページで見つかります。
サンプル - その他のサンプルと例については、「サンプルの概要」ページを参照してください。
Azure Communication の通話機能 - Calling Android SDK の詳細 - Azure Communication Android Calling SDK

通話のヒーローサンプルを使ってみる

コードをダウンロードする

概要

前提条件

サンプルを初めて実行する前に行う手順

ローカルの実行

トラブルシューティング

Azure に発行する

リソースをクリーンアップする

次の手順

その他の情報

コードをダウンロードする

概要

前提条件

サンプルをローカルで実行する

サンプルを初めて実行する前

サンプルを実行する

(省略可) 認証エンドポイントのセキュリティを確保する

リソースをクリーンアップする

次の手順

その他の情報

コードをダウンロードする

概要

前提条件

サンプルをローカルで実行する

サンプルを初めて実行する前

サンプルを実行する

(省略可) 認証エンドポイントのセキュリティを確保する

リソースをクリーンアップする

次の手順

その他の情報

その他のリソース

その他のリソース

通話のヒーロー サンプルを使ってみる

コードをダウンロードする

概要

前提条件

サンプルを初めて実行する前に行う手順

ローカルの実行

トラブルシューティング

Azure に発行する

リソースをクリーンアップする

次の手順

その他の情報

コードをダウンロードする

概要

前提条件

サンプルをローカルで実行する

サンプルを初めて実行する前

サンプルを実行する

(省略可) 認証エンドポイントのセキュリティを確保する

リソースをクリーンアップする

次の手順

その他の情報

コードをダウンロードする

概要

前提条件

サンプルをローカルで実行する

サンプルを初めて実行する前

サンプルを実行する

(省略可) 認証エンドポイントのセキュリティを確保する

リソースをクリーンアップする

次の手順

その他の情報

その他のリソース

その他のリソース

通話のヒーローサンプルを使ってみる