Integracja funkcji połączeń usług Azure Communication Services w aplikacji React

W tym ćwiczeniu dodasz kompozytowy interfejs użytkownika ACS do aplikacji w React, aby umożliwić wykonywanie połączeń audio/wideo z aplikacji niestandardowej do spotkania Microsoft Teams.

1. Odwiedź witrynę GitHub i zaloguj się. Jeśli nie masz jeszcze konta usługi GitHub, możesz wybrać opcję Utwórz konto, aby je utworzyć.

2. Odwiedź repozytorium Microsoft Cloud GitHub.

3. Wybierz opcję Rozgałęzienie, aby dodać repozytorium do żądanego konta/organizacji usługi GitHub.

   

4. Uruchom następujące polecenie, aby sklonować to repozytorium na Twoje urządzenie. Zastąp <YOUR_ORG_NAME> nazwą organizacji/konta usługi GitHub.

   git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
   

5. Otwórz folder projektu samples/acs-to-teams-meeting w programie Visual Studio Code.

6. Rozwiń folder client/react.

7. Otwórz plik package.json w programie VS Code i zwróć uwagę na następujące pakiety ACS:

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

8. Sprawdź dokładnie, czy masz zainstalowany program npm 10 lub nowszy, otwierając okno terminalu i uruchamiając następujące polecenie:

   npm --version
   

   Wskazówka

   Jeśli nie masz zainstalowanego narzędzia npm 10 lub nowszego, możesz zaktualizować narzędzie npm do najnowszej wersji, uruchamiając polecenie npm install -g npm.

9. Otwórz okno terminalu i uruchom npm install polecenie w folderze react , aby zainstalować zależności aplikacji.

10. Otwórz plik App.tsx i pośmiń chwilę na zapoznanie się z importami w górnej części pliku. Obsługują one importowanie symboli zabezpieczeń usługi ACS i połączeń audio/wideo, które będą używane w aplikacji.

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

    Uwaga / Notatka

    Zobaczysz, jak CallComposite składnik jest używany w dalszej części tego ćwiczenia. Udostępnia ona podstawowe funkcje interfejsu użytkownika dla usług Azure Communication Services w celu umożliwienia nawiązywania połączenia audio/wideo z aplikacji na spotkaniu w usłudze Microsoft Teams.

11. App Znajdź składnik i wykonaj następujące zadania:

    • Poświęć chwilę na zbadanie useState definicji w komponencie.
    • userId useState Zastąp puste cudzysłowy funkcji wartością tożsamości użytkownika usługi ACS skopiowaną w poprzednim ćwiczeniu.
    • token useState Zastąp puste cudzysłowy funkcji wartością tokenu ACS skopiowaną w poprzednim ćwiczeniu.
    • teamsMeetingLink useState Zastąp puste cudzysłowy funkcji wartością linku spotkania usługi Teams skopiowaną w poprzednim ćwiczeniu.

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

    Uwaga / Notatka

    W dalszej części tego samouczka zobaczysz, jak dynamicznie pobierać wartości userId, token i teamsMeetingLink.

12. Poświęć chwilę na zapoznanie się z funkcjami useMemo w składniku App.

    • Funkcja credentialuseMemo tworzy nowe AzureCommunicationTokenCredential wystąpienie, gdy token ma wartość.
    • Funkcja callAdapterArgsuseMemo zwraca obiekt, który zawiera argumenty używane do wywołania audio/wideo. Zwróć uwagę, że używa wartości userId, credential i teamsMeetingLink w argumentach wywołań ACS.

    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]);
    

    Uwaga / Notatka

    useMemo jest używany w tym scenariuszu, ponieważ chcemy, aby obiekt AzureCommunicationTokenCredential, a także argumenty adaptera wywołań, były tworzone tylko raz w miarę przekazywania wymaganych parametrów. Zobacz dodatkowe szczegóły dotyczące useMemo tutaj.

13. Gdy credentials oraz callAdapterArgs będą gotowe, poniższa linia obsługuje tworzenie adaptera wywołania ACS, używając hooka React dostarczonego przez ACS. Obiekt callAdapter będzie używany później w interfejsie użytkownika wywołującym składnik złożony.

    const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
    

    Uwaga / Notatka

    Ponieważ useAzureCommunicationCallAdapter jest hookiem Reacta, nie przypisze wartości do callAdapter do momentu, aż callAdapterArgs będzie prawidłowa.

14. Wcześniej przypisałeś tożsamość użytkownika, token i link do spotkania w Teams do wartości stanu w składniku App. To działa dobrze jak na razie, ale w późniejszym ćwiczeniu dowiesz się, jak dynamicznie pobierać te wartości. Ponieważ wartości zostały ustawione wcześniej, zakomentuj kod w funkcji useEffect, jak pokazano następująco. Po uruchomieniu usługi Azure Functions w następnych ćwiczeniach ponownie przejdziesz do tego kodu.

    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. Znajdź następujący kod JSX. Używa on symbolu CallComposite zaimportowanego do wyświetlania interfejsu użytkownika, który służy do nawiązywania połączenia audio/wideo z aplikacji React na spotkanie na platformie Teams. Element callAdapter, który wcześniej eksplorowałeś, jest przekazywany do właściwości adapter, aby dostarczyć wymagane argumenty.

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

16. Zapisz plik przed kontynuowaniem.

17. Uruchom polecenie npm start w oknie terminalu, aby uruchomić aplikację. Upewnij się, że uruchomisz polecenie w folderze react .

18. Po utworzeniu aplikacji powinien zostać wyświetlony interfejs użytkownika do nawiązywania połączeń. Umożliw wybór mikrofonu i kamery i zainicjuj rozmowę. Powinno zostać wyświetlone, że znajdujesz się w poczekalni. Jeśli dołączysz do spotkania skonfigurowanego wcześniej w usłudze Microsoft Teams, możesz zezwolić gościowi na wejście na spotkanie.

19. Naciśnij Ctrl + C , aby zatrzymać aplikację. Teraz, po pomyślnym uruchomieniu, przyjrzyjmy się, jak dynamicznie uzyskać tożsamość użytkownika i token usługi ACS oraz zautomatyzować tworzenie spotkania w Microsoft Teams i zwrócić adres URL dołączenia przy użyciu Microsoft Graph.

Następny krok