Ljud-/videosamtal från en anpassad app till ett Teams-möte

Artikel
Developer (Medel)
59 minuter för att slutföra

Nivå: Mellanliggande

I den här självstudien får du lära dig hur Azure Communication Services kan användas i ett anpassat React-program så att en användare kan ringa ett ljud-/videosamtal till ett Microsoft Teams-möte. Du får lära dig om de olika byggstenar som kan användas för att göra det här scenariot möjligt och få praktiska steg för att gå igenom de olika Microsoft Cloud-tjänsterna.

Vad du ska skapa i den här självstudien

Översikt över programlösningen

ACS-ljud-/videolösning

Förutsättningar

Node LTS – Node LTS används för det här projektet
git
Visual Studio Code eller någon annan IDE som du väljer.
Azure Functions-tillägg för VS Code
Azure Functions Core Tools
Azure-prenumeration
Microsoft 365-utvecklarklientorganisation
GitHub-konto
Visual Studio om du använder C#-versionen av självstudien. Visual Studio Code kan också användas om du vill.

Tekniker som används i den här självstudien är bland annat

React
Azure Communication Services
Azure Functions
Microsoft Graph
Microsoft Teams

Skapa en Azure Communication Services-resurs

57 minuter kvar

I den här övningen skapar du en Azure Communication Services-resurs (ACS) i Azure Portal.

ACS i Azure Portal

Kom igång genom att utföra följande uppgifter:

Besök Azure Portal i webbläsaren och logga in.
Skriv kommunikationstjänster i sökfältet överst på sidan och välj Kommunikationstjänster bland de alternativ som visas.
Välj Skapa i verktygsfältet.
Utför följande uppgifter:
- Välj din Azure-prenumerationen.
- Välj den resursgrupp som ska användas (skapa en ny om den inte finns).
- Ange ett ACS-resursnamn. Det måste vara ett unikt värde.
- Välj en dataplats.
Välj Granska + Skapa följt av Skapa.
När acs-resursen har skapats navigerar du till den och väljer Inställningar –> Identiteter och användaråtkomsttoken.
Markera kryssrutan Röst- och videosamtal (VOIP).
Välj Generera.
Kopiera värdena för identitets - och användaråtkomsttoken till en lokal fil. Du behöver värdena senare i den här övningen.
Välj Inställningar –> Nycklar och kopiera värdet primärnyckel anslutningssträng till den lokala fil där du kopierade användaridentitets- och tokenvärdena.
För att köra programmet behöver du en Teams-möteslänk. Gå till Microsoft Teams, logga in med din Microsoft 365-utvecklarklientorganisation och välj alternativet Kalender till vänster.

Dricks

Om du för närvarande inte har något Microsoft 365-konto kan du registrera dig för Microsoft 365 Developer Program-prenumerationen. Den är kostnadsfri i 90 dagar och förnyas kontinuerligt så länge du använder den för utvecklingsaktivitet. Om du har en Visual Studio Enterprise- eller Professional-prenumeration innehåller båda programmen en kostnadsfri Microsoft 365-utvecklarprenumeration som är aktiv under hela din Visual Studio-prenumeration.
Välj ett valfritt datum/tid i kalendern, lägg till en rubrik för mötet, bjud in en användare från microsoft 365-utvecklarklientorganisationen och välj Spara.
Välj det nya möte som du lade till i kalendern och kopiera teams-möteslänken som visas i samma fil där du lagrade ACS-användaridentiteten, token och anslutningssträng.
Nu när acs-resursen har konfigurerats och du har en länk för Teams-möteskoppling ska vi få igång React-programmet.

Integrera Azure Communication Services-samtal i en React-app

47 minuter kvar

I den här övningen lägger du till ACS UI-anropet sammansatt i en React-app för att göra ljud-/videosamtal från en anpassad app till ett Microsoft Teams-möte.

ACS i React

Besök GitHub och logga in. Om du inte redan har ett GitHub-konto kan du välja alternativet Registrera dig för att skapa ett.
Besök Microsoft Cloud GitHub-lagringsplatsen.
Välj alternativet Förgrening för att lägga till lagringsplatsen i din önskade GitHub-organisation/-konto.
Kör följande kommando för att klona den här lagringsplatsen till datorn. Ersätt <YOUR_ORG_NAME> med ditt GitHub-organisations-/kontonamn.
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
Öppna projektmappen samples/acs-to-teams-meeting i Visual Studio Code.
Expandera mappen client/react.
Öppna filen package.json i VS Code och notera att följande ACS-paket ingår:
```
@azure/communication-common 
@azure/communication-react
```
Dubbelkolla att du har npm 10 eller senare installerat genom att öppna ett terminalfönster och köra följande kommando:
```
npm --version
```
Dricks

Om du inte har npm 10 eller senare installerat kan du uppdatera npm till den senaste versionen genom att köra npm install -g npm.
Öppna ett terminalfönster och kör npm install kommandot i mappen React för att installera programberoendena.
Öppna App.tsx och ta en stund att utforska importen överst i filen. Dessa hanterar import av ACS-säkerhets- och ljud-/videosamtalssymboler som ska användas i appen.
```
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';
```
Kommentar

Du ser hur komponenten CallComposite används senare i den här övningen. Den tillhandahåller de grundläggande användargränssnittsfunktionerna för Azure Communication Services för att göra det möjligt att göra ett ljud-/videosamtal från appen till ett Microsoft Teams-möte.
Leta upp komponenten App och utför följande uppgifter:
- Ta en stund att undersöka useState definitionerna i komponenten.
- Ersätt funktionens userId useState tomma citattecken med det ACS-användaridentitetsvärde som du kopierade i föregående övning.
- Ersätt funktionens token useState tomma citattecken med det ACS-tokenvärde som du kopierade i föregående övning.
- Ersätt funktionens teamsMeetingLink useState tomma citattecken med det Teams-möteslänkvärde som du kopierade i föregående övning.
```
// 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>('');
```
Kommentar

Senare i den här självstudien får du se hur du hämtar userIdvärdena , tokenoch teamsMeetingLink dynamiskt.
Ta en stund att utforska useMemo funktionerna i komponenten App .
- Funktionen credential useMemo skapar en ny AzureCommunicationTokenCredential instans när token har ett värde.
- Funktionen callAdapterArgs useMemo returnerar ett objekt som har argumenten som används för att göra ett ljud-/videoanrop. Observera att använder userIdvärdena , credentialoch teamsMeetingLink i ACS-anropsargumenten.
```
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]);
```
Kommentar

useMemo används i det här scenariot eftersom vi bara vill AzureCommunicationTokenCredential att objektet och anropskortet args ska skapas en gång när de nödvändiga parametrarna skickas in. Visa ytterligare information om useMemo här.
credentials När och callAdapterArgs är redo hanterar följande rad att skapa en ACS-anropsadapter med hjälp av React-kroken useAzureCommunicationCallAdapter som tillhandahålls av ACS. Objektet callAdapter används senare i användargränssnittet som anropar sammansatt komponent.
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
Kommentar

Eftersom useAzureCommunicationCallAdapter är en React-krok tilldelar den callAdapterArgs inte ett värde till callAdapter förrän värdet är giltigt.

Tidigare tilldelade du användaridentiteten, token och Teams möteslänk till tillståndsvärden i komponenten App . Det fungerar bra för tillfället, men i en senare övning får du se hur du dynamiskt hämtar dessa värden. Eftersom du angav värdena tidigare kommenterar du ut koden i useEffect funktionen som du ser härnäst. När du har fått Igång Azure Functions i nästa övningar går du tillbaka till den här koden.

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

    */
}, []);

Leta upp följande JSX-kod. Den använder symbolen CallComposite som du såg importerad för att återge användargränssnittet som används för att göra ett ljud-/videosamtal från React-appen till ett Teams-möte. Du callAdapter utforskade tidigare skickas till dess adapter egenskap för att tillhandahålla de argument som krävs.
```
if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}
```
Spara filen innan du fortsätter.
Kör npm start i terminalfönstret för att köra programmet. Kontrollera att du kör kommandot i react-mappen.
När programmen har skapats bör du se ett anropsgränssnitt som visas. Aktivera valet av mikrofon och kamera och starta samtalet. Du bör se att du är placerad i ett väntrum. Om du ansluter till mötet som du konfigurerade tidigare i Microsoft Teams kan du låta gästen komma in i mötet.
Stoppa programmet genom att trycka på Ctrl + C . Nu när du har kört den ska vi utforska hur du dynamiskt kan hämta ACS-användaridentiteten och token och automatiskt skapa ett Microsoft Teams-möte och returnera anslutnings-URL:en med hjälp av Microsoft Graph.

Skapa ett Microsoft Teams-möte dynamiskt med Hjälp av Microsoft Graph

37 minuter kvar

I den här övningen automatiserar du processen med att skapa en Microsoft Teams-möteslänk och skicka till ACS med hjälp av Azure Functions och Microsoft Graph.

Skapa Teams-möte

Du måste skapa en Microsoft Entra-ID-app för Daemon-appautentisering. I det här steget hanteras autentisering i bakgrunden med appautentiseringsuppgifter och en Microsoft Entra-ID-app använder programbehörigheter för att göra Microsoft Graph API-anrop. Microsoft Graph används för att dynamiskt skapa ett Microsoft Teams-möte och returnera Teams mötes-URL.
Utför följande steg för att skapa en Microsoft Entra-ID-app:
1. Gå till Azure Portal och välj Microsoft Entra-ID.
2. Välj fliken Appregistrering följt av + Ny registrering.
3. Fyll i information om det nya appregistreringsformuläret enligt nedan och välj Registrera:
  - Namn: ACS Teams Interop App
  - Kontotyper som stöds: Konton i valfri organisationskatalog (Alla Microsoft Entra-ID-kataloger – multitenant) och personliga Microsoft-konton (t.ex. Skype, Xbox)
  - Omdirigerings-URI: lämna detta tomt
4. När appen har registrerats går du till API-behörigheter och väljer + Lägg till en behörighet.
5. Välj Microsoft Graph följt av Programbehörigheter.
6. Välj behörigheten Calendars.ReadWrite och välj sedan Lägg till.
7. När du har lagt till behörigheterna väljer du Bevilja administratörsmedgivande för <YOUR_ORGANIZATION_NAME>.
8. Gå till fliken Certifikat och hemligheter , välj + Ny klienthemlighet och välj sedan Lägg till.
9. Kopiera värdet för hemligheten till en lokal fil. Du använder värdet senare i den här övningen.
10. Gå till fliken Översikt och kopiera Application (client) ID värdena och Directory (tenant) ID till samma lokala fil som du använde i föregående steg.

samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln Öppna i Visual Studio eller öppna mappen GraphACSFunctions i Visual Studio Code.
Gå till GraphACSFunctions projektet och skapa en local.settings.json fil med följande värden:
```
{
    "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"
    ]
}
```
- Använd de värden som du kopierade till den lokala filen i en tidigare övning för att uppdatera TENANT_IDvärdena och CLIENT_ID CLIENT_SECRET .
- Definiera USER_ID med det användar-ID som du vill skapa ett Microsoft Teams-möte.
Du kan hämta användar-ID:t från Azure Portal.
- Logga in med ditt administratörskonto för Microsoft 365-utvecklarens klientorganisation.
- Välj Microsoft Entra ID
- Gå till fliken Användare i sidofältet.
- Sök efter ditt användarnamn och välj det för att se användarinformationen.
- Inuti användarinformationen Object ID representerar .User ID Kopiera värdet Object ID och använd det för värdet USER_ID i local.settings.json.
Kommentar

ACS_CONNECTION_STRING kommer att användas i nästa övning så att du inte behöver uppdatera den ännu.

Öppna GraphACSFunctions.sln i mappen acs-to-teams-meeting/server/csharp och observera att den innehåller följande Microsoft Graph- och Identity-paket:

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

Gå till Program.cs och notera följande kod i ConfigureServices metoden:

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

Den här koden skapar ett GraphServiceClient objekt som kan användas för att anropa Microsoft Graph från Azure Functions. Det är en singleton och kan matas in i andra klasser.
Du kan göra Microsoft Graph API-anrop med appbehörigheter (till exempel Calendars.ReadWrite) genom att skicka ett ClientSecretCredential värde till GraphServiceClient konstruktorn. ClientSecretCredential Använder Tenant Idvärdena , Client Id och Client Secret från Microsoft Entra ID-appen.

Öppna tjänster/GraphService.cs.

Ta en stund att utforska CreateMeetingEventAsync metoden:

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 och IConfiguration objekt matas in i konstruktorn och tilldelas till fält.
Funktionen CreateMeetingAsync() publicerar data till Microsoft Graph Calendar Events API, som dynamiskt skapar en händelse i en användares kalender och returnerar kopplings-URL:en.

Öppna TeamsMeetingFunctions.cs och ta en stund att undersöka konstruktorn. Den GraphServiceClient du tittade på tidigare matas in och tilldelas till fältet _graphService .
```
private readonly IGraphService _graphService;

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

Run Leta upp metoden:

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

Det definierar ett funktionsnamn HttpTriggerTeamsUrl för som kan anropas med en HTTP GET-begäran.
Den anropar _graphService.CreateMeetingAsync(), som skapar en ny händelse och returnerar kopplings-URL:en.

Kör programmet genom att trycka på F5 i Visual Studio eller genom att välja Felsöka> – Starta felsökning från menyn. Den här åtgärden startar Azure Functions-projektet och gör det ACSTokenFunction tillgängligt att anropa.

Kommentar

Om du använder VS Code kan du öppna ett terminalfönster i mappen GraphACSFunctions och köra func start. Detta förutsätter att du har Azure Functions Core Tools installerat på datorn.

Öppna projektmappen samples/acs-to-teams-meeting/server/typescript i Visual Studio Code.
Skapa en local.settings.json fil med följande värden:
```
{
    "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"
    ]
}
```
- Använd de värden som du kopierade till den lokala filen i en tidigare övning för att uppdatera TENANT_IDvärdena och CLIENT_ID CLIENT_SECRET .
- Definiera USER_ID med det användar-ID som du vill skapa ett Microsoft Teams-möte.
Du kan hämta användar-ID:t från Azure Portal.
- Logga in med ditt administratörskonto för Microsoft 365-utvecklarens klientorganisation.
- Välj Microsoft Entra-ID,
- Gå till fliken Användare i sidofältet.
- Sök efter ditt användarnamn och välj det för att se användarinformationen.
- Inuti användarinformationen Object ID representerar .User ID Kopiera värdet Object ID och använd det för värdet USER_ID i local.settings.json.
Kommentar

ACS_CONNECTION_STRING kommer att användas i nästa övning så att du inte behöver uppdatera den ännu.
Öppna filen package.json i VS Code och observera att följande Microsoft Graph- och Identity-paket ingår:
```
@azure/communication-identity
@azure/identity
@microsoft/microsoft-graph-client
```
Öppna ett terminalfönster i mappen typescript och kör npm install kommandot för att installera programberoendena.
Öppna Delade/graph.ts och ta en stund att utforska importen överst i filen. Den här koden hanterar import av autentiserings- och klientsymboler som används i Azure-funktionen för att anropa 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';
```
Dricks

Du ser även importer från dateTimeFormat.ts som används senare i den här övningen. startDateTimeAsync och endDateTimeAsync används när du skapar en Microsoft Teams-möteslänk för att definiera startdatum och slutdatum för mötet.
Ta en stund att undersöka clientSecretCredential och appGraphClient. De kommer att användas senare i autentiseringsprocessen och när du anropar Microsoft Graph API:
```
let clientSecretCredential;
let appGraphClient;
```

ensureGraphForAppOnlyAuth Leta upp funktionen:

ClientSecretCredentialTenant Idanvänder värdena och Client Id Client Secret från Microsoft Entra ID-appen.
Objektet authProvider definieras som en Microsoft Entra-ID-app som autentiserar i bakgrunden och använder endast appbehörigheter (till exempel Calendars.ReadWrite) för att göra Microsoft Graph API-anrop.

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

Ta en stund att utforska createNewMeetingAsync funktionen. Den publicerar data till MICROSOFT Graph Calendar Events API, som dynamiskt skapar en händelse i en användares kalender och returnerar den nya händelseinformationen:

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;

Gå till server/typescript/src/functions/httpTriggerTeamsUrl.ts och utforska funktionen Http Trigger :

createNewMeetingAsync importeras från graph.ts. Den hanterar skapande och hämtning av ny händelseinformation.
userId hämtas från local.settings.json i funktionen Http-utlösare. Den här hämtningen USER_ID görs genom att komma åt miljövariabeln med hjälp process.env.USER_IDav .
När funktionen utlöses anropas createNewMeetingAsync den med det definierade användar-ID:t och returnerar den nya händelseinformationen i teamMeetingLink parametern.
Funktionen kommer åt TEAMS-mötesanslutnings-URL:en genom att anropa meeting.onlineMeeting.joinUrl och returnerar värdet i brödtexten i svaret.

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;

Använd ett terminalfönster för att köra npm start i mappen samples/acs-video-to-teams-meeting/server/typescript för att köra funktionen lokalt.

Anropa Azure-funktionen från React

Nu när httpTriggerTeamsUrl funktionen är redo att användas ska vi anropa den från React-appen.
Expandera mappen client/react.
Lägg till en .env-fil i mappen med följande värden:
```
REACT_APP_TEAMS_MEETING_FUNCTION=http://localhost:7071/api/httpTriggerTeamsUrl
REACT_APP_ACS_USER_FUNCTION=http://localhost:7071/api/httpTriggerAcsToken
```
Dessa värden skickas till React när de skapas så att du enkelt kan ändra dem efter behov under byggprocessen.
Öppna filen client/react/App.tsx i VS Code.
Leta upp tillståndsvariabeln teamsMeetingLink i komponenten. Ta bort länken för hårdkodade team och ersätt den med tomma citattecken:
```
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```

useEffect Leta upp funktionen och ändra den så att den ser ut så här. Detta hanterar anrop av Den Azure-funktion som du tittade på tidigare, vilket skapar ett Teams-möte och returnerar länken för möteskoppling:

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

}, []);

Spara filen innan du fortsätter.
Öppna ett terminalfönster i cd mappen *react och kör npm start för att skapa och köra programmet.
När programmet har skapats och lästs in bör du se att användargränssnittet för ACS-anrop visas och sedan kan anropa till Teams-mötet som skapades dynamiskt av Microsoft Graph.
Stoppa terminalprocessen genom att ange Ctrl + C i terminalfönstret.
Stoppa Azure Functions-projektet.

Kommentar

Gå till dokumentationen för Azure Communication Services om du vill veta mer om hur du utökar Microsoft Teams-möten på andra sätt.

Skapa en identitet och token för Azure Communication Services dynamiskt

27 minuter kvar

I den här övningen får du lära dig hur du dynamiskt hämtar användaridentitets- och tokenvärden från Azure Communication Services med hjälp av Azure Functions. När värdena har hämtats skickas de till acs-användargränssnittets sammansatta för att göra det möjligt att göra ett anrop av en kund.

Skapa ACS-identitet och token

C#
TypeScript

Öppna local.settings.json och uppdatera ACS_CONNECTION_STRING värdet med ACS-anslutningssträng du sparade i en tidigare övning.

Öppna Startup.cs i Visual Studio och utforska det andra AddSingleton() anropet ConfigureServices() i metoden.

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

Anropet AddSingleton() skapar ett CommunicationIdentityClient objekt med hjälp av ACS_CONNECTION_STRING värdet från local.settings.json.
Öppna ACSTokenFunction.cs och leta upp konstruktor- och fältdefinitionerna.
- Ett fält med namnet Scopes definieras som innehåller omfånget CommunicationTokenScope.VoIP . Det här omfånget används för att skapa åtkomsttoken för videosamtalet.
```
private static readonly CommunicationTokenScope[] Scopes =
[
    CommunicationTokenScope.VoIP,
];
```
- Singleton-instansen CommunicationIdentityClient som skapas i Startup.cs matas in i konstruktorn och tilldelas till _tokenClient fältet.
```
private readonly CommunicationIdentityClient _tokenClient;

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

Run() Utforska metoden i 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;
}

Den definierar en funktion med namnet HttpTriggerAcsToken som kan anropas med en HTTP GET-begäran.
En ny ACS-användare skapas genom att anropa _tokenClient.CreateUserAsync() metoden.
En åtkomsttoken som används för videoanrop skapas genom att anropa _tokenClient. GetTokenAsync() metoden.
Användar-ID och token returneras från funktionen som ett JSON-objekt.

Kör programmet genom att trycka på F5 i Visual Studio eller genom att välja Felsöka> – Starta felsökning från menyn. Detta startar Azure Functions-projektet och gör det ACSTokenFunction tillgängligt att anropa.

Kommentar

Om du använder VS Code kan du öppna ett terminalfönster i mappen GraphACSFunctions och köra func start. Detta förutsätter att du har Azure Functions Core Tools installerat på datorn.
Nu när Azure Functions körs lokalt måste klienten kunna anropa dem för att hämta ACS-användaridentiteten och tokenvärdena.
Öppna filen samples/acs-to-teams-meeting/client/react/App.tsx i redigeringsprogrammet.
Leta upp variablerna userId och token tillstånd i komponenten. Ta bort de hårdkodade värdena och ersätt dem med tomma citattecken:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

useEffect Leta upp funktionen och ändra den så att den ser ut så här för att aktivera anrop till Azure-funktionen för att hämta en ACS-användaridentitet och -token:

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

}, []);

Spara filen innan du fortsätter.
Öppna ett terminalfönster och kör npm start i react mappen. När det har skapats och lästs in bör du se att användargränssnittet för ACS-anrop visas och du kan anropa teams-mötet som skapades dynamiskt av Microsoft Graph.
Stoppa React-appen genom att trycka på Ctrl + C i terminalfönstret.
Stoppa Azure Functions-projektet.
Checka in dina git-ändringar och skicka dem till din GitHub-lagringsplats med Hjälp av Visual Studio Code:
- Välj ikonen Källkontroll (den tredje längst ned i Visual Studio Code-verktygsfältet).
- Ange ett incheckningsmeddelande och välj Checka in.
- Välj Synkronisera ändringar.

Öppna local.settings.json och uppdatera ACS_CONNECTION_STRING värdet med ACS-anslutningssträng du sparade i en tidigare övning.

Öppna server/typescript/src/functions/httpTriggerAcsToken.ts i Visual Studio Code. Den har följande kod:

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;

Funktionen utför följande uppgifter:
- Importerar CommunicationIdentityClient som ska användas för att skapa användaridentiteten och token.
```
import { CommunicationIdentityClient } from '@azure/communication-identity';
```
- Hämtar ACS-anslutningssträng från en miljövariabel med namnet ACS_CONNECTION_STRING.
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
Kommentar

Det här är det anslutningssträng värde som du lade till i local.settings.json-filen tidigare.
- Skapar en ny CommunicationIdentityClient instans och skickar ACS-anslutningssträng till den.
```
let tokenClient = new CommunicationIdentityClient(connectionString);
```
- Skapar en ACS-användare och hämtar en Voice Over IP-token.
```
const user = await tokenClient.createUser();
const userToken = await tokenClient.getToken(user, ["voip"]);
```
- Skickar tillbaka userId- och tokenvärdena till anroparen.
```
return {
    jsonBody: { userId: user.communicationUserId, ...userToken }
};
```
Gå till mappen server/typescript i ett terminalfönster och kör npm start.
Nu när Azure Functions körs lokalt måste klienten kunna anropa dem för att hämta ACS-användaridentiteten och tokenvärdena.
Öppna filen client/react/App.tsx i redigeringsprogrammet.
Leta upp variablerna userId och token tillstånd i komponenten. Ta bort de hårdkodade värdena och ersätt dem med tomma citattecken:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

useEffect Leta upp funktionen och ändra den så att den ser ut så här för att aktivera anrop till Azure-funktionen för att hämta en ACS-användaridentitet och -token:

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

}, []);

Spara filen innan du fortsätter.
Öppna en separat terminal och kör npm start i react-mappen. När det har skapats och lästs in bör du se att användargränssnittet för ACS-anrop visas och du kan anropa teams-mötet som skapades dynamiskt av Microsoft Graph.
Stoppa båda terminalprocesserna (React och Azure Functions) genom att välja Ctrl + C.
Checka in dina git-ändringar och skicka dem till din GitHub-lagringsplats med Hjälp av Visual Studio Code:
- Välj ikonen Källkontroll (den tredje längst ned i Visual Studio Code-verktygsfältet).
- Ange ett incheckningsmeddelande och välj Checka in.
- Välj Synkronisera ändringar.

Distribuera appen till Azure Functions och Azure Container Apps

17 minuter kvar

Viktigt!

Förutom de förutsättningar som anges för den här självstudien måste du även installera följande verktyg på datorn för att slutföra den här övningen.

Azure CLI
Om du använder VS Code installerar du Azure Functions-tillägget

I den här övningen får du lära dig hur du distribuerar funktionerna Microsoft Graph och ACS som beskrivs i tidigare övningar till Azure Functions. Du skapar också en containeravbildning och distribuerar den till Azure Container Apps.

Azure Container Apps

Distribuera till Azure Functions

C#
TypeScript

Kommentar

Det här avsnittet använder Visual Studio för att publicera C#-funktionerna till Azure. Om du föredrar att använda Visual Studio Code kan du följa anvisningarna i snabbstarten Skapa en C#-funktion i Azure med hjälp av Visual Studio Code .

samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln Öppna projektet i Visual Studio.
Högerklicka på GraphACSFunctions projektet och välj Publicera.
Välj Azure i målavsnittet och klicka sedan på Nästa.
Välj Azure Function App (Windows) och klicka sedan på Nästa.
Välj din prenumeration och välj sedan + Skapa ny.
Ange följande information:
- Funktionsnamn: Ett globalt unikt namn krävs. Exempel: acsFunctions<YOUR_LAST_NAME>.
- Prenumeration: Välj din prenumeration.
- Resursgrupp: Välj en resursgrupp som du skapade tidigare i den här självstudien eller skapa en ny.
- Värdplan: Förbrukningsplan.
- Plats: Välj den region som du vill distribuera till.
- Azure Storage: Skapa en ny. (Du kan också välja ett befintligt lagringskonto.)
- Azure Insights: Skapa en ny. (Du kan också välja ett befintligt lagringskonto.)
Kommentar

Ett globalt unikt namn krävs. Du kan göra namnet mer unikt genom att lägga till ett tal eller ditt efternamn i slutet av namnet.
När Azure-funktionsappen har skapats visas en bekräftelseskärm. Kontrollera att alternativet Kör från paket är markerat och välj sedan Slutför.
Välj Publicera för att distribuera funktionen till Azure.
När funktionen har distribuerats till Azure går du till Azure Portal och väljer funktionsappen som du skapade.
Kopiera URL:en för den funktion som du distribuerade. Du använder värdet senare i den här övningen.
Välj Inställningar –> Konfiguration på den vänstra menyn.
Välj + Knappen Ny programinställning och lägg till följande nycklar och värden i programinställningarna. Du kan retreive dessa värden från local.settings.json i GraphACSFunctions projektet.
```
# 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>
```
Spara inställningarna genom att välja knappen Spara.
Slutligen måste du aktivera CORS (Resursdelning mellan ursprung) för funktionsappen för att göra funktionsappens API:er tillgängliga utanför domänen. Välj Inställningar –> CORS i den vänstra menyn.
Ange * (tillgängligt från alla domäner) i textrutan Tillåtna ursprung och välj sedan knappen Spara .

Nu ska vi komma igång med VS Code för att distribuera funktionskoden till Azure Functions.

Öppna projektmappen server/typescript .
Du bör redan ha kört npm install och se en node_modules mapp i projektroten. Annars öppnar du ett kommandofönster och kör npm install för att installera beroendena.
Öppna kommandopaletten för VS Code (Skift+Cmd+P på Mac | Skift+Ctrl+P i Windows) och välj Azure Functions: Skapa funktionsapp i Azure.

Kommentar

Om du inte ser det här alternativet kontrollerar du att Azure Functions-tillägget är installerat i VS Code.
Du uppmanas att ange följande information:
- Ditt Azure-prenumerationsnamn.
- Funktionsnamnet: acsFunctions<YOUR_LAST_NAME>.
Kommentar

Ett globalt unikt namn krävs. Du kan göra namnet mer unikt genom att lägga till ett tal eller ditt efternamn i slutet av namnet.
- Körningsstacken – Välj den senaste Node.js LTS-versionen .
- Regionen (välj vilken region du vill).
När Azure-funktionsappen har skapats visas ett meddelande om att visa informationen.
Gå tillbaka till kommandopaletten i VS Code och välj Azure Functions: Distribuera till funktionsapp. Du uppmanas att välja din prenumeration och namnet på funktionsappen som du skapade tidigare.
När funktionen har distribuerats till Azure gör du följande:
- Välj Azure-tillägget i VS Code (klicka på Azure-ikonen i sidofältet).
- Expandera din prenumeration.
- Expandera funktionsappen.
- Högerklicka på funktionen och välj Bläddra på webbplatsen. Kontrollera att funktionsappen fungerar korrekt innan du fortsätter.
Kopiera Azure Function-domänen till en lokal fil. Du använder värdet senare i den här övningen.

Distribuera till Azure Container Apps

Den första uppgiften du utför är att skapa en ny Azure Container Registry-resurs (ACR). När registret har skapats skapar du en avbildning och push-överför den till registret.
Öppna ett kommandofönster och kör följande kommando för att logga in på din Azure-prenumeration:
```
az login
```

Lägg till följande gränssnittsvariabler som ersätter dina värden för platshållarna efter behov. Lägg till din <GITHUB_USERNAME> som ett gemener och ersätt Azure Functions-domänen <med värdet AZURE_FUNCTIONS_DOMAIN> (inkludera https:// i domänvärdet).

Våldsamt slag
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>"

Skapa en ny Azure Container Registry-resurs genom att köra följande kommando:

Våldsamt slag
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

Öppna filen client/react/Dockerfile i redigeringsprogrammet och observera att följande uppgifter utförs:
- React-programmet skapas och tilldelas till byggfasen .
- Nginx-servern har konfigurerats och utdata från byggfasen kopieras till nginx-serverbilden.

Skapa containeravbildningen i Azure genom att köra följande kommando från roten i mappen client/react . Ersätt <YOUR_FUNCTIONS_DOMAIN> med din Azure Functions-domän som du kopierade till en lokal fil tidigare i den här övningen.

Våldsamt slag
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 .

Kör följande kommando för att visa avbildningarna i registret. Du bör se den nya avbildningen i listan.
```
az acr repository list --name $ACR_NAME --output table
```
Nu när avbildningen har distribuerats måste du skapa en Azure Container App som kan köra containern.
Besök Azure Portal i webbläsaren och logga in.
Skriv containerappar i det övre sökfältet och välj Container Apps bland de alternativ som visas.
Välj Skapa i verktygsfältet.

Kommentar

Även om du använder Azure Portal kan en containerapp också skapas med hjälp av Azure CLI. Mer information finns i Snabbstart: Distribuera din första containerapp. Du ser ett exempel på hur Azure CLI även kan användas i slutet av den här övningen.
Utför följande uppgifter:
- Välj din prenumeration.
- Välj den resursgrupp som ska användas (skapa en ny om det behövs). Du kan använda samma resursgrupp som du använde för din ACS-resurs om du vill. Kopiera resursgruppens namn till samma lokala fil där du lagrade Azure Functions-domänen.
- Ange namnet på containerappen acs-to-teams-meeting.
- Välj en region.
- Välj Skapa ny i avsnittet Container Apps Environment (Miljö för containerappar).
- Ange ett miljönamn för acs-to-teams-meeting-env.
- Markera knappen Skapa.
- Välj Nästa: Appinställningar >.
Ange följande värden på skärmen Skapa containerapp :
- Avmarkera kryssrutan Använd snabbstartsbild .
- Namn: acs-to-teams-meeting
- Avbildningskälla: Azure Container Registry
- Register: <YOUR_ACR_REGISTRY_NAME.azurecr.io>
- Bild: acs-to-teams-meeting
- Bildtagg: senaste
- CPU och minne: 0,25 CPU-kärnor, -.5 Gi-minne
I avsnittet Programinställningar för ingress gör du följande:
- Markera kryssrutan Aktiverad.
- Välj knappen Acceptera trafik var du än befinner dig.
Detta skapar en startpunkt (ingress) för ditt React-program och tillåter att det anropas var som helst. Azure Container Apps omdirigerar all trafik till HTTPS.
- Målport: 80

Välj Granska + skapa. När valideringen har godkänts väljer du knappen Skapa .

Om du får ett fel kan det bero på att containerappmiljön är inaktiv för länge. Den enklaste lösningen är att gå igenom processen med att skapa containerappen igen. Du kan också köra följande kommando för att skapa containerappen med hjälp av Azure CLI:

Våldsamt slag
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

När distributionen av containerappen är klar navigerar du till den i Azure Portal och väljer program-URL:en på skärmen Översikt för att visa programmet som körs i nginx-containern!

Dela via

Ljud-/videosamtal från en anpassad app till ett Teams-möte

Vad du ska skapa i den här självstudien

Översikt över programlösningen

Förutsättningar

Tekniker som används i den här självstudien är bland annat

Skapa en Azure Communication Services-resurs

Integrera Azure Communication Services-samtal i en React-app

Skapa ett Microsoft Teams-möte dynamiskt med Hjälp av Microsoft Graph

Skapa en local.settings.json-fil

Anropa Azure-funktionen från React

Skapa en identitet och token för Azure Communication Services dynamiskt

Distribuera appen till Azure Functions och Azure Container Apps

Distribuera till Azure Functions

Distribuera till Azure Container Apps

Grattis!

Du har slutfört den här självstudien

Feedback