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

1. Open the samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln in Visual Studio or open the GraphACSFunctions folder in Visual Studio Code.

2. Go to the GraphACSFunctions project and create a local.settings.json file with the following values:

   {
       "IsEncrypted": false,
       "Values": {
           "FUNCTIONS_WORKER_RUNTIME": "dotnet-isolated",
           "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.

3. 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.3.1" />
   <PackageReference Include="Azure.Identity" Version="1.11.2" />
   <PackageReference Include="Microsoft.Graph" Version="5.51.0" />
   

4. Go to Program.cs and note the following code in the ConfigureServices method:

       var host = new HostBuilder()
           .ConfigureFunctionsWebApplication()
           .ConfigureServices(services => {
               services.AddApplicationInsightsTelemetryWorkerService();
               services.ConfigureFunctionsApplicationInsights();
               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,
                       ["https://graph.microsoft.com/.default"]
                   );
               });
   
               ...
   
               services.AddSingleton<IGraphService, GraphService>();
           })
           .Build();
   }
   

   • 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.

5. Open Services/GraphService.cs.

6. 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
               .PostAsync(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.

7. 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;
   

8. Locate the Run method:

   [Function("HttpTriggerTeamsUrl")]
   public async Task<HttpResponseData> Run(
       [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
       ILogger log)
   {
       var response = req.CreateResponse(HttpStatusCode.OK);
       await response.WriteStringAsync(await _graphService.CreateMeetingAsync());
       return response;
   }
   

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

9. 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.

1. Open the samples/acs-to-teams-meeting/server/typescript project folder in Visual Studio Code.

2. 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.

3. 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
   

4. Open a terminal window in the typescript folder and run the npm install command to install the application dependencies.

5. 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.

6. 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;
   

7. 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
           });
       }
   }
   

8. 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;
   

9. 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;
   

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

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

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

   var host = new HostBuilder()
       .ConfigureFunctionsWebApplication()
       .ConfigureServices(services => {
   
           ...
   
           services.AddSingleton(static p =>
           {
               var config = p.GetRequiredService<IConfiguration>();
               var connectionString = config.GetValue<string>("ACS_CONNECTION_STRING");
               return new CommunicationIdentityClient(connectionString);
           });
   
           ...
   
       })
       .Build();
   }
   

3. The AddSingleton() call creates a CommunicationIdentityClient object using the ACS_CONNECTION_STRING value from local.settings.json.

4. 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 =
     [
         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;
     }
     

5. Explore the Run() method in ACSTokenFunction.cs:

   [Function("HttpTriggerAcsToken")]
   public async Task<HttpResponseData> Run(
       [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
       ILogger log)
   {
       var user = await _tokenClient.CreateUserAsync();
       var userToken = await _tokenClient.GetTokenAsync(user, Scopes);
   
       var response = req.CreateResponse(HttpStatusCode.OK);
       await response.WriteAsJsonAsync(
           new
           {
               userId = user.Value.Id,
               userToken.Value.Token,
               userToken.Value.ExpiresOn
           }
       );
       return response;
   }
   

   • It defines a function named of HttpTriggerAcsToken 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.

6. 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 func start. This assumes that you have the Azure Functions Core Tools installed on your machine.

7. 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.

8. Open samples/acs-to-teams-meeting/client/react/App.tsx file in your editor.

9. 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>('');
   

10. 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();
    
    }, []);
    

11. Save the file before continuing.

12. 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.

13. Stop the React app by pressing Ctrl + C in the terminal window.

14. Stop the Azure Functions project.

15. 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.

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

2. 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;
   

3. 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 }
     };
     

4. Go to the server/typescript folder in a terminal window and run npm start.

5. 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.

6. Open client/react/App.tsx file in your editor.

7. 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>('');
   

8. 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();
   
   }, []);
   

9. Save the file before continuing.

10. 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.

11. Stop both of the terminal processes (React and Azure Functions) by selecting Ctrl + C.

12. 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.

1. Open the samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln project in Visual Studio.

2. Right-click on the GraphACSFunctions project and select Publish.

3. Select Azure in the target section, then click Next.

4. Select Azure Function App (Windows), then click Next.

5. Select your subscription, then select + Create New.

6. 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.

7. 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.

8. Select Publish to deploy the function to Azure.

9. Once the function is deployed to Azure, go to the Azure portal and select the Function App you created.

10. Copy the URL for the function you deployed. You'll use the value later in this exercise.

11. Select Settings --> Configuration in the left menu.

12. 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>
    

13. Select the Save button to save the settings.

14. 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.

15. 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.

1. Open the server/typescript project folder.

2. 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.

3. 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.

4. 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).

5. Once the Azure Function App is created, you'll see a message about viewing the details.

6. 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.

7. 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.

8. Copy the Azure Function domain to a local file. You'll use the value later in this exercise.