Integrieren von Azure Communication Services Calling in eine React-App

In dieser Übung integrieren Sie das ACS UI Calling Composite in eine React-App, um Audio-/Videoanrufe von einer benutzerdefinierten App in eine Microsoft Teams-Besprechung zu ermöglichen.

1. Besuchen Sie GitHub , und melden Sie sich an. Wenn Sie noch nicht über ein GitHub-Konto verfügen, können Sie die Option " Registrieren " auswählen, um ein Konto zu erstellen.

2. Besuchen Sie das Microsoft Cloud GitHub-Repository.

3. Wählen Sie die Option Fork aus, um das Repository zu Ihrer gewünschten GitHub Organisation oder Ihrem gewünschten Konto hinzuzufügen.

   

4. Führen Sie den folgenden Befehl aus, um dieses Repository auf Ihrem Computer zu klonen. Ersetzen Sie <YOUR_ORG_NAME> durch Ihren GitHub-Organisations-/Kontonamen.

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

5. Öffnen Sie den Ordner samples/acs-to-teams-meeting im Projekt Visual Studio Code.

6. Erweitern Sie den Client-/React-Ordner .

7. Öffnen Sie die package.json Datei in VS Code, und beachten Sie, dass die folgenden ACS-Pakete enthalten sind:

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

8. Überprüfen Sie, ob npm 10 oder höher installiert ist, indem Sie ein Terminalfenster öffnen und den folgenden Befehl ausführen:

   npm --version
   

   Tipp

   Wenn Sie npm 10 oder höher nicht installiert haben, können Sie npm auf die neueste Version aktualisieren, indem Sie diese ausführen npm install -g npm.

9. Öffnen Sie ein Terminalfenster, und führen Sie den npm install Befehl im React-Ordner aus, um die Anwendungsabhängigkeiten zu installieren.

10. Öffnen Sie App.tsx , und nehmen Sie sich einen Moment Zeit, um die Importe am Anfang der Datei zu erkunden. Diese behandeln das Importieren von ACS-Sicherheits- und Audio-/Videoanrufsymbolen, die in der App verwendet werden.

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

    Hinweis

    Sie sehen, wie die CallComposite Komponente später in dieser Übung verwendet wird. Sie bietet die hauptfunktionen der Benutzeroberfläche für Azure Communication Services, um einen Audio-/Videoanruf aus der App in eine Microsoft Teams-Besprechung zu ermöglichen.

11. Suchen Sie die App Komponente, und führen Sie die folgenden Aufgaben aus:

    • Nehmen Sie sich einen Moment Zeit, um die useState Definitionen in der Komponente zu untersuchen.
    • Ersetzen Sie die leeren Anführungszeichen der userIduseState Funktion durch den ACS-Benutzeridentitätswert, den Sie in der vorherigen Übung kopiert haben.
    • Ersetzen Sie die leeren Anführungszeichen der tokenuseState Funktion durch den ACS-Tokenwert, den Sie in der vorherigen Übung kopiert haben.
    • Ersetzen Sie die leeren Anführungszeichen der teamsMeetingLinkuseState Funktion durch den Wert des Teams-Besprechungslinks, den Sie in der vorherigen Übung kopiert haben.

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

    Hinweis

    Später in diesem Lernprogramm erfahren Sie, wie Sie die Werte userId, token und teamsMeetingLink dynamisch abrufen können.

12. Nehmen Sie sich einen Moment Zeit, um die useMemo Funktionen in der App Komponente zu erkunden.

    • Die credentialuseMemo Funktion erstellt eine neue AzureCommunicationTokenCredential Instanz, sobald das Token einen Wert aufweist.
    • Die callAdapterArgsuseMemo Funktion gibt ein Objekt zurück, das die Argumente enthält, die zum Tätigen eines Audio-/Videoanrufs verwendet werden. Beachten Sie, dass die Werte userId, credential und teamsMeetingLink in den ACS-Aufrufargumenten verwendet werden.

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

    Hinweis

    useMemo wird in diesem Szenario verwendet, weil wir nur das AzureCommunicationTokenCredential-Objekt und die Aufrufadapterargumente jeweils einmal erstellt haben wollen, wenn die erforderlichen Parameter übergeben werden. Weitere Details zu useMemo finden Sie hier.

13. Sobald credentials und callAdapterArgs bereit sind, kümmert sich die folgende Zeile um das Erstellen eines ACS-Anrufadapters mithilfe des von ACS bereitgestellten React-Hooks useAzureCommunicationCallAdapter. Das callAdapter Objekt wird später in der Benutzeroberfläche verwendet, die die zusammengesetzte Komponente aufruft.

    const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
    

    Hinweis

    Da es sich bei useAzureCommunicationCallAdapter um einen React-Hook handelt, wird callAdapter erst dann ein Wert zugewiesen, wenn der callAdapterArgs Wert gültig ist.

14. Zuvor haben Sie der Benutzeridentität, dem Token und dem Teams-Besprechungslink Statuswerte in der App Komponente zugewiesen. Das funktioniert jetzt gut, aber in einer späteren Übung erfahren Sie, wie Sie diese Werte dynamisch abrufen können. Da Sie die Werte zuvor festgelegt haben, kommentieren Sie den Code in der useEffect Funktion wie folgt aus. Nachdem Sie die Azure-Funktionen in den nächsten Übungen ausgeführt haben, überprüfen Sie diesen Code erneut.

    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. Suchen Sie den folgenden JSX-Code. Es verwendet das Symbol CallComposite, das Sie beim Import gesehen haben, um die Benutzeroberfläche zu rendern, die für einen Audio-/Videoanruf von der React-App in eine Teams-Besprechung verwendet wird. Die von Ihnen zuvor erkundete callAdapter wird an die Eigenschaft adapter übergeben, um die erforderlichen Argumente bereitzustellen.

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

16. Speichern Sie die Datei, bevor Sie fortfahren.

17. Führen Sie npm start in Ihrem Terminalfenster aus, um die Anwendung auszuführen. Stellen Sie sicher, dass Sie den Befehl im React-Ordner ausführen.

18. Nachdem die Anwendung kompiliert wurde, sollte eine Telefon-Benutzeroberfläche angezeigt werden. Aktivieren Sie die Auswahl Ihres Mikrofons und der Kamera, und initiieren Sie den Anruf. Sie sollten sehen, dass Sie sich in einem Warteraum befinden. Wenn Sie an der Zuvor in Microsoft Teams eingerichteten Besprechung teilnehmen, können Sie dem Gast die Teilnahme an der Besprechung gestatten.

19. Drücken Sie STRG+C , um die Anwendung zu beenden. Nachdem Sie es nun erfolgreich ausgeführt haben, erfahren Sie, wie Sie die ACS-Benutzeridentität und das AcS-Benutzertoken dynamisch abrufen und automatisch eine Microsoft Teams-Besprechung erstellen und die Teilnahme-URL mithilfe von Microsoft Graph zurückgeben können.

Nächster Schritt