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

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

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

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

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

Azure にデプロイする

概要

このサンプルには、クライアント側アプリケーションとサーバー側アプリケーションの両方があります。 クライアント側アプリケーションは、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 でのストリームのサポートに関するページを参照してください。

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

前提条件

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

  1. PowerShell、Windows ターミナル、コマンド プロンプト、またはそれと同等のインスタンスを開き、サンプルの複製先のディレクトリに移動します。

    git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git`
    
  2. Azure portal から、または Azure CLI を使用して Connection String を取得します。

    az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"
    

    接続文字列の詳細については、Azure Communication リソースの作成に関するページを参照してください。

  3. Connection String を取得したら、samples/Server/appsetting.json ファイルに接続文字列を追加します。 変数 ResourceConnectionString に接続文字列を入力します。

  4. Azure portal から、または Azure CLI を使用して Endpoint string を取得します。

    az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"
    

    エンドポイント文字列の詳細については、Azure Communication リソースの作成に関するページをご覧ください。

  5. Endpoint String を取得したら、samples/Server/appsetting.json ファイルにエンドポイント文字列を追加します。 変数 EndpointUrl にエンドポイント文字列を入力します

ローカルの実行

  1. 依存関係のインストール

    npm run setup
    
  2. 通話アプリを起動します

    npm run start
    

    これにより、Web サイト ファイルを提供するポート 3000 上のクライアント サーバーと、通話参加者のトークンの作成などの機能を実行するポート 8080 上の API サーバーが開きます。

トラブルシューティング

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

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

Azure に発行する

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

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

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

次の手順

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

その他の情報

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

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

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

GitHub でこのサンプルのプロジェクトを見つけてください。 Teams の相互運用機能を使用したサンプルのバージョンは、別のブランチにあります。

概要

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

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

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

[Start new call](新しい通話を開始) ボタンを押すと、iOS アプリケーションによって新しい通話が作成され、それに参加します。 このアプリケーションでは、既存の通話の ID を指定することで、Azure Communication Services の既存の通話に参加することができます。

通話に参加すると、カメラとマイクへのアクセスをアプリケーションに許可するよう求められます。 さらに、表示名を入力するように求められます。

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

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

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

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

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

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

前提条件

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

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

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

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

  1. pod install を実行して依存関係をインストールします。
  2. XCode で AzureCalling.xcworkspace を開きます。
  3. AppSettings.plist を更新します。 communicationTokenFetchUrl キーの値を、認証エンドポイントの URL に設定します。

サンプルを実行する

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

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

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

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

  1. アプリの Azure Active Directory 認証を有効にします。
  2. Azure Active Directory の [アプリの登録] から、登録済みアプリの概要ページに移動します。 Application (client) IDDirectory (tenant) IDApplication ID URI を書き留めておきます。

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

  1. Xcode で AppSettings.plist を開き、次のキー値を追加します。
    • communicationTokenFetchUrl:Azure Communication Services トークンを要求するための URL
    • isAADAuthEnabled:Azure Communication Services トークン認証を要求するかどうかを示すブール値
    • aadClientId:アプリケーション (クライアント) ID
    • aadTenantId:ディレクトリ (テナント) ID
    • aadRedirectURI:リダイレクト URI は、msauth.<app_bundle_id>://auth の形式にする必要があります。
    • aadScopes:認可を求めるユーザーから要求されるアクセス許可スコープの配列。 認証エンドポイントへのアクセスを許可するには、この配列に <Application ID URI>/user_impersonation を追加します。

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

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

次の手順

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

その他の情報

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

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

GitHub でこのサンプルのプロジェクトを見つけてください。 Teams の相互運用機能を使用したサンプルのバージョンは、別のブランチにあります。

概要

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

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

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

[Start new call](新規通話を開始) ボタンを押すと、Android アプリケーションによって新規通話が作成され、それに参加します。 このアプリケーションでは、既存の通話の ID を指定することで、Azure Communication Services の既存の通話に参加することもできます。

通話に参加すると、カメラとマイクへのアクセスをアプリケーションに許可するよう求められます。 さらに、表示名を入力するように求められます。

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

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

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

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

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

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

前提条件

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

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

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

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

サンプルを実行する

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

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

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

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

  1. アプリの Azure Active Directory 認証を有効にします。

  2. Azure Active Directory の [アプリの登録] から、登録済みアプリの概要ページに移動します。 Package nameSignature hashMSAL Configutaion を書き留めておきます。

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

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

  2. 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>
    
  3. MSAL Android の構成を Azure portal からコピーし、AzureCalling/app/src/main/res/raw/auth_config_single_account.json に貼り付けます。 "account_mode" : "SINGLE" を含めます

       {
          "client_id": "",
          "authorization_user_agent": "DEFAULT",
          "redirect_uri": "",
          "account_mode" : "SINGLE",
          "authorities": [
             {
                "type": "AAD",
                "audience": {
                "type": "AzureADMyOrg",
                "tenant_id": ""
                }
             }
          ]
       }
    
  4. AzureCalling/app/src/main/res/raw/auth_config_single_account.json を編集し、キー communicationTokenFetchUrl の値を、セキュリティで保護されている認証エンドポイントの URL に設定します。

  5. AzureCalling/app/src/main/res/raw/auth_config_single_account.json を編集し、Azure Active DirectoryExpose an API スコープのキー aadScopes の値を設定します

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

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

次の手順

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

その他の情報