Partager via

Intégrer Azure Communication Services Calling à une application React

Dans cet exercice, vous allez ajouter le composant d'appel de l'interface utilisateur ACS dans une application React pour permettre de passer des appels audio/vidéo à partir d’une application personnalisée vers une réunion Microsoft Teams.

ACS dans React

  1. Visitez GitHub et connectez-vous. Si vous n’avez pas encore de compte GitHub, vous pouvez sélectionner l’option d’inscription pour en créer un.

  2. Visitez le référentiel GitHub Microsoft Cloud.

  3. Sélectionnez l’option Fork pour ajouter le référentiel à votre organisation/compte GitHub souhaitée.

    Fork a Repository

  4. Exécutez la commande suivante pour cloner ce référentiel sur votre ordinateur. Remplacez <YOUR_ORG_NAME> par le nom de votre organisation/compte GitHub.

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

  5. Ouvrez le dossier de projet samples/acs-to-teams-meeting dans Visual Studio Code.

  6. Développez le dossier client/react .

  7. Ouvrez le fichier package.json dans VS Code et notez que les packages ACS suivants sont inclus :

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

  8. Vérifiez que npm 10 ou version ultérieure est installé en ouvrant une fenêtre de terminal et en exécutant la commande suivante :

    npm --version

    Conseil / Astuce

    Si vous n’avez pas installé npm 10 ou version ultérieure, vous pouvez mettre à jour npm vers la dernière version en exécutant npm install -g npm.

  9. Ouvrez une fenêtre de terminal et exécutez la npm install commande dans le dossier React pour installer les dépendances de l’application.

  10. Ouvrez App.tsx et prenez un moment pour explorer les importations en haut du fichier. Ils gèrent l’importation des symboles d’appel audio/vidéo et de sécurité ACS qui seront utilisés dans l’application.

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

    Remarque

    Vous verrez comment le CallComposite composant est utilisé plus loin dans cet exercice. Il fournit les fonctionnalités principales de l’interface utilisateur pour Azure Communication Services afin d’activer l’exécution d’un appel audio/vidéo de l’application dans une réunion Microsoft Teams.

  11. Recherchez le App composant et effectuez les tâches suivantes :

    • Prenez un moment pour examiner les useState définitions du composant.
    • Remplacez les guillemets vides de la userIduseState fonction par la valeur d’identité utilisateur ACS que vous avez copiée dans l’exercice précédent.
    • Remplacez les guillemets vides de la tokenuseState fonction par la valeur du jeton ACS que vous avez copiée dans l’exercice précédent.
    • Remplacez les guillemets vides de la teamsMeetingLinkuseState fonction par la valeur du lien de réunion Teams que vous avez copiée dans l’exercice précédent.
    // 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>('');

    Remarque

    Plus loin dans ce tutoriel, vous allez voir comment récupérer les valeurs userId, token, et teamsMeetingLink de manière dynamique.

  12. Prenez un moment pour explorer les useMemo fonctions dans le App composant.

    • La credentialuseMemo fonction crée une AzureCommunicationTokenCredential instance une fois que le jeton a une valeur.
    • La callAdapterArgsuseMemo fonction retourne un objet qui a les arguments utilisés pour effectuer un appel audio/vidéo. Notez qu’il utilise les valeurs userId, credential, et teamsMeetingLink dans les arguments d'appel 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]);

    Remarque

    useMemo est utilisé dans ce scénario, car nous voulons uniquement que l’objet AzureCommunicationTokenCredential et les arguments de l’adaptateur d’appel soient créés une fois que les paramètres nécessaires sont passés. Affichez des détails supplémentaires sur useMemo ici.

  13. Une fois que credentials et callAdapterArgs sont prêts, la ligne suivante permet de créer un adaptateur d’appel ACS à l’aide du hook React fourni par ACS. L’objet callAdapter sera utilisé ultérieurement dans le composant composite appelant l’interface utilisateur.

    const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);

    Remarque

    Étant donné que useAzureCommunicationCallAdapter est un hook React, il n'attribuera pas de valeur à callAdapter tant que la valeur callAdapterArgs n'est pas valide.

  14. Précédemment, vous avez affecté l'identité d'utilisateur, le jeton et le lien de réunion Teams à des valeurs d'état dans le composant App. Cela fonctionne correctement pour l’instant, mais dans un exercice ultérieur, vous verrez comment récupérer dynamiquement ces valeurs. Étant donné que vous définissez les valeurs précédemment, commentez le code dans la useEffect fonction comme indiqué ci-dessous. Une fois que vous avez exécuté Azure Functions dans les exercices suivants, vous revisitez ce 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. Recherchez le code JSX suivant. Il utilise le CallComposite symbole que vous avez vu importé pour afficher l’interface utilisateur utilisée pour effectuer un appel audio/vidéo à partir de l’application React dans une réunion Teams. Ce que vous avez exploré plus tôt est transmis à sa propriété callAdapter pour fournir les arguments requis.

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

  16. Enregistrez le fichier avant de continuer.

  17. Exécutez npm start dans votre fenêtre de terminal pour exécuter l’application. Veillez à exécuter la commande dans le dossier React .

  18. Une fois les applications générées, une interface utilisateur d'appel doit s’afficher. Activez la sélection de votre microphone et de votre caméra et lancez l’appel. Vous devriez voir que vous êtes placé dans une salle d’attente. Si vous participez à la réunion que vous avez configurée précédemment dans Microsoft Teams, vous pouvez autoriser l’invité à participer à la réunion.

  19. Appuyez sur Ctrl +C pour arrêter l’application. Maintenant que vous l’avez correctement exécutée, examinons comment vous pouvez obtenir dynamiquement l’identité et le jeton de l’utilisateur ACS et créer automatiquement une réunion Microsoft Teams et retourner l’URL de participation à l’aide de Microsoft Graph.

Étape suivante

Créer dynamiquement une réunion Microsoft Teams à l’aide de Microsoft Graph

  • Last updated on