Part 2 - Build a meetings app with Azure Communication Services, Microsoft Graph and Microsoft Teams

Microsoft

Feb 07, 2023

Dynamically Creating Teams Meetings using Microsoft Graph

Welcome back to the blog series for building custom communication applications. This article is part 2 in the series. You may review part 1 here before learning more about Dynamically creating Teams Meetings using Microsoft Graph.

In the previous article, you learned how to get started with Azure Communication Services and enabled audio/video communication in your React app by using Azure Communication Services. also learned that Azure Communication Services requires a Microsoft Teams meeting URL to enable interoperability between external users and Microsoft Teams users. For testing purposes, you can manually create a meeting in Microsoft Teams and use the meeting URL in your React app, but in this article you will learn how to automate that process.

The article is based on a step-by-step tutorial that you can access HERE. Additional articles in the series will walk you through integrating services across the Microsoft Cloud to enable the full audio/video calling solution.

Dynamically Creating Microsoft Teams Meetings

For this article, we are going to use the example of a developer creating a customer care app that can be used for instant communication between support agents and customers. Customers can use a simple web or mobile interface to initiate a call with support agents and support agents can pick up the call through Microsoft Teams. Developers can integrate this capability into their app by enabling interoperability between Azure Communication Services and Microsoft Teams.

When a customer initiates a call in the app, the app needs to dynamically create a Teams meeting and provide the meeting URL to ACS. This allows the customer to start the call and then connect to a support agent who joins using Microsoft Teams. To build a smooth experience for your customers, you can use the Microsoft Graph API to create Microsoft Teams meetings dynamically whenever a customer initiates a call to talk with an agent.

What is Microsoft Graph?

Microsoft Graph is the gateway to data and intelligence in the Microsoft 365 Platform. Microsoft Graph exposes Rest APIs and client libraries to access data across Microsoft 365 core services such as Microsoft Teams, Outlook, Calendar, To Do, People, Planner, OneDrive, OneNote and more. There are hundreds of datasets provided to developers through Microsoft Graph. Not only can developers access the data, but they can also build custom experiences on top of Microsoft 365 Platform by accessing the available data using the power of Microsoft Graph. Scenarios like the following can be built with Microsoft Graph REST APIs and SDKs:

Get your to-do tasks every morning at 9 am
Stay up to date quickly by viewing unread emails
Receive unread chat messages as a summary
Create a Teams meeting (the subject of this article)

Microsoft Graph plays a significant role when building scenarios upon the Microsoft ecosystem to boost productivity, collaboration, education, people, and workplace intelligence!

In the custom ACS communication app scenario discussed here, you can leverage Microsoft Graph to create Microsoft Teams meetings dynamically and enable communication between external users and Microsoft Teams users through Azure Communication Services.

Creating Teams Meetings by using Microsoft Graph and Azure Functions

Developers can automate the process of creating a Microsoft Teams meeting for custom communication app by consuming Microsoft Graph API through Azure Functions. There are three steps to follow for achieving successful integration.

Integrate Azure Functions

Azure Functions is a serverless solution that allows developers to write less code and maintain less infrastructure. The cloud infrastructure provides all the necessary features to keep your applications running, so that you can focus on building your app.

In the React app, you’ll leverage an Azure Functions HTTP Trigger to capture the request when a customer wants to initiate a call with an agent. When the request is received through the HTTP Trigger, your Azure Function will make a call to Microsoft Graph to dynamically create a new Teams meeting.

Make an HTTP request using the Microsoft Graph API

To make an HTTP request using the Microsoft Graph API, you first need to integrate authentication in your app. In this scenario, you may set up your Azure Active Directory app for Deamon app authentication that handles the authentication process in the background without needing any user credentials (only are required). Once authentication is configured, the Deamon app will use the Application Permissions to make the Microsoft Graph API request, and dynamically create a Microsoft Teams meeting.

You will create an HTTP Post request for to create a new meeting event on Microsoft Teams as shown below:

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;

Upon a successful request, Azure Functions will receive a response from Microsoft Graph about the details of your new Teams meeting.

When the meeting is successfully created, customer service agents will see the meeting invite in their calendars and join it by clicking the link in the invite. To create a calendar invite together with a Microsoft Teams meeting link, the Microsoft Graph Calendar events API /calendar/events is used in this example. If you prefer to create a Microsoft Teams meeting link without a calendar invite, the Microsoft Graph onlineMeeting API is another option that can be used. A comparison of these two options can be found in the Choose an API in Microsoft Graph to create and join online meetings document.

Calling Azure Functions from React to Retrieve the Teams Meeting URL

As a user visits the customer service app, React will make a fetch call to the Azure Function shown earlier, wait for the response, access the Teams meeting URL, and pass it to the ACS UI calling composite component.

To handle this functionality, the React app defines a local state variable named teamsMeetingLink as well as a function named setTeamsMeetingLink using the useState() hook:

const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');

To make the call to the Azure Function, the useEffect() hook is used along with a fetch call:

useEffect(() => {
  const init = async () => {

    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);
    console.log('Teams meeting link', link);
  }
  init();
}, []);

After the fetch call returns, the response text is retrieved and passed to the setTeamsMeetingLink() function. Notice that an empty array is passed to useEffect(). This ensures that it is only called once as the component loads. The URL passed to the fetch call is retrieved from an environment variable named REACT_APP_TEAMS_MEETING_FUNCTION that is available to the React build process.

The teamsMeetingLink value returned from the fetch call is then encapsulated in the callAdapterArgs object discussed earlier in the previous post. It handles defining the user identity, the security token to use to make the call using ACS, the user display name, as well as the Teams meeting link URL.

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

const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);

Once the callAdapterArgs object is initialized with the proper data, it is passed into an Azure Communication Services React hook called useAzurecommunicationCallAdapter and assigned to a constant named callAdapter. The callAdapter object is then bound to the ACS UI composite component, the calling UI is rendered by the component in the browser, and the user can then make a call into the Microsoft Teams meeting that was created by Microsoft Graph.

if (callAdapter) {
  return (
    <div>
      <h1>Contact Customer Service</h1>
      <div className="wrapper">
        <CallComposite
          adapter={callAdapter}
        />
      </div>
    </div>
  );
}

To learn more about how to integrate Azure Communication Services and Microsoft Teams interoperability into your app, please visit the Audio/Video Calling from a Custom App into a Teams Meeting tutorial.

Summary

In this article you learned how Azure Functions can be used with Microsoft Graph to dynamically create a Microsoft Teams meeting event. You saw how a React client can send a request to Azure Functions and receive a meeting URL as a response. Once the meeting URL is received by the client, it is passed into the Azure Communication Services calling component and used to make the audio/video call. A customer service agent can then join the meeting in Microsoft Teams, admit the customer into the meeting, and provide the customer with the service they need.

Learn more about Azure Communication Services and Microsoft Teams Interoperability with the following resources: