Get started with the group calling hero sample

The Azure Communication Services Group Calling Hero Sample demonstrates how the Communication Services Calling Web SDK can be used to build a group calling experience.

In this Sample quickstart, we'll learn how the sample works before we run the sample on your local machine. We'll then deploy the sample to Azure using your own Azure Communication Services resources.

Download code

Find the project for this sample on GitHub. A version of the sample which includes features currently in public preview such as Teams Interop and Call Recording can be found on a separate branch.

Overview

The sample has both a client-side application and a server-side application. The client-side application is a React/Redux web application that uses Microsoft's Fluent UI framework. This application sends requests to an ASP.NET Core server-side application that helps the client-side application connect to Azure.

Here's what the sample looks like:

Screenshot showing the landing page of the sample application.

When you press the "Start a call" button, the web application fetches a user access token from the server-side application. This token is then used to connect the client app to Azure Communication Services. Once the token is retrieved, you'll be prompted to specify the camera and microphone that you want to use. You'll be able to disable/enable your devices with toggle controls:

Screenshot showing the pre-call screen of the sample application.

Once you configure your display name and devices, you can join the call session. You'll then see the main call canvas where the core calling experience lives.

Screenshot showing the main screen of the sample application.

Components of the main calling screen:

  • Media Gallery: The main stage where participants are shown. If a participant has their camera enabled, their video feed is shown here. Each participant has an individual tile which shows their display name and video stream (when there is one)
  • Header: This is where the primary call controls are located to toggle settings and participant side bar, turn video and mix on/off, share screen and leave the call.
  • Side Bar: This is where participants and settings information are shown when toggled using the controls on the header. The component can be dismissed using the 'X' on the top right corner. Participants side bar will show a list of participants and a link to invite more users to chat. Settings side bar allows you to configure microphone and camera settings.

Note

Based on limitations on the Web Calling SDK, only one remote video stream is rendered. For more information see, Calling SDK Stream Support.

Below you'll find more information on prerequisites and steps to set up the sample.

Prerequisites

Locally deploy the service & client applications

The group calling sample is essentially two applications: the ClientApp and the Service.NET app.

When we want to deploy locally we need to start up both applications. When the server app is visited from the browser, it will use the locally deployed ClientApp for the user experience.

You can test the sample locally by opening multiple browser sessions with the URL of your call to simulate a multi-user call.

Before running the sample for the first time

  1. Open an instance of PowerShell, Windows Terminal, Command Prompt or equivalent and navigate to the directory that you'd like to clone the sample to.
  2. git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git
  3. Get the Connection String from the Azure portal. For more information on connection strings, see Create an Azure Communication Services resources.
  4. Once you get the Connection String, add the connection string to the Calling/appsetting.json file found under the Service .NET folder. Input your connection string in the variable: ResourceConnectionString.

Local run

  1. Go to Calling folder and open Calling.csproj solution in Visual Studio.
  2. Run Calling project. The browser will open at localhost:5001.

Publish the sample to Azure

  1. Right click on the Calling project and select Publish.
  2. Create a new publish profile and select your Azure subscription.
  3. Before publishing, add your connection string with Edit App Service Settings, and fill in ResourceConnectionString as the key and provide your connection string (copied from appsettings.json) as the value.

Clean up resources

If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group. Deleting the resource group also deletes any other resources associated with it. Learn more about cleaning up resources.

Next steps

Download the sample from GitHub

For more information, see the following articles:

Additional reading

  • Samples - Find more samples and examples on our samples overview page.
  • Redux - Client-side state management
  • FluentUI - Microsoft powered UI library
  • React - Library for building user interfaces
  • ASP.NET Core - Framework for building web applications

The Azure Communication Services Group Calling Hero Sample for iOS demonstrates how the Communication Services Calling iOS SDK can be used to build a group calling experience that includes voice and video. In this sample quickstart, you will learn how to set up and run the sample. An overview of the sample is provided for context.

Download code

Find the project for this sample on GitHub. A version of the sample with Teams Interop can be found on a separate Branch.

Overview

The sample is a native iOS application that uses the Azure Communication Services iOS SDKs to build a calling experience that features both voice and video calling. The application uses a server-side component to provision access tokens that are then used to initialize the Azure Communication Services SDK. To configure this server-side component, feel free to follow the Trusted Service with Azure Functions tutorial.

Here's what the sample looks like:

Screenshot showing the landing page of the sample application.

When you press the "Start new call" button, the iOS application creates a new call and joins it. The application allows you to join an existing Azure Communication Services call by specifying the existing call's ID.

After joining a call, you'll be prompted to give the application permission to access your camera and microphone. You'll also be asked to provide a display name.

Screenshot showing the pre-call screen of the sample application.

Once you configure your display name and devices, you can join the call. You'll see the main call canvas where the core calling experience lives.

Screenshot showing the main screen of the sample application.

Components of the main calling screen:

  • Media Gallery: The main stage where participants are shown. If a participant has their camera enabled, their video feed is shown here. Each participant has an individual tile which shows their display name and video stream (when there is one). The gallery supports multiple participants and is updated when participants are added or removed to the call.
  • Action Bar: This is where the primary call controls are located. These controls let you turn your video and microphone on/off, share your screen, and leave the call.

Below you'll find more information on prerequisites and steps to set up the sample.

Prerequisites

Running sample locally

The group calling sample can be run locally using XCode. Developers can either use their physical device or an emulator to test the application.

Before running the sample for the first time

  1. Install dependencies by running pod install.
  2. Open AzureCalling.xcworkspace in XCode.
  3. Update AppSettings.plist. Set the value for the communicationTokenFetchUrl key to be the URL for your Authentication Endpoint.

Run sample

Build and run the sample in XCode.

(Optional) Securing an authentication endpoint

For demonstration purposes, this sample uses a publicly accessible endpoint by default to fetch an Azure Communication Services access token. For production scenarios, we recommend using your own secured endpoint to provision your own tokens.

With additional configuration, this sample supports connecting to an Azure Active Directory (Azure AD) protected endpoint so that user login is required for the app to fetch an Azure Communication Services access token. See steps below:

  1. Enable Azure Active Directory authentication in your app.
  2. Go to your registered app overview page under Azure Active Directory App Registrations. Take note of the Application (client) ID, Directory (tenant) ID, Application ID URI

Azure Active Directory configuration on Azure portal.

  1. Open AppSettings.plist in Xcode, add the following key values:
    • communicationTokenFetchUrl: The URL to request Azure Communication Services token
    • isAADAuthEnabled: A boolean value to indicate if the Azure Communication Services token authentication is required or not
    • aadClientId: Your Application (client) ID
    • aadTenantId: Your Directory (tenant) ID
    • aadRedirectURI: The redirect URI should be in this format: msauth.<app_bundle_id>://auth
    • aadScopes: An array of permission scopes requested from users for authorization. Add <Application ID URI>/user_impersonation to the array to grant access to authentication endpoint

Clean up resources

If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group. Deleting the resource group also deletes any other resources associated with it. Learn more about cleaning up resources.

Next steps

Download the sample from GitHub

For more information, see the following articles:

Additional reading

The Azure Communication Services Group Calling Hero Sample for Android demonstrates how the Communication Services Calling Android SDK can be used to build a group calling experience that includes voice and video. In this sample quickstart, you will learn how to set up and run the sample. An overview of the sample is provided for context.

Download code

Find the project for this sample on GitHub. A version of the sample with Teams Interop can be found on a separate Branch.

Overview

The sample is a native Android application that uses the Azure Communication Services Android SDKs to build a calling experience that features both voice and video calling. The application uses a server-side component to provision access tokens that are then used to initialize the Azure Communication Services SDK. To configure this server-side component, feel free to follow the Trusted Service with Azure Functions tutorial.

Here's what the sample looks like:

Screenshot showing the landing page of the sample application.

When you press the "Start new call" button, the Android application creates a new call and joins it. The application also allows you to join an existing Azure Communication Services call by specifying the existing call's ID.

After joining a call, you'll be prompted to give the application permission to access your camera and microphone. You'll also be asked to provide a display name.

Screenshot showing the pre-call screen of the sample application.

Once you configure your display name and devices, you can join the call. You'll see the main call canvas where the core calling experience lives.

Screenshot showing the main screen of the sample application.

Components of the main calling screen:

  • Media Gallery: The main stage where participants are shown. If a participant has their camera enabled, their video feed is shown here. Each participant has an individual tile which shows their display name and video stream (when there is one). The gallery supports multiple participants and is updated when participants are added or removed to the call.
  • Action Bar: This is where the primary call controls are located. These controls let you turn your video and microphone on/off, share your screen, and leave the call.

Below you'll find more information on prerequisites and steps to set up the sample.

Prerequisites

Running sample locally

The group calling sample can be run locally using Android Studio. Developers can either use their physical device or an emulator to test the application.

Before running the sample for the first time

  1. Open Android Studio and select Open an Existing Project
  2. Open the AzureCalling folder inside downloaded release for the sample.
  3. Expand app/assets to update appSettings.properties. Set the value for the key communicationTokenFetchUrl to be the URL for your Authentication Endpoint set up as a prerequisite.

Run sample

Build and run the sample in Android Studio.

(Optional) Securing an authentication endpoint

For demonstration purposes, this sample uses a publicly accessible endpoint by default to fetch an Azure Communication Services token. For production scenarios, we recommend using your own secured endpoint to provision your own tokens.

With additional configuration, this sample supports connecting to an Azure Active Directory (Azure AD) protected endpoint so that user login is required for the app to fetch an Azure Communication Services token. See steps below:

  1. Enable Azure Active Directory authentication in your app.

  2. Go to your registered app overview page under Azure Active Directory App Registrations. Take note of the Package name, Signature hash, MSAL Configutaion

Azure Active Directory configuration on Azure portal.

  1. Edit AzureCalling/app/src/main/res/raw/auth_config_single_account.json and set isAADAuthEnabled to enable Azure Active Directory

  2. Edit AndroidManifest.xml and set android:path to keystore signature hash. (Optional. The current value uses hash from bundled debug.keystore. If different keystore is used, this must be updated.)

    <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. Copy MSAL Android configuration from Azure portal and paste to 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": ""
            }
         }
      ]
   }

  4. Edit AzureCalling/app/src/main/res/raw/auth_config_single_account.json and set the value for the key communicationTokenFetchUrl to be the URL for your secure Authentication Endpoint.

  5. Edit AzureCalling/app/src/main/res/raw/auth_config_single_account.json and set the value for the key aadScopes from Azure Active Directory Expose an API scopes

Clean up resources

If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group. Deleting the resource group also deletes any other resources associated with it. Learn more about cleaning up resources.

Next steps

Download the sample from GitHub

For more information, see the following articles:

Additional reading