Audio-/videogesprekken vanuit een aangepaste app in een Teams-vergadering

Artikel
Developer (Gevorderd)
59 minuten om te voltooien

Niveau: Tussenliggend

In deze zelfstudie leert u hoe Azure Communication Services kan worden gebruikt in een aangepaste React-toepassing, zodat een gebruiker een audio-/videogesprek kan voeren in een Microsoft Teams-vergadering. U leert meer over de verschillende bouwstenen die kunnen worden gebruikt om dit scenario mogelijk te maken en krijgt praktische stappen om u door de verschillende betrokken Microsoft Cloud-services te begeleiden.

Wat u in deze zelfstudie gaat bouwen

Overzicht van de toepassingsoplossing

ACS-audio-/videooplossing

Vereisten

Node LTS - Node LTS wordt gebruikt voor dit project
git
Visual Studio Code of een andere IDE van uw keuze.
Azure Functions-extensie voor VS Code
Azure Functions Core Tools
Azure-abonnement
Microsoft 365-tenant voor ontwikkelaars
Een GitHub-account
Visual Studio als u de C#-versie van de zelfstudie gebruikt. Visual Studio Code kan ook worden gebruikt indien gewenst.

Technologieën die in deze zelfstudie worden gebruikt, omvatten

React
Azure Communication Services
Azure Functions
Microsoft Graph
Microsoft Teams

Een Azure Communication Services-resource maken

57 minuten resterend

In deze oefening maakt u een ACS-resource (Azure Communication Services) in Azure Portal.

ACS in Azure Portal

Voer de volgende taken uit om aan de slag te gaan:

Ga naar Azure Portal in uw browser en meld u aan.
Typ communicatieservices in de zoekbalk boven aan de pagina en selecteer Communication Services in de opties die worden weergegeven.
Selecteer Maken in de werkbalk.
Voer de volgende taken uit:
- Selecteer uw Azure-abonnement.
- Selecteer de resourcegroep die u wilt gebruiken (maak een nieuwe groep als deze niet bestaat).
- Voer een ACS-resourcenaam in. Dit moet een unieke waarde zijn.
- Selecteer een gegevenslocatie.
Selecteer Beoordelen en maken gevolgd door Maken.
Zodra uw ACS-resource is gemaakt, gaat u ernaartoe en selecteert u Instellingen -> Identiteiten en tokens voor gebruikerstoegang.
Schakel het selectievakje Spraak- en videogesprekken (VOIP) in.
Selecteer Genereren.
Kopieer de waarden van het identiteits - en gebruikerstoegangstoken naar een lokaal bestand. U hebt de waarden later in deze oefening nodig.
Selecteer Instellingen -> Sleutels en kopieer de primaire sleutel verbindingsreeks waarde naar het lokale bestand waar u de gebruikersidentiteit en tokenwaarden hebt gekopieerd.
Als u de toepassing wilt uitvoeren, hebt u een koppeling naar een Teams-vergadering nodig. Ga naar Microsoft Teams, meld u aan met uw Microsoft 365-ontwikkelaarstenant en selecteer de optie Agenda aan de linkerkant.

Tip

Als u momenteel geen Microsoft 365-account hebt, kunt u zich registreren voor het Microsoft 365 Developer Program-abonnement . Het is 90 dagen gratis en wordt voortdurend verlengd zolang u deze gebruikt voor ontwikkelingsactiviteiten. Als u een Visual Studio Enterprise- of Professional-abonnement hebt, bevatten beide programma's een gratis Microsoft 365-ontwikkelaarsabonnement, actief voor de levensduur van uw Visual Studio-abonnement.
Selecteer een datum/tijd in de agenda, voeg een titel toe voor de vergadering, nodig een gebruiker uit uw Microsoft 365-ontwikkelaarstenant uit en selecteer Opslaan.
Selecteer de nieuwe vergadering die u in de agenda hebt toegevoegd en kopieer de koppeling voor Teams-vergaderingen die wordt weergegeven in hetzelfde bestand waarin u de ACS-gebruikersidentiteit, -token en verbindingsreeks hebt opgeslagen.
Nu uw ACS-resource is ingesteld en u een koppeling voor teams-vergaderingen hebt, gaan we de React-toepassing aan de slag.

Azure Communication Services-aanroepen integreren in een React-app

47 minuten resterend

In deze oefening voegt u de samengestelde ACS-gebruikersinterface-aanroep toe aan een React-app om audio-/videogesprekken vanuit een aangepaste app in te schakelen in een Microsoft Teams-vergadering.

ACS in React

Ga naar GitHub en meld u aan. Als u nog geen GitHub-account hebt, kunt u de optie Registreren selecteren om er een te maken.
Ga naar de Microsoft Cloud GitHub-opslagplaats.
Selecteer de fork-optie om de opslagplaats toe te voegen aan uw gewenste GitHub-organisatie/-account.
Voer de volgende opdracht uit om deze opslagplaats naar uw computer te klonen. Vervang <YOUR_ORG_NAME> door de naam van uw GitHub-organisatie/-account.
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
Open de projectmap samples/acs-to-teams-meeting in Visual Studio Code.
Vouw de map client/react uit.
Open het bestand package.json in VS Code en noteer de volgende ACS-pakketten:
```
@azure/communication-common 
@azure/communication-react
```
Controleer of npm 10 of hoger is geïnstalleerd door een terminalvenster te openen en de volgende opdracht uit te voeren:
```
npm --version
```
Tip

Als u npm 10 of hoger niet hebt geïnstalleerd, kunt u npm bijwerken naar de nieuwste versie door deze uit te voerennpm install -g npm.
Open een terminalvenster en voer de npm install opdracht uit in de react-map om de toepassingsafhankelijkheden te installeren.
Open App.tsx en neem even de tijd om de importbewerkingen boven aan het bestand te verkennen. Deze greep voor het importeren van ACS-beveiligings- en audio-/videogesprekkensymbolen die in de app worden gebruikt.
```
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';
```
Notitie

U ziet hoe het CallComposite onderdeel later in deze oefening wordt gebruikt. Het biedt de belangrijkste ui-functionaliteit voor Azure Communication Services om een audio-/videogesprek vanuit de app in te schakelen in een Microsoft Teams-vergadering.
Zoek het App onderdeel en voer de volgende taken uit:
- Neem even de tijd om de useState definities in het onderdeel te bekijken.
- Vervang de lege aanhalingstekens van de userId useState functie door de ACS-gebruikersidentiteitswaarde die u in de vorige oefening hebt gekopieerd.
- Vervang de lege aanhalingstekens van de token useState functie door de ACS-tokenwaarde die u in de vorige oefening hebt gekopieerd.
- Vervang de lege aanhalingstekens van de teamsMeetingLink useState functie door de koppelingswaarde voor Teams-vergaderingen die u in de vorige oefening hebt gekopieerd.
```
// 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>('');
```
Notitie

Verderop in deze zelfstudie ziet u hoe u de userId, tokenen teamsMeetingLink waarden dynamisch kunt ophalen.
Neem even de tijd om de useMemo functies in het App onderdeel te verkennen.
- Met credential useMemo de functie wordt een nieuw AzureCommunicationTokenCredential exemplaar gemaakt zodra het token een waarde heeft.
- De callAdapterArgs useMemo functie retourneert een object met de argumenten die worden gebruikt om een audio-/videogesprek te voeren. Zoals u ziet, worden de userIdargumenten en teamsMeetingLink credentialwaarden in de ACS-aanroepargumenten gebruikt.
```
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]);
```
Notitie

useMemo wordt in dit scenario gebruikt omdat we alleen willen dat het AzureCommunicationTokenCredential object en de aanroepadapter eenmaal worden gemaakt zodra de benodigde parameters worden doorgegeven. Bekijk hier aanvullende informatie over useMemo.
Zodra de credentials en callAdapterArgs klaar zijn, verwerkt de volgende regel het maken van een ACS-oproepadapter met behulp van de useAzureCommunicationCallAdapter React-hook van ACS. Het callAdapter object wordt later gebruikt in het samengestelde onderdeel voor het aanroepen van de gebruikersinterface.
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
Notitie

Omdat useAzureCommunicationCallAdapter dit een React-hook is, wordt er pas een waarde toegewezen aan callAdapter als de callAdapterArgs waarde geldig is.

Eerder hebt u de gebruikersidentiteit, het token en de Teams-vergadering gekoppeld aan statuswaarden in het App onderdeel. Dat werkt nu prima, maar in een latere oefening ziet u hoe u deze waarden dynamisch kunt ophalen. Aangezien u de waarden eerder hebt ingesteld, markeert u de code in de useEffect functie zoals hierna wordt weergegeven. Zodra de Azure Functions wordt uitgevoerd in de volgende oefeningen, gaat u terug naar deze 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();

    */
}, []);

Zoek de volgende JSX-code. Het gebruikt het CallComposite symbool dat u hebt geïmporteerd om de gebruikersinterface weer te geven die wordt gebruikt voor het maken van een audio-/videogesprek vanuit de React-app in een Teams-vergadering. De callAdapter eerder verkende eigenschap wordt doorgegeven aan adapter de eigenschap om de vereiste argumenten op te geven.
```
if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}
```
Sla het bestand op voordat u doorgaat.
Voer npm start deze uit in het terminalvenster om de toepassing uit te voeren. Zorg ervoor dat u de opdracht uitvoert in de react-map .
Nadat de toepassingen zijn gebouwd, ziet u dat er een aanroepende gebruikersinterface wordt weergegeven. Schakel het selecteren van uw microfoon en camera in en start het gesprek. U ziet dat u in een wachtkamer bent geplaatst. Als u deelneemt aan de vergadering die u eerder in Microsoft Teams hebt ingesteld, kunt u toestaan dat de gast de vergadering binnenkomt.
Druk op Ctrl+C om de toepassing te stoppen. Nu u deze hebt uitgevoerd, gaan we kijken hoe u dynamisch de ACS-gebruikersidentiteit en -token kunt ophalen en automatisch een Microsoft Teams-vergadering kunt maken en de join-URL kunt retourneren met Behulp van Microsoft Graph.

Dynamisch een Microsoft Teams-vergadering maken met Microsoft Graph

37 minuten resterend

In deze oefening automatiseert u het proces van het maken van een koppeling naar een Microsoft Teams-vergadering en het doorgeven aan de ACS met behulp van Azure Functions en Microsoft Graph.

Teams-vergadering maken

U moet een Microsoft Entra ID-app maken voor daemon-app-verificatie. In deze stap wordt verificatie op de achtergrond verwerkt met app-referenties en gebruikt een Microsoft Entra ID-app toepassingsmachtigingen om Microsoft Graph API-aanroepen te maken. Microsoft Graph wordt gebruikt om dynamisch een Microsoft Teams-vergadering te maken en de URL van de Teams-vergadering te retourneren.
Voer de volgende stappen uit om een Microsoft Entra ID-app te maken:
1. Ga naar Azure Portal en selecteer Microsoft Entra-id.
2. Selecteer het tabblad App-registratie gevolgd door + Nieuwe registratie.
3. Vul de details van het nieuwe app-registratieformulier in zoals hieronder wordt weergegeven en selecteer Registreren:
  - Naam: ACS Teams-interop-app
  - Ondersteunde accounttypen: Accounts in elke organisatiedirectory (Elke Microsoft Entra ID-directory - Multitenant) en persoonlijke Microsoft-accounts (bijvoorbeeld Skype, Xbox)
  - Omleidings-URI: laat dit leeg
4. Nadat de app is geregistreerd, gaat u naar API-machtigingen en selecteert u + Een machtiging toevoegen.
5. Selecteer Microsoft Graph gevolgd door toepassingsmachtigingen.
6. Selecteer de Calendars.ReadWrite machtiging en selecteer vervolgens Toevoegen.
7. Nadat u de machtigingen hebt toegevoegd, selecteert u Beheerderstoestemming verlenen voor <YOUR_ORGANIZATION_NAME>.
8. Ga naar het tabblad Certificaten en geheimen , selecteer + Nieuw clientgeheim en selecteer vervolgens Toevoegen.
9. Kopieer de waarde van het geheim naar een lokaal bestand. U gebruikt de waarde verderop in deze oefening.
10. Ga naar het tabblad Overzicht en kopieer de Application (client) ID en Directory (tenant) ID waarden naar hetzelfde lokale bestand dat u in de vorige stap hebt gebruikt.

Open de samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln map GraphACSFunctions in Visual Studio of open de map GraphACSFunctions in Visual Studio Code.
Ga naar het GraphACSFunctions project en maak een local.settings.json bestand met de volgende waarden:
```
{
    "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"
    ]
}
```
- Gebruik de waarden die u in een eerdere oefening naar het lokale bestand hebt gekopieerd om de TENANT_IDen CLIENT_ID CLIENT_SECRET waarden bij te werken.
- Definieer USER_ID met de gebruikers-id die u wilt maken van een Microsoft Teams-vergadering.
U kunt de gebruikers-id ophalen uit Azure Portal.
- Meld u aan met uw microsoft 365-tenantbeheerdersaccount voor ontwikkelaars.
- Selecteer Microsoft Entra ID
- Navigeer naar het tabblad Gebruikers op de zijbalk.
- Zoek uw gebruikersnaam en selecteer deze om de gebruikersgegevens weer te geven.
- Binnen de gebruikersgegevens vertegenwoordigt Object ID u de User ID. Kopieer de waarde en gebruik deze Object ID voor de USER_ID waarde in local.settings.json.
Notitie

ACS_CONNECTION_STRING wordt gebruikt in de volgende oefening, zodat u deze nog niet hoeft bij te werken.

Open GraphACSFunctions.sln in de map acs-to-teams-meeting/server/csharp en houd er rekening mee dat het de volgende Microsoft Graph- en Identiteitspakketten bevat:

<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" />

Ga naar Program.cs en noteer de volgende code in de ConfigureServices methode:

    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();
}

Met deze code maakt u een GraphServiceClient object dat kan worden gebruikt om Microsoft Graph aan te roepen vanuit Azure Functions. Het is een singleton en kan worden geïnjecteerd in andere klassen.
U kunt Microsoft Graph API-aanroepen uitvoeren met alleen-app-machtigingen (zoals Calendars.ReadWrite) door een ClientSecretCredential waarde door te geven aan de GraphServiceClient constructor. Hierbij ClientSecretCredential worden de Tenant Idwaarden Client Id en Client Secret waarden van de Microsoft Entra ID-app gebruikt.

Open Services/GraphService.cs.

Neem even de tijd om de CreateMeetingEventAsync methode te verkennen:

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 en IConfiguration objecten worden geïnjecteerd in de constructor en toegewezen aan velden.
De CreateMeetingAsync() functie plaatst gegevens in de Microsoft Graph Calendar Events-API, die dynamisch een gebeurtenis maakt in de agenda van een gebruiker en de join-URL retourneert.

Open TeamsMeetingFunctions.cs en neem even de tijd om de constructor te onderzoeken. Het GraphServiceClient resultaat dat u eerder hebt bekeken, wordt geïnjecteerd en toegewezen aan het _graphService veld.
```
private readonly IGraphService _graphService;

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

Zoek de Run methode:

[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;
}

Er wordt een functienaam gedefinieerd die HttpTriggerTeamsUrl kan worden aangeroepen met een HTTP GET-aanvraag.
Hiermee wordt _graphService.CreateMeetingAsync()een nieuwe gebeurtenis gemaakt en wordt de join-URL geretourneerd.

Voer het programma uit door op F5 in Visual Studio te drukken of door Debug te selecteren.> Start Debugging vanuit het menu. Met deze actie wordt het Azure Functions-project gestart en wordt het ACSTokenFunction beschikbaar gemaakt om aan te roepen.

Notitie

Als u VS Code gebruikt, kunt u een terminalvenster openen in de map GraphACSFunctions en uitvoeren func start. Hierbij wordt ervan uitgegaan dat de Azure Functions Core Tools op uw computer zijn geïnstalleerd.

Open de projectmap samples/acs-to-teams-meeting/server/typescript in Visual Studio Code.
Maak een local.settings.json bestand met de volgende waarden:
```
{
    "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"
    ]
}
```
- Gebruik de waarden die u in een eerdere oefening naar het lokale bestand hebt gekopieerd om de TENANT_IDen CLIENT_ID CLIENT_SECRET waarden bij te werken.
- Definieer USER_ID met de gebruikers-id die u wilt maken van een Microsoft Teams-vergadering.
U kunt de gebruikers-id ophalen uit Azure Portal.
- Meld u aan met uw microsoft 365-tenantbeheerdersaccount voor ontwikkelaars.
- Selecteer Microsoft Entra-id,
- Navigeer naar het tabblad Gebruikers op de zijbalk.
- Zoek uw gebruikersnaam en selecteer deze om de gebruikersgegevens weer te geven.
- Binnen de gebruikersgegevens vertegenwoordigt Object ID u de User ID. Kopieer de waarde en gebruik deze Object ID voor de USER_ID waarde in local.settings.json.
Notitie

ACS_CONNECTION_STRING wordt gebruikt in de volgende oefening, zodat u deze nog niet hoeft bij te werken.
Open het package.json-bestand in VS Code en houd er rekening mee dat de volgende Microsoft Graph- en Identity-pakketten zijn opgenomen:
```
@azure/communication-identity
@azure/identity
@microsoft/microsoft-graph-client
```
Open een terminalvenster in de typescript-map en voer de npm install opdracht uit om de toepassingsafhankelijkheden te installeren.
Open Gedeeld/graph.ts en neem even de tijd om de importbewerkingen boven aan het bestand te verkennen. Deze code verwerkt het importeren van verificatie en clientsymbolen die worden gebruikt in de Azure-functie om Microsoft Graph aan te roepen.
```
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';
```
Tip

U ziet ook importbewerkingen uit dateTimeFormat.ts die verderop in deze oefening worden gebruikt. startDateTimeAsync en endDateTimeAsync worden gebruikt tijdens het maken van een Koppeling naar een Microsoft Teams-vergadering om de begin- en einddatum voor de vergadering te definiëren.
Neem even de tijd om te onderzoeken clientSecretCredential en appGraphClient. Ze worden later in het verificatieproces gebruikt en bij het aanroepen van de Microsoft Graph API:
```
let clientSecretCredential;
let appGraphClient;
```

Zoek de ensureGraphForAppOnlyAuth functie:

ClientSecretCredential gebruikt de Tenant Iden Client Id Client Secret waarden van de Microsoft Entra ID-app.
Het authProvider object wordt gedefinieerd als een Microsoft Entra ID-app die op de achtergrond wordt geverifieerd en alleen-app-machtigingen (zoals Calendars.ReadWrite) gebruikt om Microsoft Graph API-aanroepen te maken.

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

Neem even de tijd om de createNewMeetingAsync functie te verkennen. Er worden gegevens geplaatst in de Microsoft Graph Calendar Events-API, waarmee dynamisch een gebeurtenis wordt gemaakt in de agenda van een gebruiker en de nieuwe gebeurtenisdetails worden geretourneerd:

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;

Ga naar server/typescript/src/functions/httpTriggerTeamsUrl.ts en verken de functie Http-trigger :

createNewMeetingAsync wordt geïmporteerd uit graph.ts. Het verwerkt het maken en ophalen van nieuwe gebeurtenisdetails.
userId wordt opgehaald uit local.settings.json in de http-triggerfunctie. Dit ophalen wordt uitgevoerd door toegang te krijgen tot de USER_ID omgevingsvariabele met behulp van process.env.USER_ID.
Wanneer de functie wordt geactiveerd, wordt deze aangeroepen createNewMeetingAsync met de gedefinieerde gebruikers-id en worden de nieuwe gebeurtenisdetails in teamMeetingLink de parameter geretourneerd.
De functie opent de join-URL van de Teams-vergadering door de waarde in de hoofdtekst van het antwoord aan te roepen meeting.onlineMeeting.joinUrl en te retourneren.

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;

Gebruik een terminalvenster om uit te voeren npm start in de map samples/acs-video-to-teams-meeting/server/typescript om de functie lokaal uit te voeren.

De Azure-functie aanroepen vanuit React

Nu de httpTriggerTeamsUrl functie klaar is voor gebruik, gaan we deze aanroepen vanuit de React-app.
Vouw de map client/react uit.
Voeg een .env-bestand toe aan de map met de volgende waarden:
```
REACT_APP_TEAMS_MEETING_FUNCTION=http://localhost:7071/api/httpTriggerTeamsUrl
REACT_APP_ACS_USER_FUNCTION=http://localhost:7071/api/httpTriggerAcsToken
```
Deze waarden worden doorgegeven aan React tijdens het compileren, zodat u ze tijdens het buildproces eenvoudig kunt wijzigen.
Open het bestand client/react/App.tsx in VS Code.
Zoek de teamsMeetingLink statusvariabele in het onderdeel. Verwijder de in code vastgelegde teams-koppeling en vervang deze door lege aanhalingstekens:
```
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```

Zoek de useEffect functie en wijzig deze zodat deze er als volgt uitziet. Hiermee wordt de Azure-functie aangeroepen die u eerder hebt bekeken, waardoor een Teams-vergadering wordt gemaakt en de koppeling voor deelname aan de vergadering wordt geretourneerd:

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

}, []);

Sla het bestand op voordat u doorgaat.
Open een terminalvenster, cd ga naar de map *react en voer deze uit npm start om de toepassing te bouwen en uit te voeren.
Nadat de toepassing is gebouwd en geladen, ziet u dat de gebruikersinterface voor ACS-aanroepen wordt weergegeven en kunt u vervolgens inbellen bij de Teams-vergadering die dynamisch is gemaakt door Microsoft Graph.
Stop het terminalproces door Ctrl +C in het terminalvenster in te voeren.
Stop het Azure Functions-project.

Notitie

Raadpleeg de documentatie van Azure Communication Services voor meer informatie over het uitbreiden van Microsoft Teams-vergaderingen op andere manieren.

Dynamisch een Azure Communication Services-identiteit en -token maken

27 minuten resterend

In deze oefening leert u hoe u gebruikersidentiteit en tokenwaarden dynamisch ophaalt uit Azure Communication Services met behulp van Azure Functions. Zodra deze zijn opgehaald, worden de waarden doorgegeven aan de samengestelde ACS-gebruikersinterface om een aanroep door een klant mogelijk te maken.

ACS-identiteit en -token maken

C#
TypeScript

Open local.settings.json en werk de ACS_CONNECTION_STRING waarde bij met de ACS-verbindingsreeks die u in een eerdere oefening hebt opgeslagen.

Open Startup.cs in Visual Studio en verken de tweede AddSingleton() aanroep in de ConfigureServices() methode.

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();
}

De AddSingleton() aanroep maakt een CommunicationIdentityClient object met behulp van de ACS_CONNECTION_STRING waarde van local.settings.json.
Open ACSTokenFunction.cs en zoek de constructor- en velddefinities.
- Er wordt een veld met de naam Scopes gedefinieerd dat het CommunicationTokenScope.VoIP bereik bevat. Dit bereik wordt gebruikt om het toegangstoken voor de videogesprek te maken.
```
private static readonly CommunicationTokenScope[] Scopes =
[
    CommunicationTokenScope.VoIP,
];
```
- Het CommunicationIdentityClient singleton-exemplaar dat in Startup.cs is gemaakt, wordt in de constructor geïnjecteerd en toegewezen aan het _tokenClient veld.
```
private readonly CommunicationIdentityClient _tokenClient;

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

Verken de Run() methode in 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;
}

Hiermee definieert u een functie met de naam HttpTriggerAcsToken die kan worden aangeroepen met een HTTP GET-aanvraag.
Er wordt een nieuwe ACS-gebruiker gemaakt door de methode aan te _tokenClient.CreateUserAsync() roepen.
Er wordt een toegangstoken gemaakt dat wordt gebruikt voor videogesprekken door de methode aan te _tokenClient. GetTokenAsync() roepen.
De gebruikers-id en het token worden geretourneerd vanuit de functie als een JSON-object.

Voer het programma uit door op F5 in Visual Studio te drukken of door Debug te selecteren.> Start Debugging vanuit het menu. Hiermee start u het Azure Functions-project en maakt u de ACSTokenFunction aanroep beschikbaar.

Notitie

Als u VS Code gebruikt, kunt u een terminalvenster openen in de map GraphACSFunctions en uitvoeren func start. Hierbij wordt ervan uitgegaan dat de Azure Functions Core Tools op uw computer zijn geïnstalleerd.
Nu azure Functions lokaal wordt uitgevoerd, moet de client deze kunnen aanroepen om de ACS-gebruikersidentiteit en tokenwaarden op te halen.
Open voorbeelden/acs-to-teams-meeting/client/react/App.tsx-bestand in uw editor.
Zoek de userId variabelen en token statusvariabelen in het onderdeel. Verwijder de vastgelegde waarden en vervang deze door lege aanhalingstekens:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

Zoek de useEffect functie en wijzig deze zodat deze er als volgt uitziet, zodat de Azure-functie kan worden aangeroepen om een ACS-gebruikersidentiteit en -token op te halen:

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

}, []);

Sla het bestand op voordat u doorgaat.
Open een terminalvenster en voer deze uit npm start in de react map. Nadat deze is gemaakt en geladen, ziet u dat de gebruikersinterface voor ACS-aanroepen wordt weergegeven en kunt u inbellen bij de Teams-vergadering die dynamisch is gemaakt door Microsoft Graph.
Stop de React-app door in het terminalvenster op Ctrl+C te drukken.
Stop het Azure Functions-project.
Voer uw Git-wijzigingen door en push ze naar uw GitHub-opslagplaats met behulp van Visual Studio Code:
- Selecteer het pictogram Broncodebeheer (3e omlaag op de werkbalk van Visual Studio Code).
- Voer een doorvoerbericht in en selecteer Doorvoeren.
- Selecteer Wijzigingen synchroniseren.

Open local.settings.json en werk de ACS_CONNECTION_STRING waarde bij met de ACS-verbindingsreeks die u in een eerdere oefening hebt opgeslagen.

Open server/typescript/src/functions/httpTriggerAcsToken.ts in Visual Studio Code. De code heeft de volgende code:

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;

De functie voert de volgende taken uit:
- Importeert CommunicationIdentityClient die wordt gebruikt om de gebruikersidentiteit en het token te maken.
```
import { CommunicationIdentityClient } from '@azure/communication-identity';
```
- Haalt de ACS-verbindingsreeks op uit een omgevingsvariabele met de naam ACS_CONNECTION_STRING.
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
Notitie

Dit is de verbindingsreeks waarde die u eerder hebt toegevoegd aan het local.settings.json-bestand.
- Hiermee maakt u een nieuw CommunicationIdentityClient exemplaar en geeft u de ACS-verbindingsreeks door aan het exemplaar.
```
let tokenClient = new CommunicationIdentityClient(connectionString);
```
- Hiermee maakt u een ACS-gebruiker en haalt u een Voice Over IP-token op.
```
const user = await tokenClient.createUser();
const userToken = await tokenClient.getToken(user, ["voip"]);
```
- Hiermee worden de waarden van de userId en het token teruggestuurd naar de aanroeper.
```
return {
    jsonBody: { userId: user.communicationUserId, ...userToken }
};
```
Ga naar de map server/typescript in een terminalvenster en voer deze uit npm start.
Nu azure Functions lokaal wordt uitgevoerd, moet de client deze kunnen aanroepen om de ACS-gebruikersidentiteit en tokenwaarden op te halen.
Open het bestand client/react/App.tsx in uw editor.
Zoek de userId variabelen en token statusvariabelen in het onderdeel. Verwijder de vastgelegde waarden en vervang deze door lege aanhalingstekens:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

Zoek de useEffect functie en wijzig deze zodat deze er als volgt uitziet, zodat de Azure-functie kan worden aangeroepen om een ACS-gebruikersidentiteit en -token op te halen:

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

}, []);

Sla het bestand op voordat u doorgaat.
Open een afzonderlijke terminal en voer deze uit npm start in de react-map . Nadat deze is gemaakt en geladen, ziet u dat de gebruikersinterface voor ACS-aanroepen wordt weergegeven en kunt u inbellen bij de Teams-vergadering die dynamisch is gemaakt door Microsoft Graph.
Stop beide terminalprocessen (React en Azure Functions) door Ctrl+C te selecteren.
Voer uw Git-wijzigingen door en push ze naar uw GitHub-opslagplaats met behulp van Visual Studio Code:
- Selecteer het pictogram Broncodebeheer (3e omlaag op de werkbalk van Visual Studio Code).
- Voer een doorvoerbericht in en selecteer Doorvoeren.
- Selecteer Wijzigingen synchroniseren.

De app implementeren in Azure Functions en Azure Container Apps

17 minuten resterend

Belangrijk

Naast de vereisten die voor deze zelfstudie worden vermeld, moet u ook de volgende hulpprogramma's op uw computer installeren om deze oefening te voltooien.

Azure-CLI
Als u VS Code gebruikt, installeert u de Azure Functions-extensie

In deze oefening leert u hoe u de Microsoft Graph- en ACS-functies implementeert die in eerdere oefeningen in Azure Functions zijn besproken. U bouwt ook een containerinstallatiekopieën en implementeert deze in Azure Container Apps.

Azure Container Apps

Implementeren in Azure Functions

C#
TypeScript

Notitie

In deze sectie wordt Visual Studio gebruikt om de C#-functies naar Azure te publiceren. Als u Liever Visual Studio Code gebruikt, kunt u de instructies volgen in de quickstart Een C#-functie maken in Azure met behulp van Visual Studio Code.

Open het samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln project in Visual Studio.
Klik met de rechtermuisknop op het GraphACSFunctions project en selecteer Publiceren.
Selecteer Azure in de doelsectie en klik vervolgens op Volgende.
Selecteer de Azure-functie-app (Windows) en klik vervolgens op Volgende.
Selecteer uw abonnement en selecteer vervolgens + Nieuwe maken.
Voer de volgende informatie in:
- Functienaam: Er is een wereldwijd unieke naam vereist. Voorbeeld: acsFunctions<YOUR_LAST_NAME>.
- Abonnement: selecteer uw abonnement.
- Resourcegroep: Selecteer een resourcegroep die u eerder in deze zelfstudie hebt gemaakt, of u kunt ook een nieuwe groep maken.
- Hostingabonnement: Verbruiksabonnement.
- Locatie: Selecteer de regio waarnaar u wilt implementeren.
- Azure Storage: maak een nieuwe. (U kunt ook een bestaand opslagaccount selecteren.)
- Azure Insights: maak een nieuwe. (U kunt ook een bestaand opslagaccount selecteren.)
Notitie

Er is een wereldwijd unieke naam vereist. U kunt de naam unieker maken door een getal of uw achternaam toe te voegen aan het einde van de naam.
Zodra de Azure Function-app is gemaakt, ziet u een bevestigingsscherm. Zorg ervoor dat de optie Uitvoeren vanuit pakket is geselecteerd en selecteer Voltooien.
Selecteer Publiceren om de functie in Azure te implementeren.
Zodra de functie is geïmplementeerd in Azure, gaat u naar Azure Portal en selecteert u de functie-app die u hebt gemaakt.
Kopieer de URL voor de functie die u hebt geïmplementeerd. U gebruikt de waarde verderop in deze oefening.
Selecteer Instellingen -> Configuratie in het linkermenu.
Selecteer de knop + Nieuwe toepassingsinstelling en voeg de volgende sleutels en waarden toe in de toepassingsinstellingen. U kunt deze waarden local.settings.json uit het GraphACSFunctions project ophalen.
```
# 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>
```
Selecteer de knop Opslaan om de instellingen op te slaan.
Ten slotte moet u CORS (Cross-Origin Resource Sharing) inschakelen voor de functie-app om de API's van de functie-app toegankelijk te maken van buiten uw domein. Selecteer Instellingen -> CORS in het linkermenu.
Voer * (toegankelijk vanuit alle domeinen) in het tekstvak Toegestane oorsprongen in en selecteer vervolgens de knop Opslaan .

Laten we aan de slag gaan met VS Code om de functiecode te implementeren in Azure Functions.

Open de projectmap server/typescript .
U moet al een node_modules map in de hoofdmap van het project hebben uitgevoerdnpm install. Als dat niet het is, opent u een opdrachtvenster en voert u deze uit npm install om de afhankelijkheden te installeren.
Het OPDRACHTpallet van VS Code openen (Shift+Cmd+P op Mac | Shift+Ctrl+P in Windows) en selecteer Azure Functions: Functie-app maken in Azure.

Notitie

Als u deze optie niet ziet, controleert u of de Azure Functions-extensie is geïnstalleerd in VS Code.
U wordt gevraagd de volgende gegevens in te voeren:
- Uw Azure-abonnementnaam.
- De functienaam: acsFunctions<YOUR_LAST_NAME>.
Notitie

Er is een wereldwijd unieke naam vereist. U kunt de naam unieker maken door een getal of uw achternaam toe te voegen aan het einde van de naam.
- De runtimestack: selecteer de meest recente Node.js LTS-versie .
- De regio (selecteer een gewenste regio).
Zodra de Azure Function-app is gemaakt, ziet u een bericht over het weergeven van de details.
Ga terug naar het opdrachtpallet in VS Code en selecteer Azure Functions: Implementeren in functie-app. U wordt gevraagd uw abonnement en de naam van de functie-app te selecteren die u eerder hebt gemaakt.
Zodra de functie is geïmplementeerd in Azure, gaat u als volgt te werk:
- Selecteer de Azure-extensie in VS Code (klik op het Azure-pictogram in de zijbalk).
- Vouw uw abonnement uit.
- Vouw uw functie-app uit.
- Klik met de rechtermuisknop op de functie en selecteer Browse Website. Zorg ervoor dat de functie-app correct werkt voordat u doorgaat.
Kopieer het Azure Function-domein naar een lokaal bestand. U gebruikt de waarde verderop in deze oefening.

Implementeren in Azure Container Apps

De eerste taak die u uitvoert, is het maken van een nieuwe ACR-resource (Azure Container Registry). Zodra het register is gemaakt, bouwt u een installatiekopieën en pusht u deze naar het register.
Open een opdrachtvenster en voer de volgende opdracht uit om u aan te melden bij uw Azure-abonnement:
```
az login
```

Voeg de volgende shellvariabelen toe die uw waarden vervangen door de tijdelijke aanduidingen. Voeg uw <GITHUB_USERNAME> toe als een kleine waarde en vervang uw Azure Functions-domein door de< AZURE_FUNCTIONS_DOMAIN> waarde (neem de https:// waarde van het domein op).

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>"

Maak een nieuwe Azure Container Registry-resource door de volgende opdracht uit te voeren:

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

Open het bestand client/react/Dockerfile in uw editor en u ziet dat de volgende taken worden uitgevoerd:
- De React-toepassing is gebouwd en toegewezen aan de buildfase .
- De nginx-server is geconfigureerd en de uitvoer van de buildfase wordt gekopieerd naar de nginx-serverinstallatiekopieën.

Bouw de containerinstallatiekopieën in Azure door de volgende opdracht uit te voeren vanuit de hoofdmap van de client/react-map . Vervang <YOUR_FUNCTIONS_DOMAIN> door uw Azure Functions-domein dat u eerder in deze oefening naar een lokaal bestand hebt gekopieerd.

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 .

Voer de volgende opdracht uit om de installatiekopieën in het register weer te geven. De nieuwe afbeelding wordt weergegeven.
```
az acr repository list --name $ACR_NAME --output table
```
Nu de installatiekopie is geïmplementeerd, moet u een Azure Container App maken waarmee de container kan worden uitgevoerd.
Ga naar Azure Portal in uw browser en meld u aan.
Typ container-apps in de bovenste zoekbalk en selecteer Container Apps in de opties die worden weergegeven.
Selecteer Maken in de werkbalk.

Notitie

Hoewel u Azure Portal gebruikt, kan er ook een container-app worden gemaakt met behulp van de Azure CLI. Zie Quickstart: Uw eerste container-app implementeren voor meer informatie. U ziet een voorbeeld van hoe de Azure CLI ook aan het einde van deze oefening kan worden gebruikt.
Voer de volgende taken uit:
- Selecteer uw abonnement.
- Selecteer de resourcegroep die u wilt gebruiken (maak indien nodig een nieuwe resourcegroep). U kunt desgewenst dezelfde resourcegroep gebruiken die u voor uw ACS-resource hebt gebruikt. Kopieer de naam van uw resourcegroep naar hetzelfde lokale bestand waar u uw Azure Functions-domein hebt opgeslagen.
- Voer een container-appnaam in van acs-to-teams-meeting.
- Selecteer een regio.
- Selecteer Nieuw maken in de sectie Container Apps Environment .
- Voer een omgevingsnaam in van acs-to-teams-meeting-env.
- Selecteer de knop Maken.
- Selecteer Volgende: App-instellingen >.
Voer de volgende waarden in het scherm Container-app maken in:
- Schakel het selectievakje Snelstartafbeelding gebruiken uit.
- Naam: acs-to-teams-meeting
- Bron van installatiekopieën: Azure Container Registry
- Register: <YOUR_ACR_REGISTRY_NAME.azurecr.io>
- Afbeelding: acs-to-teams-meeting
- Afbeeldingstag: meest recente
- CPU en geheugen: 0,25 CPU-kernen, -.5 Gi-geheugen
Ga als volgt te werk in de sectie Instellingen voor inkomend verkeer van toepassing:
- Schakel het selectievakje Geactiveerd in.
- Selecteer het keuzerondje Accepteren van verkeer vanaf elke locatie .
Hiermee maakt u een toegangspunt (inkomend) voor uw React-toepassing en staat u toe dat deze vanaf elke locatie kan worden aangeroepen. Azure Container Apps leidt al het verkeer om naar HTTPS.
- Doelpoort: 80

Selecteer Controleren + maken. Zodra de validatie is geslaagd, selecteert u de knop Maken .

Als er een fout optreedt, kan het zijn dat uw container-apps-omgeving te lang inactief is. De eenvoudigste oplossing is om het proces voor het opnieuw maken van de container-app te doorlopen. U kunt ook de volgende opdracht uitvoeren om de container-app te maken met behulp van de 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

Zodra de implementatie van uw container-app is voltooid, navigeert u ernaar in Azure Portal en selecteert u de toepassings-URL in het scherm Overzicht om de toepassing weer te geven die wordt uitgevoerd in de nginx-container.

Delen via

Audio-/videogesprekken vanuit een aangepaste app in een Teams-vergadering

Wat u in deze zelfstudie gaat bouwen

Overzicht van de toepassingsoplossing

Vereisten

Technologieën die in deze zelfstudie worden gebruikt, omvatten

Een Azure Communication Services-resource maken

Azure Communication Services-aanroepen integreren in een React-app

Dynamisch een Microsoft Teams-vergadering maken met Microsoft Graph

Een local.settings.json-bestand maken

De Azure-functie aanroepen vanuit React

Dynamisch een Azure Communication Services-identiteit en -token maken

De app implementeren in Azure Functions en Azure Container Apps

Implementeren in Azure Functions

Implementeren in Azure Container Apps

Gefeliciteerd

U hebt deze zelfstudie voltooid

Feedback