Appel audio/vidéo à partir d’une application personnalisée dans une réunion Teams

Article
Developer (Intermédiaire)
59 minutes avant achèvement

Niveau : intermédiaire

Dans ce tutoriel, vous allez découvrir comment Azure Communication Services peut être utilisé dans une application React personnalisée pour permettre à un utilisateur d’effectuer un appel audio/vidéo dans une réunion Microsoft Teams. Vous allez découvrir les différents blocs de construction qui peuvent être utilisés pour rendre ce scénario possible et être fourni avec des étapes pratiques pour vous guider dans les différents services cloud Microsoft impliqués.

Ce que vous allez générer dans ce tutoriel

Vue d’ensemble de la solution d’application

Solution audio/vidéo ACS

Prérequis

Node LTS - Node LTS est utilisé pour ce projet
git
Visual Studio Code ou un autre IDE de votre choix.
Extension Azure Functions pour VS Code
Azure Functions Core Tools
Abonnement Azure
Client développeur Microsoft 365
Compte GitHub
Visual Studio si vous utilisez la version C# du didacticiel. Visual Studio Code peut également être utilisé si vous le préférez.

Les technologies utilisées dans ce didacticiel sont les suivantes :

React
Azure Communication Services
Azure Functions
Microsoft Graph
Microsoft Teams

Créer une ressource Azure Communication Services

57 minutes restantes

Dans cet exercice, vous allez créer une ressource Azure Communication Services (ACS) dans le Portail Azure.

ACS dans le Portail Azure

Pour commencer, effectuez les tâches suivantes :

Visitez le Portail Azure dans votre navigateur et connectez-vous.
Tapez les services de communication dans la barre de recherche en haut de la page et sélectionnez Communication Services dans les options qui s’affichent.
Sélectionnez Créer dans la barre d’outils.
Effectuez les tâches suivantes :
- Sélectionnez votre abonnement Azure.
- Sélectionnez le groupe de ressources à utiliser (créez-en un s’il n’existe pas).
- Entrez un nom de ressource ACS. Ce doit être une valeur unique.
- Sélectionnez un emplacement de données.
Sélectionnez Vérifier + Créer , puis Créer.
Une fois votre ressource ACS créée, accédez-y, puis sélectionnez Paramètres -> Identités et jetons d’accès utilisateur.
Cochez la case Voix et Appel vidéo (VOIP).
Sélectionnez Générer.
Copiez les valeurs de jeton d’identité et d’accès utilisateur dans un fichier local. Vous aurez besoin des valeurs plus loin dans cet exercice.
Sélectionnez Paramètres :> clés et copiez la clé primaire chaîne de connexion valeur dans le fichier local où vous avez copié les valeurs d’identité et de jeton de l’utilisateur.
Pour exécuter l’application, vous aurez besoin d’un lien de réunion Teams. Accédez à Microsoft Teams, connectez-vous avec votre locataire développeur Microsoft 365, puis sélectionnez l’option Calendrier à gauche.

Conseil

Si vous ne disposez pas actuellement d’un compte Microsoft 365, vous pouvez vous inscrire à l’abonnement Microsoft 365 Developer Program . Il est gratuit pendant 90 jours et sera continuellement renouvelé tant que vous l’utilisez pour l’activité de développement. Si vous disposez d’un abonnement Visual Studio Enterprise ou Professionnel, les deux programmes incluent un abonnement Microsoft 365 développeur gratuit, actif pour la durée de vie de votre abonnement Visual Studio.
Sélectionnez une date/heure quelconque dans le calendrier, ajoutez un titre pour la réunion, invitez un utilisateur à partir de votre locataire développeur Microsoft 365, puis sélectionnez Enregistrer.
Sélectionnez la nouvelle réunion que vous avez ajoutée dans le calendrier et copiez le lien de réunion Teams qui s’affiche dans le même fichier que celui où vous avez stocké l’identité, le jeton et chaîne de connexion de l’utilisateur ACS.
Maintenant que votre ressource ACS est configurée et que vous disposez d’un lien de participation à une réunion Teams, nous allons mettre à jour l’application React et l’exécuter.

Intégrer Azure Communication Services Calling à une application React

47 minutes restantes

Dans cet exercice, vous allez ajouter l’interface utilisateur ACS appelant le composite dans une application React pour activer l’exécution d’appels audio/vidéo à partir d’une application personnalisée dans une réunion Microsoft Teams.

ACS dans React

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.
Visitez le référentiel GitHub Microsoft Cloud.
Sélectionnez l’option Fork pour ajouter le référentiel à votre organisation/compte GitHub souhaitée.
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
```
Ouvrez le dossier de projet samples/acs-to-teams-meeting dans Visual Studio Code.
Développez le dossier client/react .
Ouvrez le fichier package.json dans VS Code et notez que les packages ACS suivants sont inclus :
```
@azure/communication-common 
@azure/communication-react
```
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

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.
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.
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.
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 userId useState 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 token useState fonction par la valeur du jeton ACS que vous avez copiée dans l’exercice précédent.
- Remplacez les guillemets vides de la teamsMeetingLink useState 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 et tokenteamsMeetingLink les userIdvaleurs de manière dynamique.
Prenez un moment pour explorer les useMemo fonctions dans le App composant.
- La credential useMemo fonction crée une AzureCommunicationTokenCredential instance une fois que le jeton a une valeur.
- La callAdapterArgs useMemo fonction retourne un objet qui a les arguments utilisés pour effectuer un appel audio/vidéo. Notez qu’il utilise les userIdarguments d’appel credentialACS et teamsMeetingLink les valeurs.
```
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.
Une fois la credentials callAdapterArgs ligne prête, la ligne suivante gère la création d’un adaptateur d’appel ACS à l’aide du useAzureCommunicationCallAdapter 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é qu’il useAzureCommunicationCallAdapter s’agit d’un hook React, il n’affecte pas de valeur callAdapter tant que la callAdapterArgs valeur n’est pas valide.

Précédemment, vous avez affecté le lien d’identité, de jeton et de réunion Teams à des valeurs d’état dans le App composant. 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();

    */
}, []);

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. L’exploration callAdapter précédente est passée à sa adapter propriété pour fournir les arguments requis.
```
if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}
```
Enregistrez le fichier avant de continuer.
Exécutez npm start dans votre fenêtre de terminal pour exécuter l’application. Veillez à exécuter la commande dans le dossier React .
Une fois les applications générées, une interface utilisateur appelante 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.
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.

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

37 minutes restantes

Dans cet exercice, vous allez automatiser le processus de création d’un lien de réunion Microsoft Teams et de la transmission au service ACS à l’aide d’Azure Functions et de Microsoft Graph.

Créer une réunion Teams

Vous devez créer une application Microsoft Entra ID pour l’authentification d’application Démon. Dans cette étape, l’authentification sera gérée en arrière-plan avec les informations d’identification de l’application et une application Microsoft Entra ID utilisera les autorisations d’application pour effectuer des appels d’API Microsoft Graph. Microsoft Graph sera utilisé pour créer dynamiquement une réunion Microsoft Teams et retourner l’URL de la réunion Teams.
Procédez comme suit pour créer une application Microsoft Entra ID :
1. Accédez à Portail Azure et sélectionnez Microsoft Entra ID.
2. Sélectionnez l’onglet Inscription de l’application suivi de + Nouvelle inscription.
3. Renseignez les détails du nouveau formulaire d’inscription d’application, comme indiqué ci-dessous, puis sélectionnez Inscrire :
  - Nom : Application d’interopérabilité ACS Teams
  - Types de comptes pris en charge : comptes dans n’importe quel annuaire organisationnel (n’importe quel répertoire Microsoft Entra ID - Multilocataire) et comptes Microsoft personnels (par exemple, Skype, Xbox)
  - URI de redirection : laissez cette valeur vide
4. Une fois l’application inscrite, accédez aux autorisations d’API et sélectionnez + Ajouter une autorisation.
5. Sélectionnez Microsoft Graph suivi des autorisations d’application.
6. Sélectionnez l’autorisation Calendars.ReadWrite , puis sélectionnez Ajouter.
7. Après avoir ajouté les autorisations, sélectionnez Accorder le consentement administrateur pour <YOUR_ORGANIZATION_NAME>.
8. Accédez à l’onglet Certificats et secrets , sélectionnez + Nouveau secret client, puis sélectionnez Ajouter.
9. Copiez la valeur du secret dans un fichier local. Vous utiliserez la valeur plus loin dans cet exercice.
10. Accédez à l’onglet Vue d’ensemble et copiez les Application (client) ID valeurs Directory (tenant) ID dans le même fichier local que celui que vous avez utilisé à l’étape précédente.

Création d’un fichier local.settings.json

C#
TypeScript

Ouvrez visual samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln Studio ou ouvrez le dossier GraphACSFunctions dans Visual Studio Code.
Accédez au GraphACSFunctions projet et créez un local.settings.json fichier avec les valeurs suivantes :
```
{
    "IsEncrypted": false,
    "Values": {
        "FUNCTIONS_WORKER_RUNTIME": "dotnet-isolated",
        "TENANT_ID": "",
        "CLIENT_ID": "",
        "CLIENT_SECRET": "",
        "USER_ID": "",
        "ACS_CONNECTION_STRING": ""
    },
    "Host": {
        "LocalHttpPort": 7071,
        "CORS": "*",
        "CORSCredentials": false
    },
    "watchDirectories": [
        "Shared"
    ]
}
```
- Utilisez les valeurs que vous avez copiées dans le fichier local dans un exercice précédent pour mettre à jour les valeurs et CLIENT_SECRET les TENANT_IDCLIENT_ID valeurs.
- Définissez USER_ID avec l’ID d’utilisateur que vous souhaitez créer une réunion Microsoft Teams.
Vous pouvez obtenir l’ID d’utilisateur à partir de la Portail Azure.
- Connectez-vous à l’aide de votre compte d’administrateur du locataire du développeur Microsoft 365.
- Sélectionnez Microsoft Entra ID
- Accédez à l’onglet Utilisateurs de la barre latérale.
- Recherchez votre nom d’utilisateur et sélectionnez-le pour afficher les détails de l’utilisateur.
- Dans les détails de l’utilisateur, Object ID représente le User ID. Copiez la Object ID valeur et utilisez-la pour la USER_ID valeur dans local.settings.json.
Remarque

ACS_CONNECTION_STRING sera utilisé dans l’exercice suivant afin que vous n’ayez pas encore besoin de le mettre à jour.

Ouvrez GraphACSFunctions.sln situé dans le dossier acs-to-teams-meeting/server/csharp et notez qu’il inclut les packages Microsoft Graph et Identity suivants :

<PackageReference Include="Azure.Communication.Identity" Version="1.3.1" />
<PackageReference Include="Azure.Identity" Version="1.11.2" />
<PackageReference Include="Microsoft.Graph" Version="5.51.0" />

Accédez à Program.cs et notez le code suivant dans la ConfigureServices méthode :

    var host = new HostBuilder()
        .ConfigureFunctionsWebApplication()
        .ConfigureServices(services => {
            services.AddApplicationInsightsTelemetryWorkerService();
            services.ConfigureFunctionsApplicationInsights();
            services.AddSingleton(static p =>
            {
                var config = p.GetRequiredService<IConfiguration>();
                var clientSecretCredential = new ClientSecretCredential(
                    config.GetValue<string>("TENANT_ID"),
                    config.GetValue<string>("CLIENT_ID"),
                    config.GetValue<string>("CLIENT_SECRET")
                );

                return new GraphServiceClient(
                    clientSecretCredential,
                    ["https://graph.microsoft.com/.default"]
                );
            });

            ...

            services.AddSingleton<IGraphService, GraphService>();
        })
        .Build();
}

Ce code crée un GraphServiceClient objet qui peut être utilisé pour appeler Microsoft Graph à partir d’Azure Functions. Il s’agit d’un singleton et peut être injecté dans d’autres classes.
Vous pouvez effectuer des appels d’API Microsoft Graph avec des autorisations d’application uniquement (telles que Calendars.ReadWrite) en transmettant une ClientSecretCredential valeur au GraphServiceClient constructeur. Utilise ClientSecretCredential les valeurs et Client Secret les Tenant IdClient Id valeurs de l’application Microsoft Entra ID.

Ouvrez Services/GraphService.cs.

Prenez un moment pour explorer la CreateMeetingEventAsync méthode :

using System;
using System.Threading.Tasks;
using Microsoft.Graph;
using Microsoft.Extensions.Configuration;

namespace GraphACSFunctions.Services;

public class GraphService : IGraphService
{
    private readonly GraphServiceClient _graphServiceClient;
    private readonly IConfiguration _configuration;

    public GraphService(GraphServiceClient graphServiceClient, IConfiguration configuration)
    {
        _graphServiceClient = graphServiceClient;
        _configuration = configuration;
    }

    public async Task<string> CreateMeetingAsync()
    {
        var userId = _configuration.GetValue<string>("USER_ID");
        var newMeeting = await _graphServiceClient
            .Users[userId]
            .Calendar
            .Events
            .PostAsync(new()
            {
                Subject = "Customer Service Meeting",
                Start = new()
                {
                    DateTime = DateTime.UtcNow.ToString("yyyy-MM-ddTHH:mm:ss"),
                    TimeZone = "UTC"
                },
                End = new()
                {
                    DateTime = DateTime.UtcNow.AddHours(1).ToString("yyyy-MM-ddTHH:mm:ss"),
                    TimeZone = "UTC"
                },
                IsOnlineMeeting = true
            });
        return newMeeting.OnlineMeeting.JoinUrl;
    }
}

GraphServiceClient et IConfiguration les objets sont injectés dans le constructeur et affectés aux champs.
La CreateMeetingAsync() fonction publie des données dans l’API Événements de calendrier Microsoft Graph, qui crée dynamiquement un événement dans le calendrier d’un utilisateur et retourne l’URL de jointure.

Ouvrez TeamsMeetingFunctions.cs et prenez un moment pour examiner son constructeur. L’objet GraphServiceClient que vous avez examiné précédemment est injecté et affecté au _graphService champ.
```
private readonly IGraphService _graphService;

public TeamsMeetingFunction(IGraphService graphService) => _graphService = graphService;
```

Recherchez la Run méthode :

[Function("HttpTriggerTeamsUrl")]
public async Task<HttpResponseData> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
    ILogger log)
{
    var response = req.CreateResponse(HttpStatusCode.OK);
    await response.WriteStringAsync(await _graphService.CreateMeetingAsync());
    return response;
}

Il définit un nom de fonction qui HttpTriggerTeamsUrl peut être appelé avec une requête HTTP GET.
Il appelle _graphService.CreateMeetingAsync(), qui crée un événement et retourne l’URL de jointure.

Exécutez le programme en appuyant sur F5 dans Visual Studio ou en sélectionnant Déboguer -> Démarrer le débogage dans le menu. Cette action démarre le projet Azure Functions et met à disposition l’appel ACSTokenFunction .

Remarque

Si vous utilisez VS Code, vous pouvez ouvrir une fenêtre de terminal dans le dossier GraphACSFunctions et exécuter func start. Cela suppose que vous avez installé Azure Functions Core Tools sur votre machine.

Ouvrez le dossier de projet samples/acs-to-teams-meeting/server/typescript dans Visual Studio Code.
Créez un fichier local.settings.json avec les valeurs suivantes :
```
{
    "IsEncrypted": false,
    "Values": {
        "FUNCTIONS_WORKER_RUNTIME": "node",
        "TENANT_ID": "",
        "CLIENT_ID": "",
        "CLIENT_SECRET": "",
        "USER_ID": "",
        "ACS_CONNECTION_STRING": ""
    },
    "Host": {
        "LocalHttpPort": 7071,
        "CORS": "*",
        "CORSCredentials": false
    },
    "watchDirectories": [
        "Shared"
    ]
}
```
- Utilisez les valeurs que vous avez copiées dans le fichier local dans un exercice précédent pour mettre à jour les valeurs et CLIENT_SECRET les TENANT_IDCLIENT_ID valeurs.
- Définissez USER_ID avec l’ID d’utilisateur que vous souhaitez créer une réunion Microsoft Teams.
Vous pouvez obtenir l’ID d’utilisateur à partir de la Portail Azure.
- Connectez-vous à l’aide de votre compte d’administrateur du locataire du développeur Microsoft 365.
- Sélectionnez l’ID Microsoft Entra,
- Accédez à l’onglet Utilisateurs de la barre latérale.
- Recherchez votre nom d’utilisateur et sélectionnez-le pour afficher les détails de l’utilisateur.
- Dans les détails de l’utilisateur, Object ID représente le User ID. Copiez la Object ID valeur et utilisez-la pour la USER_ID valeur dans local.settings.json.
Remarque

ACS_CONNECTION_STRING sera utilisé dans l’exercice suivant afin que vous n’ayez pas encore besoin de le mettre à jour.
Ouvrez le fichier package.json dans VS Code et notez que les packages Microsoft Graph et Identity suivants sont inclus :
```
@azure/communication-identity
@azure/identity
@microsoft/microsoft-graph-client
```
Ouvrez une fenêtre de terminal dans le dossier typescript et exécutez la npm install commande pour installer les dépendances de l’application.
Ouvrez Shared/graph.ts et prenez un moment pour explorer les importations en haut du fichier. Ce code gère l’importation des symboles d’authentification et de client utilisés dans la fonction Azure pour appeler Microsoft Graph.
```
import { startDateTimeAsync, endDateTimeAsync } from './dateTimeFormat';
import { ClientSecretCredential } from '@azure/identity';
import { Client } from '@microsoft/microsoft-graph-client';
import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
import 'isomorphic-fetch';
```
Conseil

Vous verrez également les importations de dateTimeFormat.ts qui sont utilisées plus loin dans cet exercice. startDateTimeAsync et endDateTimeAsync sont utilisés lors de la création d’un lien de réunion Microsoft Teams pour définir la date de début et la date de fin de la réunion.
Prenez un moment pour examiner clientSecretCredential et appGraphClient. Ils seront utilisés ultérieurement dans le processus d’authentification et lors de l’appel de l’API Microsoft Graph :
```
let clientSecretCredential;
let appGraphClient;
```

Recherchez la ensureGraphForAppOnlyAuth fonction :

ClientSecretCredentialutilise les valeurs et Client Secret les Tenant IdClient Id valeurs de l’application Microsoft Entra ID.
L’objet authProvider est défini comme une application d’ID Microsoft Entra qui s’authentifie en arrière-plan et utilise des autorisations d’application uniquement (par exemple Calendars.ReadWrite) pour effectuer des appels d’API Microsoft Graph.

function ensureGraphForAppOnlyAuth() {
    if (!clientSecretCredential) {
        clientSecretCredential = new ClientSecretCredential(
            process.env.TENANT_ID,
            process.env.CLIENT_ID,
            process.env.CLIENT_SECRET
        );
    }

    if (!appGraphClient) {
        const authProvider = new TokenCredentialAuthenticationProvider(
        clientSecretCredential, {
            scopes: [ 'https://graph.microsoft.com/.default' ]
        });

        appGraphClient = Client.initWithMiddleware({
            authProvider: authProvider
        });
    }
}

Prenez un moment pour explorer la createNewMeetingAsync fonction. Il publie des données dans l’API Événements de calendrier Microsoft Graph, qui crée dynamiquement un événement dans le calendrier d’un utilisateur et retourne les nouveaux détails de l’événement :

async function createNewMeetingAsync(userId) {
    ensureGraphForAppOnlyAuth();
    let startTime = await startDateTimeAsync();
    let endTime = await endDateTimeAsync();
    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;     
}

export default createNewMeetingAsync;

Accédez au serveur/typescript/src/functions/httpTriggerTeamsUrl.ts et explorez la fonction Déclencheur Http :

createNewMeetingAsync est importé à partir de graph.ts. Il gère la création et la récupération des détails d’un événement.
userId est récupéré à partir de local.settings.json à l’intérieur de la fonction Déclencheur Http. Cette récupération est effectuée en accédant à la variable d’environnement à l’aide USER_ID process.env.USER_IDde .
Lorsque la fonction est déclenchée, elle appelle createNewMeetingAsync avec l’ID d’utilisateur défini et retourne les nouveaux détails de l’événement dans teamMeetingLink le paramètre.
La fonction accède à l’URL de jointure de réunion Teams en appelant meeting.onlineMeeting.joinUrl et retourne la valeur dans le corps de la réponse.

import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
import createNewMeetingAsync from '../../Shared/graph';

let teamsMeetingLink;

export async function httpTriggerTeamsUrl(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    context.log("Request received");
    const userId = process.env.USER_ID;
    context.log('UserId', userId);

    teamsMeetingLink = await createNewMeetingAsync(userId);
    const body = JSON.stringify(teamsMeetingLink);
    const meeting = JSON.parse(body);
    context.log("meeting:", meeting);

    return {
        // status: 200, /* Defaults to 200 */
        body: meeting.onlineMeeting.joinUrl
    }    
};

app.http('httpTriggerTeamsUrl', {
    methods: ['GET'],
    authLevel: 'anonymous',
    handler: httpTriggerTeamsUrl
});

export default httpTriggerTeamsUrl;

Utilisez une fenêtre de terminal pour s’exécuter npm start dans le dossier samples/acs-video-to-teams-meeting/server/typescript pour exécuter la fonction localement.

Appel de la fonction Azure à partir de React

Maintenant que la httpTriggerTeamsUrl fonction est prête à être utilisée, appelons-la à partir de l’application React.
Développez le dossier client/react .
Ajoutez un fichier .env dans le dossier avec les valeurs suivantes :
```
REACT_APP_TEAMS_MEETING_FUNCTION=http://localhost:7071/api/httpTriggerTeamsUrl
REACT_APP_ACS_USER_FUNCTION=http://localhost:7071/api/httpTriggerAcsToken
```
Ces valeurs sont transmises à React au fur et à mesure qu’elles sont générées afin que vous puissiez facilement les modifier en fonction des besoins pendant le processus de génération.
Ouvrez le fichier client/react/App.tsx dans VS Code.
Recherchez la teamsMeetingLink variable d’état dans le composant. Supprimez le lien teams codé en dur et remplacez-le par des guillemets vides :
```
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```

Recherchez la fonction et modifiez-la useEffect pour ressembler à ce qui suit. Cela gère l’appel de la fonction Azure que vous avez examinée précédemment, ce qui crée une réunion Teams et retourne le lien de participation à la réunion :

useEffect(() => {
    const init = async () => {
        /* Commenting out for now
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        const res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        const user = await res.json();
        setUserId(user.userId);
        setToken(user.token);
        */

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        const resTeams = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        const link = await resTeams.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);

    }
    init();

}, []);

Enregistrez le fichier avant de continuer.
Ouvrez une fenêtre de terminal, cd dans le dossier *react, puis exécutez npm start pour générer et exécuter l’application.
Une fois l’application générée et chargée, vous devez voir l’interface utilisateur d’appel ACS affichée, puis appeler la réunion Teams créée dynamiquement par Microsoft Graph.
Arrêtez le processus de terminal en entrant Ctrl + C dans la fenêtre de terminal.
Arrêtez le projet Azure Functions.

Remarque

Consultez la documentation Azure Communication Services pour en savoir plus sur l’extension des réunions Microsoft Teams de différentes façons.

Créer dynamiquement une identité et un jeton Azure Communication Services

27 minutes restantes

Dans cet exercice, vous allez apprendre à récupérer dynamiquement les valeurs d’identité et de jeton de l’utilisateur à partir d’Azure Communication Services à l’aide d’Azure Functions. Une fois récupérées, les valeurs sont transmises au composite de l’interface utilisateur ACS pour permettre à un client d’effectuer un appel.

Créer une identité et un jeton ACS

C#
TypeScript

Ouvrez local.settings.json et mettez à jour la ACS_CONNECTION_STRING valeur avec les chaîne de connexion ACS que vous avez enregistrées dans un exercice antérieur.

Ouvrez Startup.cs dans Visual Studio et explorez le deuxième AddSingleton() appel dans la ConfigureServices() méthode.

var host = new HostBuilder()
    .ConfigureFunctionsWebApplication()
    .ConfigureServices(services => {

        ...

        services.AddSingleton(static p =>
        {
            var config = p.GetRequiredService<IConfiguration>();
            var connectionString = config.GetValue<string>("ACS_CONNECTION_STRING");
            return new CommunicationIdentityClient(connectionString);
        });

        ...

    })
    .Build();
}

L’appel AddSingleton() crée un CommunicationIdentityClient objet à l’aide de la ACS_CONNECTION_STRING valeur de local.settings.json.
Ouvrez ACSTokenFunction.cs et recherchez le constructeur et les définitions de champ.
- Un champ nommé Scopes est défini qui inclut l’étendue CommunicationTokenScope.VoIP . Cette étendue est utilisée pour créer le jeton d’accès pour l’appel vidéo.
```
private static readonly CommunicationTokenScope[] Scopes =
[
    CommunicationTokenScope.VoIP,
];
```
- L’instance CommunicationIdentityClient singleton créée dans Startup.cs est injectée dans le constructeur et affectée au _tokenClient champ.
```
private readonly CommunicationIdentityClient _tokenClient;

public ACSTokenFunction(CommunicationIdentityClient tokenClient)
{
    _tokenClient = tokenClient;
}
```

Explorez la Run() méthode dans ACSTokenFunction.cs :

[Function("HttpTriggerAcsToken")]
public async Task<HttpResponseData> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
    ILogger log)
{
    var user = await _tokenClient.CreateUserAsync();
    var userToken = await _tokenClient.GetTokenAsync(user, Scopes);

    var response = req.CreateResponse(HttpStatusCode.OK);
    await response.WriteAsJsonAsync(
        new
        {
            userId = user.Value.Id,
            userToken.Value.Token,
            userToken.Value.ExpiresOn
        }
    );
    return response;
}

Il définit une fonction nommée de HttpTriggerAcsToken ce qui peut être appelée avec une requête HTTP GET.
Un nouvel utilisateur ACS est créé en appelant la _tokenClient.CreateUserAsync() méthode.
Un jeton d’accès utilisé pour les appels vidéo est créé en appelant la _tokenClient. GetTokenAsync() méthode.
L’ID utilisateur et le jeton sont retournés par la fonction en tant qu’objet JSON.

Exécutez le programme en appuyant sur F5 dans Visual Studio ou en sélectionnant Déboguer -> Démarrer le débogage dans le menu. Cela démarre le projet Azure Functions et met à disposition l’appel ACSTokenFunction .

Remarque

Si vous utilisez VS Code, vous pouvez ouvrir une fenêtre de terminal dans le dossier GraphACSFunctions et exécuter func start. Cela suppose que vous avez installé Azure Functions Core Tools sur votre machine.
Maintenant que les fonctions Azure s’exécutent localement, le client doit pouvoir les appeler pour obtenir les valeurs d’identité et de jeton de l’utilisateur ACS.
Ouvrez des exemples/acs-to-teams-meeting/client/react/app.tsx dans votre éditeur.
Recherchez les userId variables d’état dans token le composant. Supprimez les valeurs codées en dur et remplacez-les par des guillemets vides :
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

Recherchez la fonction et modifiez-la useEffect pour qu’elle ressemble à ce qui suit pour activer l’appel de la fonction Azure pour récupérer une identité et un jeton d’utilisateur ACS :

useEffect(() => {
    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();

}, []);

Enregistrez le fichier avant de continuer.
Ouvrez une fenêtre de terminal et exécutez-la npm start dans le react dossier. Une fois qu’elle est générée et chargée, vous devez voir l’interface utilisateur appelante ACS affichée et vous pouvez appeler la réunion Teams créée dynamiquement par Microsoft Graph.
Arrêtez l’application React en appuyant sur Ctrl + C dans la fenêtre de terminal.
Arrêtez le projet Azure Functions.
Validez vos modifications Git et envoyez-les à votre dépôt GitHub à l’aide de Visual Studio Code :
- Sélectionnez l’icône contrôle de code source (3ème dans la barre d’outils Visual Studio Code).
- Entrez un message de validation, puis sélectionnez Valider.
- Sélectionnez Synchroniser les modifications.

Ouvrez local.settings.json et mettez à jour la ACS_CONNECTION_STRING valeur avec les chaîne de connexion ACS que vous avez enregistrées dans un exercice antérieur.

Ouvrez server/typescript/src/functions/httpTriggerAcsToken.ts dans Visual Studio Code. Il contient le code suivant :

import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
import { CommunicationIdentityClient } from '@azure/communication-identity';

export async function httpTriggerAcsToken(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    // Get ACS connection string from local.settings.json (or App Settings when in Azure)
    const connectionString = process.env.ACS_CONNECTION_STRING;
    let tokenClient = new CommunicationIdentityClient(connectionString);
    const user = await tokenClient.createUser();
    const userToken = await tokenClient.getToken(user, ["voip"]);
    return {
        jsonBody: { userId: user.communicationUserId, ...userToken }
    };
}

app.http('httpTriggerAcsToken', {
    methods: ['GET'],
    authLevel: 'anonymous',
    handler: httpTriggerAcsToken
});

export default httpTriggerAcsToken;

La fonction effectue les tâches suivantes :
- Importe CommunicationIdentityClient qui sera utilisé pour créer l’identité et le jeton de l’utilisateur.
```
import { CommunicationIdentityClient } from '@azure/communication-identity';
```
- Obtient l’chaîne de connexion ACS à partir d’une variable d’environnement nommée ACS_CONNECTION_STRING.
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
Remarque

Il s’agit de la valeur chaîne de connexion que vous avez ajoutée au fichier local.settings.json précédemment.
- Crée une CommunicationIdentityClient instance et transmet l’chaîne de connexion ACS.
```
let tokenClient = new CommunicationIdentityClient(connectionString);
```
- Crée un utilisateur ACS et obtient un jeton Voice Over IP.
```
const user = await tokenClient.createUser();
const userToken = await tokenClient.getToken(user, ["voip"]);
```
- Renvoie les valeurs userId et de jeton à l’appelant.
```
return {
    jsonBody: { userId: user.communicationUserId, ...userToken }
};
```
Accédez au dossier serveur/typescript dans une fenêtre de terminal et exécutez npm start.
Maintenant que les fonctions Azure s’exécutent localement, le client doit pouvoir les appeler pour obtenir les valeurs d’identité et de jeton de l’utilisateur ACS.
Ouvrez le fichier client/react/App.tsx dans votre éditeur.
Recherchez les userId variables d’état dans token le composant. Supprimez les valeurs codées en dur et remplacez-les par des guillemets vides :
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

Recherchez la fonction et modifiez-la useEffect pour qu’elle ressemble à ce qui suit pour activer l’appel de la fonction Azure pour récupérer une identité et un jeton d’utilisateur ACS :

useEffect(() => {
    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();

}, []);

Enregistrez le fichier avant de continuer.
Ouvrez un terminal distinct et exécutez-le npm start dans le dossier React . Une fois qu’elle est générée et chargée, vous devez voir l’interface utilisateur appelante ACS affichée et vous pouvez appeler la réunion Teams créée dynamiquement par Microsoft Graph.
Arrêtez les deux processus de terminal (React et Azure Functions) en sélectionnant Ctrl + C.
Validez vos modifications Git et envoyez-les à votre dépôt GitHub à l’aide de Visual Studio Code :
- Sélectionnez l’icône contrôle de code source (3ème dans la barre d’outils Visual Studio Code).
- Entrez un message de validation, puis sélectionnez Valider.
- Sélectionnez Synchroniser les modifications.

Déployer l’application sur Azure Functions et Azure Container Apps

17 minutes restantes

Important

Outre les conditions préalables répertoriées pour ce didacticiel, vous devez également installer les outils suivants sur votre ordinateur pour effectuer cet exercice.

Azure CLI
Si vous utilisez VS Code, installez l’extension Azure Functions

Dans cet exercice, vous allez apprendre à déployer les fonctions Microsoft Graph et ACS décrites dans les exercices précédents sur Azure Functions. Vous allez également créer une image conteneur et la déployer sur Azure Container Apps.

Azure Container Apps

Remarque

Cette section utilise Visual Studio pour publier les fonctions C# sur Azure. Si vous préférez utiliser Visual Studio Code, vous pouvez suivre les instructions de la fonction Créer une fonction C# dans Azure à l’aide du guide de démarrage rapide Visual Studio Code .

Ouvrez le samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln projet dans Visual Studio.
Cliquez avec le bouton droit sur le GraphACSFunctions projet, puis sélectionnez Publier.
Sélectionnez Azure dans la section cible, puis cliquez sur Suivant.
Sélectionnez Application de fonction Azure (Windows), puis cliquez sur Suivant.
Sélectionnez votre abonnement, puis sélectionnez + Créer.
Saisissez les informations suivantes :
- Nom de la fonction : un nom global unique est requis. Exemple : acsFunctions<YOUR_LAST_NAME>.
- Abonnement : sélectionnez votre abonnement.
- Groupe de ressources : sélectionnez un groupe de ressources que vous avez créé précédemment dans ce didacticiel, ou vous pouvez également en créer un nouveau.
- Plan d’hébergement : Plan de consommation.
- Emplacement : sélectionnez la région dans laquelle vous souhaitez effectuer le déploiement.
- Stockage Azure : créez-en un. (Vous pouvez également sélectionner un compte de stockage existant.)
- Azure Insights : Créez-en un nouveau. (Vous pouvez également sélectionner un compte de stockage existant.)
Remarque

Un nom global unique est requis. Vous pouvez rendre le nom plus unique en ajoutant un numéro ou votre nom à la fin du nom.
Une fois l’application de fonction Azure créée, un écran de confirmation s’affiche. Vérifiez que l’option Exécuter à partir du package est sélectionnée, puis sélectionnez Terminer.
Sélectionnez Publier pour déployer la fonction sur Azure.
Une fois la fonction déployée sur Azure, accédez au Portail Azure et sélectionnez l’application de fonction que vous avez créée.
Copiez l’URL de la fonction que vous avez déployée. Vous utiliserez la valeur plus loin dans cet exercice.
Sélectionnez Paramètres -> Configuration dans le menu de gauche.
Sélectionnez + Bouton Nouveau paramètre d’application et ajoutez les clés et valeurs suivantes dans les paramètres de l’application. Vous pouvez réactiver ces valeurs local.settings.json dans le GraphACSFunctions projet.
```
# Retrieve these values from local.settings.json
TENANT_ID: <YOUR_VALUE>
CLIENT_ID: <YOUR_VALUE>
CLIENT_SECRET: <YOUR_VALUE>
USER_ID: <YOUR_VALUE>
ACS_CONNECTION_STRING: <YOUR_VALUE>
```
Sélectionnez le bouton Enregistrer pour enregistrer les paramètres.
Enfin, vous devez activer CORS (Cross-Origin Resource Sharing) pour que l’application de fonction rend les API de l’application de fonction accessibles à partir de l’extérieur de votre domaine. Sélectionnez Paramètres -> CORS dans le menu de gauche.
Entrez * (accessible à partir de n’importe quel domaine) dans la zone de texte Origines autorisées , puis sélectionnez le bouton Enregistrer .

Commençons par utiliser VS Code pour déployer le code des fonctions sur Azure Functions.

Ouvrez le dossier de projet serveur/typescript .
Vous devez déjà être exécuté npm install et voir un dossier node_modules à la racine du projet. Si ce n’est pas le cas, ouvrez une fenêtre de commande et exécutez-la npm install pour installer les dépendances.
Ouvrir la palette de commandes VS Code (Maj+Cmd+P sur Mac | Maj+Ctrl+P sur Windows), puis sélectionnez Azure Functions : Créer une application de fonction dans Azure.

Remarque

Si vous ne voyez pas cette option, vérifiez que l’extension Azure Functions est installée dans VS Code.
Vous serez invité à entrer les informations suivantes :
- Le nom de votre abonnement Azure.
- Nom de la fonction : acsFunctions<YOUR_LAST_NAME>.
Remarque

Un nom global unique est requis. Vous pouvez rendre le nom plus unique en ajoutant un numéro ou votre nom à la fin du nom.
- Pile d’exécution : sélectionnez la dernière version Node.js LTS .
- Région (sélectionnez n’importe quelle région souhaitée).
Une fois l’application de fonction Azure créée, vous verrez un message sur l’affichage des détails.
Revenez à la palette de commandes dans VS Code et sélectionnez Azure Functions : Déployer sur Function App. Vous êtes invité à sélectionner votre abonnement et le nom de l’application de fonction que vous avez créé précédemment.
Une fois la fonction déployée sur Azure, procédez comme suit :
- Sélectionnez l’extension Azure dans VS Code (cliquez sur l’icône Azure dans la barre latérale).
- Développez votre abonnement.
- Développez votre application de fonction.
- Cliquez avec le bouton droit sur la fonction et sélectionnez Parcourir le site web. Vérifiez que l’application de fonction fonctionne correctement avant de continuer.
Copiez le domaine de fonction Azure dans un fichier local. Vous utiliserez la valeur plus loin dans cet exercice.

Déployer sur Azure Container Apps

La première tâche que vous allez effectuer consiste à créer une ressource Azure Container Registry (ACR ). Une fois le Registre créé, vous allez générer une image et l’envoyer (push) au Registre.
Ouvrez une fenêtre de commande et exécutez la commande suivante pour vous connecter à votre abonnement Azure :
```
az login
```

Ajoutez les variables d’interpréteur de commandes suivantes en remplaçant vos valeurs pour les espaces réservés selon les besoins. Ajoutez votre <GITHUB_USERNAME> en tant que valeur minuscule et remplacez votre domaine Azure Functions par la< valeur AZURE_FUNCTIONS_DOMAIN> (incluez la https:// valeur du domaine).

Bash
PowerShell

GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
ACR_NAME="aca"$GITHUB_USERNAME
AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

$GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
$RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
$ACR_NAME="aca"+$GITHUB_USERNAME
$AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

Créez une ressource Azure Container Registry en exécutant la commande suivante :

Bash
PowerShell

az acr create \
    --resource-group $RESOURCE_GROUP \
    --name $ACR_NAME \
    --sku Basic \
    --admin-enabled true

az acr create `
    --resource-group $RESOURCE_GROUP `
    --name $ACR_NAME `
    --sku Basic `
    --admin-enabled true

Ouvrez le fichier client/react/Dockerfile dans votre éditeur et notez que les tâches suivantes sont effectuées :
- L’application React est générée et affectée à l’étape de génération .
- Le serveur nginx est configuré et la sortie de l’étape de génération est copiée dans l’image du serveur nginx.

Générez l’image conteneur dans Azure en exécutant la commande suivante à partir de la racine du dossier client/react . Remplacez <YOUR_FUNCTIONS_DOMAIN> par votre domaine Azure Functions que vous avez copié dans un fichier local précédemment dans cet exercice.

Bash
PowerShell

az acr build --registry $ACR_NAME --image acs-to-teams-meeting \
  --build-arg REACT_APP_ACS_USER_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerAcsToken \
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerTeamsUrl .

az acr build --registry $ACR_NAME --image acs-to-teams-meeting `
  --build-arg REACT_APP_ACS_USER_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerAcsToken `
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerTeamsUrl .

Exécutez la commande suivante pour répertorier les images dans votre Registre. Vous devez voir votre nouvelle image répertoriée.
```
az acr repository list --name $ACR_NAME --output table
```
Maintenant que l’image est déployée, vous devez créer une application conteneur Azure qui peut exécuter le conteneur.
Visitez le Portail Azure dans votre navigateur et connectez-vous.
Tapez des applications conteneur dans la barre de recherche supérieure et sélectionnez Container Apps dans les options qui s’affichent.
Sélectionnez Créer dans la barre d’outils.

Remarque

Bien que vous utilisiez le Portail Azure, une application conteneur peut également être créée à l’aide d’Azure CLI. Pour plus d’informations, consultez l’article Démarrage rapide : Déployer votre première application de conteneur. Vous verrez également un exemple de la façon dont Azure CLI peut être utilisé à la fin de cet exercice.
Effectuez les tâches suivantes :
- Sélectionnez votre abonnement.
- Sélectionnez le groupe de ressources à utiliser (créez-en un si nécessaire). Vous pouvez utiliser le même groupe de ressources que celui que vous avez utilisé pour votre ressource ACS si vous le souhaitez. Copiez le nom de votre groupe de ressources dans le même fichier local que celui où vous avez stocké votre domaine Azure Functions.
- Entrez un nom d’application conteneur d’acs-to-teams-meeting.
- Sélectionnez une région.
- Sélectionnez Créer dans la section Environnement Container Apps .
- Entrez un nom d’environnement acs-to-teams-meeting-env.
- Cliquez sur le bouton Créer.
- Sélectionnez Suivant : Paramètres >de l’application .
Entrez les valeurs suivantes dans l’écran Créer une application conteneur :
- Désélectionnez la case à cocher Utiliser l’image de démarrage rapide.
- Nom : acs-to-teams-meeting
- Source de l’image : Azure Container Registry
- Registre : <YOUR_ACR_REGISTRY_NAME.azurecr.io>
- Image : acs-to-teams-meeting
- Balise d’image : dernière version
- Processeur et mémoire : 0,25 cœurs d’UC, mémoire -.5 Gio
Dans la section Paramètres d’entrée de l’application, procédez comme suit :
- Cochez la case Activé.
- Sélectionnez la case d’option Acceptation du trafic depuis n’importe où.
Cela crée un point d’entrée (entrée) pour votre application React et lui permet d’être appelé n’importe où. Azure Container Apps redirige tout le trafic vers HTTPS.
- Port cible : 80

Sélectionnez Revoir + créer. Une fois la validation réussie, sélectionnez le bouton Créer.

Si vous obtenez une erreur, cela peut être dû à l’inactivité de votre environnement d’applications conteneur pendant trop longtemps. La solution la plus simple consiste à passer par le processus de création de l’application conteneur à nouveau. Vous pouvez également exécuter la commande suivante pour créer l’application conteneur à l’aide d’Azure CLI :

Bash
PowerShell

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP \
    --location westus --image acs-to-teams-meeting \
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env \
    --ingress-enabled true --ingress-target-port 80 --ingress-type External \
    --ingress-protocol Https --ingress-traffic Anywhere

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP `
    --location westus --image acs-to-teams-meeting `
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env `
    --ingress-enabled true --ingress-target-port 80 --ingress-type External `
    --ingress-protocol Https --ingress-traffic Anywhere

Une fois le déploiement de votre application conteneur terminé, accédez-y dans le Portail Azure et sélectionnez l’URL de l’application dans l’écran Vue d’ensemble pour afficher l’application en cours d’exécution dans le conteneur nginx !

Partager via

Appel audio/vidéo à partir d’une application personnalisée dans une réunion Teams

Ce que vous allez générer dans ce tutoriel

Vue d’ensemble de la solution d’application

Prérequis

Les technologies utilisées dans ce didacticiel sont les suivantes :

Créer une ressource Azure Communication Services

Intégrer Azure Communication Services Calling à une application React

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

Création d’un fichier local.settings.json

Appel de la fonction Azure à partir de React

Créer dynamiquement une identité et un jeton Azure Communication Services

Déployer l’application sur Azure Functions et Azure Container Apps

Déployer sur Azure Functions

Déployer sur Azure Container Apps

Félicitations !

Vous avez terminé ce tutoriel

Commentaires