Integrate Azure Communication Services Calling into a React App

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.

1. Visit GitHub and sign in. If you don't already have a GitHub account, you can select the Sign up option to create one.

2. Visit the Microsoft Cloud GitHub Repository.

3. Select the Fork option to add the repository to your desired GitHub organization/account.

   

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

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

6. Expand the client/react folder.

7. Open the package.json file in VS Code and note the following ACS packages are included:

   @azure/communication-common 
   @azure/communication-react
   

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

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

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

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

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

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

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

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

16. Save the file before continuing.

17. Run npm start in your terminal window to run the application. Ensure you run the command within the react folder.

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

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

Next Step