Audio/Video Calling from a Custom App into a Teams Meeting

Article
Developer (Intermediate)
74 minutes to complete

Level: Intermediate

In this tutorial, you'll learn how Azure Communication Services can be used in a custom React application to allow a user to make an audio/video call into a Microsoft Teams meeting. You'll learn about the different building blocks that can be used to make this scenario possible and be provided with hands-on steps to walk you through the different Microsoft Cloud services involved.

What You'll Build in this Tutorial

Overview of the Application Solution

ACS Audio/Video Solution

Prerequisites

Node LTS - Node LTS is used for this project
git
Visual Studio Code or another IDE of your choice.
Azure Functions Extension for VS Code
Azure subscription
Microsoft 365 developer tenant
GitHub account
Visual Studio if using the C# version of the tutorial. Visual Studio Code can also be used if preferred.

Technologies used in this tutorial include

React
Azure Communication Services
Azure Functions
Microsoft Graph
Microsoft Teams

Create an Azure Communication Services Resource

72 minutes remaining

In this exercise you'll create an Azure Communication Services (ACS) resource in the Azure portal.

ACS in the Azure portal

To get started, perform the following tasks:

Visit the Azure portal in your browser and sign in.
Type communication services in the search bar at the top of the page and select Communication Services from the options that appear.
Select Create in the toolbar.
Perform the following tasks:
- Select your Azure subscription.
- Select the resource group to use (create a new one if one doesn't exist).
- Enter an ACS resource name. It must be a unique value.
- Select a data location.
Select Review + Create followed by Create.
Once your ACS resource is created, navigate to it, and select Settings --> Identities & User Access Tokens.
Select the Voice and video calling (VOIP) checkbox.
Select Generate.
Copy the Identity and User Access token values to a local file. You'll need the values later in this exercise.
Select Settings --> Keys and copy the Primary key connection string value to the local file where you copied the user identity and token values.
To run the application you'll need a Teams meeting link. Go to Microsoft Teams, sign in with your Microsoft 365 developer tenant, and select the Calendar option on the left.

Tip

If you don't currently have a Microsoft 365 account, you can sign up for the Microsoft 365 Developer Program subscription. It's free for 90 days and will continually renew as long as you're using it for development activity. If you have a Visual Studio Enterprise or Professional subscription, both programs include a free Microsoft 365 developer subscription, active for the life of your Visual Studio subscription.
Select a any date/time on the calendar, add a title for the meeting, invite a user from your Microsoft 365 developer tenant, and select Save.
Select the new meeting you added in the calendar and copy the Teams meeting link that is displayed into the same file where you stored the ACS user identity, token, and connection string.
Now that your ACS resource is setup and you have a Teams meeting join link, let's get the React application up and running.

Integrate Azure Communication Services Calling into a React App

62 minutes remaining

In this exercise you'll add the ACS UI calling composite into a React app to enable making audio/video calls from a custom app into a Microsoft Teams meeting.

ACS in React

Visit GitHub and sign in. If you don't already have a GitHub account, you can select the Sign up option to create one.
Visit the Microsoft Cloud GitHub Repository.
Select the Fork option to add the repository to your desired GitHub organization/account.
Run the following command to clone this repository to your machine. Replace <YOUR_ORG_NAME> with your GitHub organization/account name.
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
Open the samples/acs-to-teams-meeting project folder in Visual Studio Code.
Expand the client/react folder.
Open the package.json file in VS Code and note the following ACS packages are included:
```
@azure/communication-common 
@azure/communication-react
```
Double-check that you have npm 10 or higher installed by opening a terminal window and running the following command:
```
npm --version
```
Tip

If you don't have npm 10 or higher installed you can update npm to the latest version by running npm install -g npm.
Open a terminal window and run the npm install command in the react folder to install the application dependencies.
Open App.tsx and take a moment to explore the imports at the top of the file. These handle importing ACS security and audio/video calling symbols that will be used in the app.
```
import { 
    AzureCommunicationTokenCredential,
    CommunicationUserIdentifier 
} from '@azure/communication-common';
import {  
  CallComposite, 
  fromFlatCommunicationIdentifier, 
  useAzureCommunicationCallAdapter 
} from '@azure/communication-react';
import React, { useState, useMemo, useEffect } from 'react';
import './App.css';
```
Note

You'll see how the CallComposite component is used later in this exercise. It provides the core UI functionality for Azure Communication Services to enable making an audio/video call from the app into a Microsoft Teams meeting.
Locate the App component and perform the following tasks:
- Take a moment to examine the useState definitions in the component.
- Replace the userId useState function's empty quotes with the ACS user identity value you copied in the previous exercise.
- Replace the token useState function's empty quotes with the ACS token value you copied in the previous exercise.
- Replace the teamsMeetingLink useState function's empty quotes with the Teams meeting link value you copied in the previous exercise.
```
// Replace '' with the ACS user identity value
const [userId, setUserId] = useState<string>('');

// Replace '' with the ACS token value
const [token, setToken] = useState<string>('');

// Replace '' with the Teams meeting link value
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```
Note

Later in this tutorial you'll see how to retrieve the userId, token, and teamsMeetingLink values dynamically.
Take a moment to explore the useMemo functions in the App component.
- The credential useMemo function creates a new AzureCommunicationTokenCredential instance once the token has a value.
- The callAdapterArgs useMemo function returns an object that has the arguments that are used to make an audio/video call. Notice that is uses the userId, credential, and teamsMeetingLink values in the ACS call arguments.
```
const credential = useMemo(() => {
    if (token) {
        return new AzureCommunicationTokenCredential(token)
    }
    return;
}, [token]);

const callAdapterArgs = useMemo(() => {
    if (userId && credential && displayName && teamsMeetingLink) {
        return {
            userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,
            displayName,
            credential,
            locator: { meetingLink: teamsMeetingLink },
        }
    }
    return {};
}, [userId, credential, displayName, teamsMeetingLink]);
```
Note

useMemo is used in this scenario because we only want the AzureCommunicationTokenCredential object and the call adapter args to be created once as the necessary parameters are passed in. View additional details about useMemo here.
Once the credentials and callAdapterArgs are ready, the following line handles creating an ACS call adapter using the useAzureCommunicationCallAdapter React hook provided by ACS. The callAdapter object will be used later in the UI calling composite component.
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
Note

Because useAzureCommunicationCallAdapter is a React hook, it won't assign a value to callAdapter until the callAdapterArgs value is valid.

Earlier you assigned the user identity, token, and Teams meeting link to state values in the App component. That works fine for now, but in a later exercise you'll see how to dynamically retrieve those values. Since you set the values earlier, comment out the code in the useEffect function as shown next. Once you get the Azure Functions running in the next exercises, you'll revisit this code.

useEffect(() => {
    /* Commenting out for now

    const init = async () => {
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        let user = await res.json();
        setUserId(user.userId);
        setToken(user.token);

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        let link = await res.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);
    }
    init();

    */
}, []);

Locate the following JSX code. It uses the CallComposite symbol you saw imported to render the user interface used to make an audio/video call from the React app into a Teams meeting. The callAdapter you explored earlier is passed to its adapter property to provide the required arguments.
```
if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}
```
Save the file before continuing.
Run npm start in your terminal window to run the application. Ensure you run the command within the react folder.
After the applications builds you should see a calling UI displayed. Enable selecting your microphone and camera and initiate the call. You should see that you're placed in a waiting room. If you join the meeting you setup earlier in Microsoft Teams, you can allow the guest to enter the meeting.
Press Ctrl + C to stop the application. Now that you've successfully run it, let's explore how you can dynamically get the ACS user identity and token and automatically create a Microsoft Teams meeting and return the join URL using Microsoft Graph.

Dynamically Create a Microsoft Teams Meeting using Microsoft Graph

52 minutes remaining

In this exercise, you'll automate the process of creating a Microsoft Teams meeting link and passing to the ACS by using Azure Functions and Microsoft Graph.

Create Teams Meeting

You'll need to create a Microsoft Entra ID app for Daemon app authentication. In this step, authentication will be handled in the background with app credentials, and a Microsoft Entra ID app will use Application Permissions to make Microsoft Graph API calls. Microsoft Graph will be used to dynamically create a Microsoft Teams meeting and return the Teams meeting URL.
Perform the following steps to create a Microsoft Entra ID app:
1. Go to Azure portal and select Microsoft Entra ID.
2. Select the App registration tab followed by + New registration.
3. Fill in the new app registration form details as shown below and select Register:
  - Name: ACS Teams Interop App
  - Supported account types: Accounts in any organizational directory (Any Microsoft Entra ID directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)
  - Redirect URI: leave this blank
4. After the app is registered, go to API permissions and select + Add a permission.
5. Select Microsoft Graph followed by Application permissions.
6. Select the Calendars.ReadWrite permission and then select Add.
7. After adding the permissions, select Grant admin consent for <YOUR_ORGANIZATION_NAME>.
8. Go to the Certificates & secrets tab, select + New client secret, and then select Add.
9. Copy the value of the secret into a local file. You'll use the value later in this exercise.
10. Go to the Overview tab and copy the Application (client) ID and Directory (tenant) ID values into the same local file that you used in the previous step.

Open the samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln in Visual Studio or open the GraphACSFunctions folder in Visual Studio Code.
Go to the GraphACSFunctions project and create a local.settings.json file with the following values:
```
{
    "IsEncrypted": false,
    "Values": {
        "FUNCTIONS_WORKER_RUNTIME": "node",
        "TENANT_ID": "",
        "CLIENT_ID": "",
        "CLIENT_SECRET": "",
        "USER_ID": "",
        "ACS_CONNECTION_STRING": ""
    },
    "Host": {
        "LocalHttpPort": 7071,
        "CORS": "*",
        "CORSCredentials": false
    },
    "watchDirectories": [
        "Shared"
    ]
}
```
- Use the values you copied into the local file in an earlier exercise to update the TENANT_ID, CLIENT_ID and CLIENT_SECRET values.
- Define USER_ID with the user id that you'd like to create a Microsoft Teams Meeting.
You can get the User ID from the Azure portal.
- Login using your Microsoft 365 developer tenant admin account.
- Select Microsoft Entra ID
- Navigate to the Users tab on the side bar.
- Search for your user name and select it to see the user details.
- Inside the user details, Object ID represents the User ID. Copy the Object ID value and use it for the USER_ID value in local.settings.json.
Note

ACS_CONNECTION_STRING will be used in the next exercise so you don't need to update it yet.

Open GraphACSFunctions.sln located in the acs-to-teams-meeting/server/csharp folder and note that it includes the following Microsoft Graph and Identity packages:

<PackageReference Include="Azure.Communication.Identity" Version="1.2.0" />
<PackageReference Include="Azure.Identity" Version="1.8.2" />
<PackageReference Include="Microsoft.Graph" Version="4.53.0" />

Go to Startup.cs and note the following code in the Configure method:

public override void Configure(IFunctionsHostBuilder builder)
{
    builder.Services.AddSingleton(static p =>
    {
        var config = p.GetRequiredService<IConfiguration>();
        var clientSecretCredential = new ClientSecretCredential(
            config.GetValue<string>("TENANT_ID"),
            config.GetValue<string>("CLIENT_ID"),
            config.GetValue<string>("CLIENT_SECRET")
        );

        return new GraphServiceClient(
            clientSecretCredential,
            new[] { "https://graph.microsoft.com/.default" }
        );
    });

    ...

    builder.Services.AddSingleton<IGraphService, GraphService>();
}

This code creates a GraphServiceClient object that can be used to call Microsoft Graph from Azure Functions. It's a singleton and can be injected into other classes.
You can make Microsoft Graph API calls with app-only permissions (such as Calendars.ReadWrite) by passing a ClientSecretCredential value to the GraphServiceClient constructor. The ClientSecretCredential uses the Tenant Id, Client Id and Client Secret values from the Microsoft Entra ID app.

Open Services/GraphService.cs.

Take a moment to explore the CreateMeetingEventAsync method:

using System;
using System.Threading.Tasks;
using Microsoft.Graph;
using Microsoft.Extensions.Configuration;

namespace GraphACSFunctions.Services;

public class GraphService : IGraphService
{
    private readonly GraphServiceClient _graphServiceClient;
    private readonly IConfiguration _configuration;

    public GraphService(GraphServiceClient graphServiceClient, IConfiguration configuration)
    {
        _graphServiceClient = graphServiceClient;
        _configuration = configuration;
    }

    public async Task<string> CreateMeetingAsync()
    {
        var userId = _configuration.GetValue<string>("USER_ID");
        var newMeeting = await _graphServiceClient
            .Users[userId]
            .Calendar
            .Events
            .Request()
            .AddAsync(new()
            {
                Subject = "Customer Service Meeting",
                Start = new()
                {
                    DateTime = DateTime.UtcNow.ToString("yyyy-MM-ddTHH:mm:ss"),
                    TimeZone = "UTC"
                },
                End = new()
                {
                    DateTime = DateTime.UtcNow.AddHours(1).ToString("yyyy-MM-ddTHH:mm:ss"),
                    TimeZone = "UTC"
                },
                IsOnlineMeeting = true
            });
        return newMeeting.OnlineMeeting.JoinUrl;
    }
}

GraphServiceClient and IConfiguration objects are injected into the constructor and assigned to fields.
The CreateMeetingAsync() function posts data to the Microsoft Graph Calendar Events API, which dynamically creates an event in a user's calendar and returns the join URL.

Open TeamsMeetingFunctions.cs and take a moment to examine it's constructor. The GraphServiceClient you looked at earlier is injected and assigned to the _graphService field.
```
private readonly IGraphService _graphService;

public TeamsMeetingFunction(IGraphService graphService) => _graphService = graphService;
```

Locate the Run method:

[FunctionName("TeamsMeetingFunction")]
public async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req,
    ILogger log) => 
    new OkObjectResult(await _graphService.CreateMeetingAsync());

It defines a function named of TeamsMeetingFunction that can be called with an HTTP GET request.
It calls _graphService.CreateMeetingAsync(), which creates a new event and returns the join URL.

Run the program by pressing F5 in Visual Studio or by selecting Debug --> Start Debugging from the menu. This action starts the Azure Functions project and make the ACSTokenFunction available to call.

Note

If you're using VS Code you can open a terminal window in the GraphACSFunctions folder and run dotnet run.

Open the samples/acs-to-teams-meeting/server/typescript project folder in Visual Studio Code.
Create a local.settings.json file with the following values:
```
{
    "IsEncrypted": false,
    "Values": {
        "FUNCTIONS_WORKER_RUNTIME": "node",
        "TENANT_ID": "",
        "CLIENT_ID": "",
        "CLIENT_SECRET": "",
        "USER_ID": "",
        "ACS_CONNECTION_STRING": ""
    },
    "Host": {
        "LocalHttpPort": 7071,
        "CORS": "*",
        "CORSCredentials": false
    },
    "watchDirectories": [
        "Shared"
    ]
}
```
- Use the values you copied into the local file in an earlier exercise to update the TENANT_ID, CLIENT_ID and CLIENT_SECRET values.
- Define USER_ID with the user id that you'd like to create a Microsoft Teams Meeting.
You can get the User ID from the Azure portal.
- Login using your Microsoft 365 developer tenant admin account.
- Select Microsoft Entra ID,
- Navigate to the Users tab on the side bar.
- Search for your user name and select it to see the user details.
- Inside the user details, Object ID represents the User ID. Copy the Object ID value and use it for the USER_ID value in local.settings.json.
Note

ACS_CONNECTION_STRING will be used in the next exercise so you don't need to update it yet.
Open the package.json file in VS Code and note that the following Microsoft Graph and Identity packages are included:
```
@azure/communication-identity
@azure/identity
@microsoft/microsoft-graph-client
```
Open a terminal window in the typescript folder and run the npm install command to install the application dependencies.
Open Shared/graph.ts and take a moment to explore the imports at the top of the file. This code handles importing authentication and client symbols that are used in the Azure Function to call Microsoft Graph.
```
import { startDateTimeAsync, endDateTimeAsync } from './dateTimeFormat';
import { ClientSecretCredential } from '@azure/identity';
import { Client } from '@microsoft/microsoft-graph-client';
import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
import 'isomorphic-fetch';
```
Tip

You'll also see imports from dateTimeFormat.ts which are used later in this exercise. startDateTimeAsync and endDateTimeAsync are used while creating a Microsoft Teams meeting link to define start date and end date for the meeting.
Take a moment to examine clientSecretCredential and appGraphClient. They'll be used later in the authentication process and when calling the Microsoft Graph API:
```
let clientSecretCredential;
let appGraphClient;
```

Locate the ensureGraphForAppOnlyAuth function:

ClientSecretCredential uses the Tenant Id, Client Id and Client Secret values from the Microsoft Entra ID app.
The authProvider object is defined as a Microsoft Entra ID app that will authenticate in the background and use app-only permissions (such as Calendars.ReadWrite) to make Microsoft Graph API calls.

function ensureGraphForAppOnlyAuth() {
    if (!clientSecretCredential) {
        clientSecretCredential = new ClientSecretCredential(
            process.env.TENANT_ID,
            process.env.CLIENT_ID,
            process.env.CLIENT_SECRET
        );
    }

    if (!appGraphClient) {
        const authProvider = new TokenCredentialAuthenticationProvider(
        clientSecretCredential, {
            scopes: [ 'https://graph.microsoft.com/.default' ]
        });

        appGraphClient = Client.initWithMiddleware({
            authProvider: authProvider
        });
    }
}

Take a moment to explore the createNewMeetingAsync function. It posts data to the Microsoft Graph Calendar Events API, which dynamically creates an event in a user's calendar and returns the new event details:

async function createNewMeetingAsync(userId) {
    ensureGraphForAppOnlyAuth();
    let startTime = await startDateTimeAsync();
    let endTime = await endDateTimeAsync();
    const newMeeting = `/users/${userId}/calendar/events`;

    const event = {
    subject: 'Customer Service Meeting',
    start: {
        dateTime: startTime,
        timeZone: 'UTC'
    },
    end: {
        dateTime: endTime,
        timeZone: 'UTC'
    },
    isOnlineMeeting: true
    };

    const newEvent = await appGraphClient.api(newMeeting).post(event);    
    return newEvent;     
}

export default createNewMeetingAsync;

Go to server/typescript/src/functions/httpTriggerTeamsUrl.ts and explore the Http Trigger function:

createNewMeetingAsync is imported from graph.ts. It handles creating and retrieving new event details.
userId is retrieved from local.settings.json inside the Http Trigger function. This retrieval is done by accessing the USER_ID environment variable by using process.env.USER_ID.
When the function is triggered, it calls createNewMeetingAsync with the defined user id and returns the new event details in teamMeetingLink parameter.
The function accesses the Teams meeting join URL by calling meeting.onlineMeeting.joinUrl and returns the value in the body of the response.

import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
import createNewMeetingAsync from '../../Shared/graph';

let teamsMeetingLink;

export async function httpTriggerTeamsUrl(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    context.log("Request received");
    const userId = process.env.USER_ID;
    context.log('UserId', userId);

    teamsMeetingLink = await createNewMeetingAsync(userId);
    const body = JSON.stringify(teamsMeetingLink);
    const meeting = JSON.parse(body);
    context.log("meeting:", meeting);

    return {
        // status: 200, /* Defaults to 200 */
        body: meeting.onlineMeeting.joinUrl
    }    
};

app.http('httpTriggerTeamsUrl', {
    methods: ['GET'],
    authLevel: 'anonymous',
    handler: httpTriggerTeamsUrl
});

export default httpTriggerTeamsUrl;

Use a terminal window to run npm start in the samples/acs-video-to-teams-meeting/server/typescript folder to run the function locally.

Calling the Azure Function from React

Now that the httpTriggerTeamsUrl function is ready to use, let's call it from the React app.
Expand the client/react folder.
Add an .env file into the folder with the following values:
```
REACT_APP_TEAMS_MEETING_FUNCTION=http://localhost:7071/api/httpTriggerTeamsUrl
REACT_APP_ACS_USER_FUNCTION=http://localhost:7071/api/httpTriggerAcsToken
```
These values will be passed into React as it builds so that you can easily change them as needed during the build process.
Open client/react/App.tsx file in VS Code.
Locate the teamsMeetingLink state variable in the component. Remove the hardcoded teams link and replace it with empty quotes:
```
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```

Locate the useEffect function and change it to look like the following. This handles calling the Azure Function you looked at earlier which creates a Teams meeting and returns the meeting join link:

useEffect(() => {
    const init = async () => {
        /* Commenting out for now
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        const res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        const user = await res.json();
        setUserId(user.userId);
        setToken(user.token);
        */

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        const resTeams = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        const link = await resTeams.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);

    }
    init();

}, []);

Save the file before continuing.
Open a terminal window, cd into the *react folder, and run npm start to build and run the application.
After the application builds and loads, you should see the ACS calling UI displayed and can then call into the Teams meeting that was dynamically created by Microsoft Graph.
Stop the terminal process by entering Ctrl + C in the terminal window.
Stop the Azure Functions project.

Note

Visit the Azure Communication Services documentation to learn more about extending Microsoft Teams meetings in other ways.

Dynamically Create an Azure Communication Services Identity and Token

42 minutes remaining

In this exercise you'll learn how to dynamically retrieve user identity and token values from Azure Communication Services using Azure Functions. Once retrieved, the values will be passed to the ACS UI composite to enable a call to be made by a customer.

Create ACS Identity and Token

C#
TypeScript

Open local.settings.json and update the ACS_CONNECTION_STRING value with the ACS connection string you saved in an earlier exercise.

Open Startup.cs in Visual Studio and explore the second AddSingleton() call in the Configure() method.

public override void Configure(IFunctionsHostBuilder builder)
{
    ...

    builder.Services.AddSingleton(static p =>
    {
        var config = p.GetRequiredService<IConfiguration>();
        var connectionString = config.GetValue<string>("ACS_CONNECTION_STRING");
        return new CommunicationIdentityClient(connectionString);
    });
}

The AddSingleton() call creates a CommunicationIdentityClient object using the ACS_CONNECTION_STRING value from local.settings.json.
Open ACSTokenFunction.cs and locate the constructor and field definitions.
- A field named Scopes is defined that includes the CommunicationTokenScope.VoIP scope. This scope is used to create the access token for the video call.
```
private static readonly CommunicationTokenScope[] Scopes = new[]
{
    CommunicationTokenScope.VoIP,
};
```
- The CommunicationIdentityClient singleton instance created in Startup.cs is injected into the constructor and assigned to the _tokenClient field.
```
private readonly CommunicationIdentityClient _tokenClient;

public ACSTokenFunction(CommunicationIdentityClient tokenClient)
{
    _tokenClient = tokenClient;
}
```

Explore the Run() method in ACSTokenFunction.cs:

[FunctionName("ACSTokenFunction")]
public async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req,
    ILogger log)
{
    var user = await _tokenClient.CreateUserAsync();
    var userToken = await _tokenClient.GetTokenAsync(user, Scopes);

    return new OkObjectResult(new 
    { 
        userId = user.Value.Id, 
        userToken.Value.Token, 
        userToken.Value.ExpiresOn 
    });
}

It defines a function named of ACSTokenFunction that can be called with an HTTP GET request.
A new ACS user is created by calling the _tokenClient.CreateUserAsync() method.
An access token used for video calls is created by calling the _tokenClient. GetTokenAsync() method.
The user ID and token are returned from the function as a JSON object.

Run the program by pressing F5 in Visual Studio or by selecting Debug --> Start Debugging from the menu. This will start the Azure Functions project and make the ACSTokenFunction available to call.

Note

If you're using VS Code you can open a terminal window in the GraphACSFunctions folder and run dotnet run.
Now that the Azure Functions are running locally, the client needs to be able to call into them to get the ACS user identity and token values.
Open samples/acs-to-teams-meeting/client/react/App.tsx file in your editor.
Locate the userId and token state variables in the component. Remove the hardcoded values and replace them with empty quotes:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

Locate the useEffect function and change it to look like the following to enable calling the Azure Function to retrieve an ACS user identity and token:

useEffect(() => {
    const init = async () => {
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        let user = await res.json();
        setUserId(user.userId);
        setToken(user.token);

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        let link = await res.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);
    }
    init();

}, []);

Save the file before continuing.
Open a terminal window and run npm start in the react folder. After it builds and loads you should see the ACS calling UI displayed and you can call into the Teams meeting that was dynamically created by Microsoft Graph.
Stop the React app by pressing Ctrl + C in the terminal window.
Stop the Azure Functions project.
Commit your git changes and push them to your GitHub repository using Visual Studio Code:
- Select the Source Control icon (3rd one down in the Visual Studio Code toolbar).
- Enter a commit message and select Commit.
- Select Sync Changes.

Open local.settings.json and update the ACS_CONNECTION_STRING value with the ACS connection string you saved in an earlier exercise.

Open server/typescript/src/functions/httpTriggerAcsToken.ts in Visual Studio Code. It has the following code:

import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
import { CommunicationIdentityClient } from '@azure/communication-identity';

export async function httpTriggerAcsToken(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    // Get ACS connection string from local.settings.json (or App Settings when in Azure)
    const connectionString = process.env.ACS_CONNECTION_STRING;
    let tokenClient = new CommunicationIdentityClient(connectionString);
    const user = await tokenClient.createUser();
    const userToken = await tokenClient.getToken(user, ["voip"]);
    return {
        jsonBody: { userId: user.communicationUserId, ...userToken }
    };
}

app.http('httpTriggerAcsToken', {
    methods: ['GET'],
    authLevel: 'anonymous',
    handler: httpTriggerAcsToken
});

export default httpTriggerAcsToken;

The function performs the following tasks:
- Imports CommunicationIdentityClient which will be used to create the user identity and token.
```
import { CommunicationIdentityClient } from '@azure/communication-identity';
```
- Gets the ACS connection string from an environment variable named ACS_CONNECTION_STRING.
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
Note

This is the connection string value you added into the local.settings.json file earlier.
- Creates a new CommunicationIdentityClient instance and passes the ACS connection string to it.
```
let tokenClient = new CommunicationIdentityClient(connectionString);
```
- Creates an ACS user and gets a Voice Over IP token.
```
const user = await tokenClient.createUser();
const userToken = await tokenClient.getToken(user, ["voip"]);
```
- Sends the userId and token values back to the caller.
```
return {
    jsonBody: { userId: user.communicationUserId, ...userToken }
};
```
Go to the server/typescript folder in a terminal window and run npm start.
Now that the Azure Functions are running locally, the client needs to be able to call into them to get the ACS user identity and token values.
Open client/react/App.tsx file in your editor.
Locate the userId and token state variables in the component. Remove the hardcoded values and replace them with empty quotes:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

Locate the useEffect function and change it to look like the following to enable calling the Azure Function to retrieve an ACS user identity and token:

useEffect(() => {
    const init = async () => {
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        let user = await res.json();
        setUserId(user.userId);
        setToken(user.token);

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        let link = await res.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);
    }
    init();

}, []);

Save the file before continuing.
Open a separate terminal and run npm start in the react folder. After it builds and loads you should see the ACS calling UI displayed and you can call into the Teams meeting that was dynamically created by Microsoft Graph.
Stop both of the terminal processes (React and Azure Functions) by selecting Ctrl + C.
Commit your git changes and push them to your GitHub repository using Visual Studio Code:
- Select the Source Control icon (3rd one down in the Visual Studio Code toolbar).
- Enter a commit message and select Commit.
- Select Sync Changes.

Deploy the App to Azure Static Web Apps

32 minutes remaining

In this exercise you'll learn how to deploy the ACS React app and the Azure Functions to the cloud using Azure Static Web Apps.

Azure Static Web Apps

Visit the Azure portal in your browser and sign in.
Type static web apps in the top search bar and select Static Web Apps from the options that appear.
Select Create in the toolbar.
Perform the following tasks:
- Select your subscription.
- Select the resource group to use (create a new one if needed). You can use the same resource group that you used for ACS if you'd like.
- Enter an Azure Static Web Apps name of acs-to-teams-meeting.
- Select the Free plan type.
- Select a region.
Select the GitHub radio button and sign in to your GitHub account.
After signing in, select your GitHub:
- Organization
- Repository: Select the MicrosoftCloud repository you forked earlier in this tutorial
- Branch: Select main
In the Build Details section perform the following tasks:
- Build Presets: React
- App location: /samples/acs-to-teams-meeting/client/react
- Api location:
- TypeScript
- C#
/samples/acs-to-teams-meeting/server/typescript

/samples/acs-to-teams-meeting/server/csharp
- Output location: build
Select Review + create.
Review the details and select Create.
Notice the URL that is created for your static web app. Copy the URL shown on the Overview screen to a file. You'll need it later in this exercise.
Select Settings --> Configuration for your new static web app.

Add all of the following key/value pairs into the Application settings by selecting the + Add button. Get the values from your local.settings.json in the server/typescript folder.

# Get the values from your local.settings.json file
TENANT_ID: <YOUR_VALUE>
CLIENT_ID: <YOUR_VALUE>
CLIENT_SECRET: <YOUR_VALUE>
USER_ID: <YOUR_VALUE>
ACS_CONNECTION_STRING: <YOUR_VALUE>

Select the Save button at the top of the Configuration screen in the Azure portal.
Now that you've finished setting up the Azure Static Web App, go back to your GitHub repository (the one you forked earlier) in the browser and notice a .yml file has been added into the .github/workflows folder.
Pull the latest changes from your GitHub repository to your machine by running the following command from the root of your local MicrosoftCloud repository:
```
git pull
```
Open the .yml file in the .github/workflows folder in VS Code and add the following YAML immediately after the ###### End of Repository/Build Configurations ###### comment. Replace the <YOUR_AZURE_SWA_DOMAIN> placeholders with your Azure Static Web Apps URL value.

IMPORTANT: Ensure that the env: property is indented properly. It should match up with the indentation of the with: property above it.
```
env: # Add environment variables here
    REACT_APP_ACS_USER_FUNCTION: https://<YOUR_AZURE_SWA_DOMAIN>/api/httpTriggerAcsToken
    REACT_APP_TEAMS_MEETING_FUNCTION: https://<YOUR_AZURE_SWA_DOMAIN>/api/httpTriggerTeamsUrl
```
Note

This will add environment variables into the build process for the React app so that it knows what APIs to call to get the ACS user token as well as to create a Teams meeting.
Save the .yml file and push the changes up to your GitHub repository. This will trigger a new build of the React application and then deploy it to your Azure Static Web App.
Once the build process completes, visit the URL for your Azure Static Web App and you should see the application running.
You've successfully deployed your application using Azure Static Web Apps!

Deploy the App to Azure Functions and Azure Container Apps

17 minutes remaining

Important

In addition to the pre-requisites listed for this tutorial, you'll also need to install the following tools on your machine to complete this exercise.

Azure CLI
If you're using VS Code, install the Azure Functions extension

In this exercise you'll learn how to deploy the Microsoft Graph and ACS functions discussed in earlier exercises to Azure Functions. You'll also build a container image and deploy it to Azure Container Apps.

Azure Container Apps

Deploy to Azure Functions

C#
TypeScript

Note

This section uses Visual Studio to publish the C# functions to Azure. If you'd prefer to use Visual Studio Code, you can follow the instructions in the Create a C# function in Azure using Visual Studio Code quickstart.

Open the samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln project in Visual Studio.
Right-click on the GraphACSFunctions project and select Publish.
Select Azure in the target section, then click Next.
Select Azure Function App (Windows), then click Next.
Select your subscription, then select + Create New.
Enter the following information:
- Function name: A globally unique name is required. Example: acsFunctions<YOUR_LAST_NAME>.
- Subscription: Select your subscription.
- Resource Group: Select a resource group you created earlier in this tutorial, or you can also create a new one.
- Hosting Plan: Consumption plan.
- Location: Select the region you'd like to deploy to.
- Azure Storage: Create a new one. (You can also select an existing storage account.)
- Azure Insights: Create a new one. (You can also select an existing storage account.)
Note

A globally unique name is required. You can make the name more unique by adding a number or your last name to the end of the name.
Once the Azure Function App is created you'll see a confirmation screen. Make sure the Run from package option is selected, then select Finish.
Select Publish to deploy the function to Azure.
Once the function is deployed to Azure, go to the Azure portal and select the Function App you created.
Copy the URL for the function you deployed. You'll use the value later in this exercise.
Select Settings --> Configuration in the left menu.
Select + New application setting button and add the following keys and values in the Application settings. You can retreive these values from local.settings.json in the GraphACSFunctions project.
```
# Retrieve these values from local.settings.json
TENANT_ID: <YOUR_VALUE>
CLIENT_ID: <YOUR_VALUE>
CLIENT_SECRET: <YOUR_VALUE>
USER_ID: <YOUR_VALUE>
ACS_CONNECTION_STRING: <YOUR_VALUE>
```
Select the Save button to save the settings.
Finally, you need to enable CORS (Cross-Origin Resource Sharing) for the function app to make the function app's APIs accessible from outside of your domain. Select Settings --> CORS in the left menu.
Enter * (accessible from any domains) in the Allowed Origins textbox, then select the Save button.

Let's get started by using VS Code to deploy the functions code to Azure Functions.

Open the server/typescript project folder.
You should have already run npm install and see a node_modules folder in the project root. If not, open a command window and run npm install to install the dependencies.
Open the VS Code command pallet (Shift+Cmd+P on Mac | Shift+Ctrl+P on Windows), and select Azure Functions: Create Function App in Azure.

Note

If you don't see this option, ensure you have the Azure Functions extension installed in VS Code.
You'll be prompted to enter the following information:
- Your Azure subscription name.
- The function name: acsFunctions<YOUR_LAST_NAME>.
Note

A globally unique name is required. You can make the name more unique by adding a number or your last name to the end of the name.
- The runtime stack - Select the latest Node.js LTS version.
- The region (select any region you'd like).
Once the Azure Function App is created, you'll see a message about viewing the details.
Go back to the command pallet in VS Code and select Azure Functions: Deploy to Function App. You'll be asked to select your subscription and the Function App name you created earlier.
Once the function is deployed to Azure, do the following:
- Select the Azure extension in VS Code (click the Azure icon in the sidebar).
- Expand your subscription.
- Expand your Function App.
- Right-click on the function and select Browse Website. Ensure the function app is working correctly before proceeding.
Copy the Azure Function domain to a local file. You'll use the value later in this exercise.

Deploy to Azure Container Apps

The first task you'll perform is to create a new Azure Container Registry (ACR) resource. Once the registry is created, you'll build an image and push it to the registry.
Open a command window and run the following command to login to your Azure subscription:
```
az login
```

Add the following shell variables substituting your values for the placeholders as appropriate. Add your <GITHUB_USERNAME> as a lowercase value and substitute your Azure Functions domain for the <AZURE_FUNCTIONS_DOMAIN> value (include the https:// in the domain value).

Bash
PowerShell

GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
ACR_NAME="aca"$GITHUB_USERNAME
AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

$GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
$RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
$ACR_NAME="aca"+$GITHUB_USERNAME
$AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

Create a new Azure Container Registry resource by running the following command:

Bash
PowerShell

az acr create \
    --resource-group $RESOURCE_GROUP \
    --name $ACR_NAME \
    --sku Basic \
    --admin-enabled true

az acr create `
    --resource-group $RESOURCE_GROUP `
    --name $ACR_NAME `
    --sku Basic `
    --admin-enabled true

Open the client/react/Dockerfile file in your editor and notice that the following tasks are performed:
- The React application is built and assigned to the build stage.
- The nginx server is configured and the output of the build stage is copied into the nginx server image.

Build the container image in Azure by running the following command from the root of the client/react folder. Replace <YOUR_FUNCTIONS_DOMAIN> with your Azure Functions domain that you copied to a local file earlier in this exercise.

Bash
PowerShell

az acr build --registry $ACR_NAME --image acs-to-teams-meeting \
  --build-arg REACT_APP_ACS_USER_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerAcsToken \
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerTeamsUrl .

az acr build --registry $ACR_NAME --image acs-to-teams-meeting `
  --build-arg REACT_APP_ACS_USER_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerAcsToken `
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerTeamsUrl .

Run the following command to list the images in your registry. You should see your new image listed.
```
az acr repository list --name $ACR_NAME --output table
```
Now that the image is deployed, you need to create an Azure Container App that can run the container.
Visit the Azure portal in your browser and sign in.
Type container apps in the top search bar and select Container Apps from the options that appear.
Select Create in the toolbar.

Note

Although you're using the Azure portal, a Container App can also be created by using the Azure CLI. For more information, see Quickstart: Deploy your first container app. You'll see an example of how the Azure CLI can be used at the end of this exercise as well.
Perform the following tasks:
- Select your subscription.
- Select the resource group to use (create a new one if needed). You can use the same resource group that you used for your ACS resource if you'd like. Copy your resource group name to the same local file where you stored your Azure Functions domain.
- Enter a Container app name of acs-to-teams-meeting.
- Select a region.
- Select Create new in the Container Apps Environment section.
- Enter an Environment name of acs-to-teams-meeting-env.
- Select the Create button.
- Select Next: App settings >.
Enter the following values in the Create Container App screen:
- Deselect the Use quickstart image checkbox.
- Name: acs-to-teams-meeting
- Image source: Azure Container Registry
- Registry: <YOUR_ACR_REGISTRY_NAME>.azurecr.io
- Image: acs-to-teams-meeting
- Image tag: latest
- CPU and Memory: 0.25 CPU cores, -.5 Gi memory
In the Application ingress settings section, do the following:
- Select the Enabled checkbox.
- Select the Accepting traffic from anywhere radio button.
This will create an entry point (ingress) for your React application and allow it to be called from anywhere. Azure Container Apps redirects all traffic to HTTPS.
- Target Port: 80

Select Review + create. Once validation passes, select the Create button.

If you get an error it may be due to your container apps environment being inactive for too long. The simplest solution will be to go through the process of creating the container app again. Alternatively, you can run the following command to create the container app using the Azure CLI:

Bash
PowerShell

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP \
    --location westus --image acs-to-teams-meeting \
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env \
    --ingress-enabled true --ingress-target-port 80 --ingress-type External \
    --ingress-protocol Https --ingress-traffic Anywhere

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP `
    --location westus --image acs-to-teams-meeting `
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env `
    --ingress-enabled true --ingress-target-port 80 --ingress-type External `
    --ingress-protocol Https --ingress-traffic Anywhere

Once your container app deployment completes, navigate to it in the Azure portal and select the Application Url on the Overview screen to view the application running in the nginx container!

Audio/Video Calling from a Custom App into a Teams Meeting

What You'll Build in this Tutorial

Overview of the Application Solution

Prerequisites

Technologies used in this tutorial include

Create an Azure Communication Services Resource

Integrate Azure Communication Services Calling into a React App

Dynamically Create a Microsoft Teams Meeting using Microsoft Graph

Creating a local.settings.json File

Calling the Azure Function from React

Dynamically Create an Azure Communication Services Identity and Token

Deploy the App to Azure Static Web Apps

Deploy the App to Azure Functions and Azure Container Apps

Deploy to Azure Functions

Deploy to Azure Container Apps

Congratulations!

You've completed this tutorial

Feedback