Hlasové hovory a videohovory z vlastní aplikace do schůzky v Teams

Článek
Developer (Středně pokročilý)
59 min do dokončení

Úroveň: Středně pokročilí

V tomto kurzu se dozvíte, jak se Azure Communication Services dají použít ve vlastní React aplikaci, aby uživatel mohl při schůzce Microsoft Teams provádět hlasový hovor nebo videohovor. Dozvíte se o různých stavebních blocích, které je možné použít k tomu, aby byl tento scénář možný, a poskytnete vám praktické kroky, které vás provedou různými cloudovými službami Microsoftu.

Co v tomto kurzu vytvoříte

Přehled aplikačního řešení

Architektura scénáře

Požadavky

Node LTS – Node LTS se používá pro tento projekt.
git
Visual Studio Code nebo jiné integrované vývojové prostředí (IDE) podle vašeho výběru.
rozšíření Azure Functions pro VS Code
Azure Functions Core Tools
Předplatné Azure
Vývojářský tenant Microsoftu 365
Účet GitHub
Visual Studio , pokud používáte verzi kurzu v jazyce C#. V případě potřeby je možné použít také Visual Studio Code.

Mezi technologie použité v tomto kurzu patří:

React
Azure Communication Services
Azure Functions
Microsoft Graph
Microsoft Teams

Create prostředku Azure Communication Services

57 min zbývá

V tomto cvičení vytvoříte prostředek Azure Communication Services (ACS) v Azure Portal.

Služba ACS v Azure Portal

Začněte tím, že provedete následující úlohy:

Přejděte na Azure Portal v prohlížeči a přihlaste se.
Do vyhledávacího panelu v horní části stránky zadejte komunikační služby a ze zobrazených možností vyberte Komunikační služby.
Na panelu nástrojů vyberte Create.
Proveďte následující úlohy:
- Vyberte své předplatné Azure.
- Vyberte skupinu prostředků, kterou chcete použít (vytvořte novou, pokud neexistuje).
- Zadejte název prostředku služby ACS. Tato hodnota musí být jedinečná.
- Vyberte umístění dat.
Vyberte Zkontrolovat + Create a potom Create.
Po vytvoření prostředku služby ACS na něj přejděte a vyberte Nastavení –> Identity & Přístupové tokeny uživatelů.
Zaškrtněte políčko Hlasové hovory a videohovory (VOIP).
Vyberte Generovat.
Zkopírujte hodnoty identity a tokenu přístupu uživatele do místního souboru. Hodnoty budete potřebovat později v tomto cvičení.
Vyberte Nastavení –> Klíče a zkopírujte hodnotu primárního klíče připojovací řetězec do místního souboru, do kterého jste zkopírovali identitu uživatele a hodnoty tokenu.
Ke spuštění aplikace budete potřebovat odkaz na schůzku v Teams. Přejděte na Microsoft Teams, přihlaste se pomocí svého vývojářského tenanta Microsoft 365 a vlevo vyberte možnost Kalendář .

Tip

Pokud momentálně nemáte účet Microsoft 365, můžete si zaregistrovat předplatné programu Microsoft 365 Developer Program . Je zdarma po dobu 90 dnů a bude se neustále prodlužovat, dokud ho používáte pro aktivitu vývoje. Pokud máte předplatné sady Visual Studio Enterprise nebo Professional , oba programy zahrnují bezplatné vývojářské předplatné Microsoftu 365, které je aktivní po dobu životnosti vašeho předplatného sady Visual Studio.
V kalendáři vyberte libovolné datum a čas, přidejte název schůzky, pozvěte uživatele z vývojářského tenanta Microsoft 365 a vyberte Uložit.
Vyberte novou schůzku, kterou jste přidali do kalendáře, a zkopírujte odkaz na schůzku Teams, který se zobrazí, do stejného souboru, do kterého jste uložili identitu uživatele služby ACS, token a připojovací řetězec.
Teď, když je váš prostředek služby ACS nastavený a máte odkaz pro připojení ke schůzce v Teams, zprovozníme React aplikaci.

Integrace volání Azure Communication Services do aplikace React

47 min zbývá

V tomto cvičení přidáte volání uživatelského rozhraní ACS složené do React aplikace, které umožní volání zvuku a videa z vlastní aplikace do schůzky v Microsoft Teams.

ACS v React

Přejděte na GitHub a přihlaste se. Pokud ještě nemáte účet GitHub, můžete si ho vytvořit výběrem možnosti Registrace .
Navštivte úložiště Microsoft Cloud na GitHubu.
Výběrem možnosti Fork přidejte úložiště do požadované organizace nebo účtu GitHubu.
Spuštěním následujícího příkazu naklonujte toto úložiště do svého počítače. Nahraďte< YOUR_ORG_NAME> názvem vaší organizace nebo účtu GitHubu.
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
Otevřete složku projektu samples/acs-to-teams-meeting v editoru Visual Studio Code.
Rozbalte složku klient/react .
Otevřete soubor package.json v editoru VS Code a všimněte si, že obsahuje následující balíčky ACS:
```
@azure/communication-common 
@azure/communication-react
```
Znovu zkontrolujte, že máte nainstalovaný npm 10 nebo vyšší, a to tak, že otevřete okno terminálu a spustíte následující příkaz:
```
npm --version
```
Tip

Pokud nemáte nainstalovaný npm 10 nebo novější, můžete npm aktualizovat na nejnovější verzi spuštěním příkazu npm install -g npm.
Otevřete okno terminálu a spuštěním npm install příkazu ve složce react nainstalujte závislosti aplikace.
Otevřete Soubor App.tsx a prohlédněte si importy v horní části souboru. Ty zpracovávají import symbolů zabezpečení ACS a volání zvuku/videohovoru, které se použijí v aplikaci.
```
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';
```
Poznámka

Způsob použití komponenty uvidíte CallComposite později v tomto cvičení. Poskytuje základní funkce uživatelského rozhraní pro Azure Communication Services umožňující hlasový hovor nebo videohovor z aplikace do schůzky v Microsoft Teams.
Vyhledejte komponentu App a proveďte následující úlohy:
- Chvíli se podívejte na useState definice v komponentě .
- userIduseState Nahraďte prázdné uvozovky funkce hodnotou identity uživatele ACS, kterou jste zkopírovali v předchozím cvičení.
- tokenuseState Nahraďte prázdné uvozovky funkce hodnotou tokenu ACS, kterou jste zkopírovali v předchozím cvičení.
- teamsMeetingLinkuseState Nahraďte prázdné uvozovky funkce hodnotou odkazu na schůzku v Teams, kterou jste zkopírovali v předchozím cvičení.
```
// 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>('');
```
Poznámka

Později v tomto kurzu se dozvíte, jak dynamicky načítat userIdhodnoty , tokena teamsMeetingLink .
Prohlédněte si useMemo funkce v komponentě App .
- Jakmile credentialuseMemo má token hodnotu, funkce vytvoří novou AzureCommunicationTokenCredential instanci.
- Funkce callAdapterArgsuseMemo vrátí objekt, který má argumenty, které se používají k volání zvuku nebo videohovoru. Všimněte si, že se v argumentech userIdvolání služby ACS používají hodnoty , credentiala teamsMeetingLink .
```
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]);
```
Poznámka

useMemo v tomto scénáři se používá, protože chceme AzureCommunicationTokenCredential , aby objekt a args adaptéru volání byly vytvořeny pouze jednou, protože jsou předány nezbytné parametry. Další podrobnosti o useMemo najdete tady.
credentials Jakmile jsou a callAdapterArgs připravené, následující řádek zpracuje vytvoření adaptéru volání služby ACS pomocí useAzureCommunicationCallAdapter React háku poskytovaného službou ACS. Objekt callAdapter se použije později v uživatelském rozhraní, které volá složenou komponentu.
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
Poznámka

Vzhledem k tomuuseAzureCommunicationCallAdapter, že se jedná o React hook, nepřiřazuje hodnotu, callAdapter dokud callAdapterArgs nebude platná.

Dříve jste přiřadili identitu uživatele, token a odkaz na schůzku Teams k hodnotám stavu v komponentě App . Prozatím to funguje dobře, ale v pozdějším cvičení se dozvíte, jak tyto hodnoty dynamicky načíst. Vzhledem k tomu, že jste hodnoty nastavili dříve, zakomentujte kód ve useEffect funkci, jak je znázorněno dále. Až v dalších cvičeních spustíte Azure Functions, znovu se k tomuto kódu vrátíte.

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

    */
}, []);

Vyhledejte následující kód JSX. CallComposite Používá symbol, který jste viděli naimportovat, k vykreslení uživatelského rozhraní používaného k provedení zvukového hovoru nebo videohovoru z aplikace React do schůzky Teams. Dříve callAdapter zkoumaný objekt se předá do jeho adapter vlastnosti, aby se poskytly požadované argumenty.
```
if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}
```
Než budete pokračovat, uložte soubor.
Spuštěním npm start příkazu v okně terminálu spusťte aplikaci. Ujistěte se, že jste příkaz spustili ve složce react .
Po sestavení aplikací by se mělo zobrazit volající uživatelské rozhraní. Povolte výběr mikrofonu a kamery a zahajte hovor. Měli byste vidět, že jste umístěni v čekárně. Pokud se připojíte ke schůzce, kterou jste nastavili dříve v Microsoft Teams, můžete hosta povolit, aby se ke schůzce připojil.
Stisknutím kombinace kláves Ctrl+C aplikaci zastavte. Teď, když jste ji úspěšně spustili, pojďme prozkoumat, jak dynamicky získat identitu a token uživatele služby ACS a automaticky vytvořit schůzku v Microsoft Teams a vrátit adresu URL připojení pomocí Microsoft Graphu.

Dynamické Create schůzky v Microsoft Teams pomocí Microsoft Graphu

37 min zbývá

V tomto cvičení automatizujete proces vytvoření odkazu na schůzku v Microsoft Teams a předání službě ACS pomocí Azure Functions a Microsoft Graphu.

Create schůzka v Teams

Budete muset vytvořit aplikaci Microsoft Entra ID pro ověřování aplikací Démon. V tomto kroku se ověřování zpracuje na pozadí pomocí přihlašovacích údajů aplikace a Microsoft Entra ID aplikace použije oprávnění aplikace k volání microsoftu Graph API. Microsoft Graph se použije k dynamickému vytvoření schůzky v Microsoft Teams a vrácení adresy URL schůzky Teams.
Pomocí následujících kroků vytvořte aplikaci Microsoft Entra ID:
1. Přejděte na Azure Portal a vyberte Microsoft Entra ID.
2. Vyberte kartu Registrace aplikace a pak + Nová registrace.
3. Vyplňte podrobnosti registračního formuláře nové aplikace, jak je znázorněno níže, a vyberte Zaregistrovat:
  - Název: Aplikace ACS Teams Interop
  - Podporované typy účtů: Účty v libovolném adresáři organizace (libovolný adresář Microsoft Entra ID – Víceklient) a osobní účty Microsoft (např. Skype, Xbox)
  - Identifikátor URI přesměrování: Ponechte tento identifikátor prázdný.
4. Po registraci aplikace přejděte na Oprávnění rozhraní API a vyberte + Přidat oprávnění.
5. Vyberte Microsoft Graph a potom oprávnění aplikace.
6. Calendars.ReadWrite Vyberte oprávnění a pak vyberte Přidat.
7. Po přidání oprávnění vyberte Udělit souhlas správce pro <YOUR_ORGANIZATION_NAME>.
8. Přejděte na kartu Certifikáty & tajných kódů , vyberte + Nový tajný klíč klienta a pak vyberte Přidat.
9. Zkopírujte hodnotu tajného klíče do místního souboru. Hodnotu použijete později v tomto cvičení.
10. Přejděte na kartu Přehled a zkopírujte Application (client) ID hodnoty a Directory (tenant) ID do stejného místního souboru, který jste použili v předchozím kroku.

Otevřete soubor samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln v sadě Visual Studio nebo otevřete složku GraphACSFunctions v editoru Visual Studio Code.
Přejděte do GraphACSFunctions projektu a vytvořte local.settings.json soubor s následujícími hodnotami:
```
{
    "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"
    ]
}
```
- Hodnoty , které jste zkopírovali do místního souboru v předchozím cvičení, použijte k aktualizaci TENANT_IDhodnot a CLIENT_SECRETCLIENT_ID.
- Pomocí ID uživatele definujte USER_ID , že chcete vytvořit schůzku v Microsoft Teams.
ID uživatele můžete získat z Azure Portal.
- Přihlaste se pomocí účtu správce vývojářského tenanta Microsoft 365.
- Vyberte Microsoft Entra ID.
- Na bočním panelu přejděte na kartu Uživatelé .
- Search pro své uživatelské jméno a vyberte ho, aby se zobrazily podrobnosti o uživateli.
- V podrobnostech uživatele Object ID představuje User ID. Object ID Zkopírujte hodnotu a použijte ji jako USER_ID hodnotu v local.settings.json.
Poznámka

ACS_CONNECTION_STRING se použije v dalším cvičení, takže ho ještě nemusíte aktualizovat.

Otevřete GraphACSFunctions.sln soubor umístěný ve složce acs-to-teams-meeting/server/csharp a všimněte si, že obsahuje následující balíčky Microsoft Graph a Identity:

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

Přejděte na Program.cs a poznamenejte si následující kód v ConfigureServices metodě:

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

Tento kód vytvoří GraphServiceClient objekt, který lze použít k volání Microsoft Graphu z Azure Functions. Je to singleton a může být vložen do jiných tříd.
Volání Microsoft Graph API můžete provádět s oprávněními pouze pro aplikaci (například Calendars.ReadWrite) předáním ClientSecretCredential hodnoty konstruktoruGraphServiceClient. Tenant IdPoužívá ClientSecretCredential hodnoty a Client IdClient Secret z aplikace Microsoft Entra ID.

Otevřete Služby nebo GraphService.cs.

Chvíli si prohlédněte metodu CreateMeetingEventAsync :

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 a IConfiguration objekty jsou vloženy do konstruktoru a přiřazeny k polím.
Funkce CreateMeetingAsync() publikuje data do rozhraní MICROSOFT Graph Calendar Events API, které dynamicky vytvoří událost v kalendáři uživatele a vrátí adresu URL pro připojení.

Otevřete TeamsMeetingFunctions.cs a chvíli si prohlédněte jeho konstruktor. Položka, GraphServiceClient na kterou jste se podívali dříve, je vložena a přiřazena _graphService k poli.
```
private readonly IGraphService _graphService;

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

Vyhledejte metodu Run :

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

Definuje název HttpTriggerTeamsUrl funkce, kterou lze volat pomocí požadavku HTTP GET.
Volá , _graphService.CreateMeetingAsync()což vytvoří novou událost a vrátí adresu URL spojení.

Spusťte program stisknutím klávesy F5 v sadě Visual Studio nebo výběrem možnosti Ladit –> Spustit ladění z nabídky. Tato akce spustí projekt Azure Functions a zpřístupní ho ACSTokenFunction k volání.

Poznámka

Pokud používáte VS Code, můžete otevřít okno terminálu ve složce GraphACSFunctions a spustit func start. Předpokládá se, že na počítači máte nainstalované nástroje Azure Functions Core Tools.

Otevřete v editoru Visual Studio Code složku projektu samples/acs-to-teams-meeting/server/typescript .
Create soubor local.settings.json s následujícími hodnotami:
```
{
    "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"
    ]
}
```
- Hodnoty , které jste zkopírovali do místního souboru v předchozím cvičení, použijte k aktualizaci TENANT_IDhodnot a CLIENT_SECRETCLIENT_ID.
- Pomocí ID uživatele definujte USER_ID , že chcete vytvořit schůzku v Microsoft Teams.
ID uživatele můžete získat z Azure Portal.
- Přihlaste se pomocí účtu správce vývojářského tenanta Microsoft 365.
- Vyberte Microsoft Entra ID.
- Na bočním panelu přejděte na kartu Uživatelé .
- Search pro své uživatelské jméno a vyberte ho, aby se zobrazily podrobnosti o uživateli.
- V podrobnostech uživatele Object ID představuje User ID. Object ID Zkopírujte hodnotu a použijte ji jako USER_ID hodnotu v local.settings.json.
Poznámka

ACS_CONNECTION_STRING se použije v dalším cvičení, takže ho ještě nemusíte aktualizovat.
Otevřete soubor package.json v editoru VS Code a všimněte si, že jsou zahrnuty následující balíčky Microsoft Graph a Identity:
```
@azure/communication-identity
@azure/identity
@microsoft/microsoft-graph-client
```
Otevřete okno terminálu ve složce typescriptu a spuštěním npm install příkazu nainstalujte závislosti aplikace.
Otevřete Sdílené/graph.ts a chvíli si prohlédněte importy v horní části souboru. Tento kód zpracovává import ověřovacích a klientských symbolů, které se používají ve funkci Azure Functions k volání Microsoft Graphu.
```
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

Uvidíte také importy z dateTimeFormat.ts , které se použijí později v tomto cvičení. startDateTimeAsync a endDateTimeAsync se používají při vytváření odkazu na schůzku v Microsoft Teams k definování počátečního a koncového data schůzky.
Zkuste chvíli prozkoumat clientSecretCredential a appGraphClient. Použijí se později v procesu ověřování a při volání Graph API Microsoftu:
```
let clientSecretCredential;
let appGraphClient;
```

ensureGraphForAppOnlyAuth Vyhledejte funkci:

ClientSecretCredentialTenant Idpoužívá hodnoty a Client IdClient Secret z aplikace Microsoft Entra ID.
Objekt authProvider je definovaný jako Microsoft Entra ID aplikace, která se bude ověřovat na pozadí a používat oprávnění jenom pro aplikaci (například Calendars.ReadWrite) k volání microsoftu Graph API.

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

Chvíli se podívejte na createNewMeetingAsync funkci. Publikuje data do rozhraní MICROSOFT Graph Calendar Events API, které dynamicky vytvoří událost v kalendáři uživatele a vrátí podrobnosti o nové události:

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;

Přejděte na server/typescript/src/functions/httpTriggerTeamsUrl.ts a prozkoumejte funkci Http Trigger :

createNewMeetingAsync se importuje z graph.ts. Zpracovává vytváření a načítání podrobností o nové události.
userId se načte z local.settings.json uvnitř funkce Http Trigger. Toto načtení se provádí přístupem k USER_ID proměnné prostředí pomocí .process.env.USER_ID
Při aktivaci funkce zavolá createNewMeetingAsync s definovaným ID uživatele a vrátí podrobnosti o nové události v teamMeetingLink parametru.
Funkce přistupuje k adrese URL připojení ke schůzce Teams voláním meeting.onlineMeeting.joinUrl a vrátí hodnotu v textu odpovědi.

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;

Spuštěním okna npm start terminálu ve složce samples/acs-video-to-teams-meeting/server/typescript spusťte funkci místně.

Volání funkce Azure Functions z React

Teď, když httpTriggerTeamsUrl je funkce připravená k použití, zavoláme ji z aplikace React.
Rozbalte složku klient/react .
Přidejte do složky soubor .env s následujícími hodnotami:
```
REACT_APP_TEAMS_MEETING_FUNCTION=http://localhost:7071/api/httpTriggerTeamsUrl
REACT_APP_ACS_USER_FUNCTION=http://localhost:7071/api/httpTriggerAcsToken
```
Tyto hodnoty se při sestavování předávají do React, abyste je mohli během procesu sestavování snadno měnit podle potřeby.
Otevřete soubor client/react/App.tsx ve VS Code.
Vyhledejte proměnnou teamsMeetingLink stavu v komponentě. Odeberte pevně zakódovaný odkaz teams a nahraďte ho prázdnými uvozovkami:
```
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```

useEffect Vyhledejte funkci a změňte ji tak, aby vypadala takto. Tím se zpracuje volání funkce Azure Functions, na kterou jste se podívali dříve, která vytvoří schůzku Teams a vrátí odkaz pro připojení ke schůzce:

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

}, []);

Než budete pokračovat, uložte soubor.
Otevřete okno terminálu do cd složky *react a spuštěním příkazu npm start sestavte a spusťte aplikaci.
Po sestavení a načtení aplikace by se mělo zobrazit uživatelské rozhraní volání služby ACS a pak můžete volat do schůzky Teams, kterou dynamicky vytvořil Microsoft Graph.
Ukončete terminálový proces tak, že v okně terminálu zadáte ctrl + C .
Zastavte projekt Azure Functions.

Poznámka

Další informace o dalším rozšíření schůzek v Microsoft Teams najdete v dokumentaci k Azure Communication Services.

Dynamické Create identity a tokenu Azure Communication Services

27 min zbývá

V tomto cvičení se dozvíte, jak dynamicky načítat identitu uživatele a hodnoty tokenů z Azure Communication Services pomocí Azure Functions. Po načtení se hodnoty předají do složeného uživatelského rozhraní služby ACS, aby bylo možné provést volání zákazníkem.

Create identita a token služby ACS

C#
TypeScript

Otevřete local.settings.json a aktualizujte ACS_CONNECTION_STRING hodnotu pomocí připojovací řetězec služby ACS, které jste uložili v předchozím cvičení.

Otevřete Startup.cs v sadě Visual Studio a prozkoumejte druhé AddSingleton() volání v ConfigureServices() metodě.

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

Volání AddSingleton() vytvoří CommunicationIdentityClient objekt pomocí ACS_CONNECTION_STRING hodnoty z local.settings.json.
Otevřete ACSTokenFunction.cs a vyhledejte konstruktor a definice polí.
- Je definováno pole s názvem Scopes , které zahrnuje CommunicationTokenScope.VoIP obor. Tento obor slouží k vytvoření přístupového tokenu pro videohovor.
```
private static readonly CommunicationTokenScope[] Scopes =
[
    CommunicationTokenScope.VoIP,
];
```
- Jednoúčelová CommunicationIdentityClient instance vytvořená v Startup.cs se vloží do konstruktoru a přiřadí se k _tokenClient poli.
```
private readonly CommunicationIdentityClient _tokenClient;

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

Prozkoumejte metodu Run() v 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;
}

Definuje funkci s názvem, která HttpTriggerAcsToken se dá volat pomocí požadavku HTTP GET.
Nový uživatel služby ACS se vytvoří voláním _tokenClient.CreateUserAsync() metody .
Přístupový token používaný pro videohovory se vytvoří voláním _tokenClient. GetTokenAsync() metody .
ID uživatele a token se vrátí z funkce jako objekt JSON.

Spusťte program stisknutím klávesy F5 v sadě Visual Studio nebo výběrem možnosti Ladit –> Spustit ladění z nabídky. Tím se spustí projekt Azure Functions a zpřístupní ACSTokenFunction se k volání.

Poznámka

Pokud používáte VS Code, můžete otevřít okno terminálu ve složce GraphACSFunctions a spustit func start. Předpokládá se, že na počítači máte nainstalované nástroje Azure Functions Core Tools.
Teď, když jsou Azure Functions spuštěné místně, musí být klient schopný je volat, aby získal identitu uživatele ACS a hodnoty tokenu.
V editoru otevřete soubor samples/acs-to-teams-meeting/client/react/App.tsx .
userId Vyhledejte proměnné stavu a token v komponentě. Odeberte pevně zakódované hodnoty a nahraďte je prázdnými uvozovkami:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

useEffect Vyhledejte funkci a změňte ji tak, aby vypadala takto, aby bylo možné volání funkce Azure Functions načíst identitu a token uživatele služby ACS:

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

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

}, []);

Než budete pokračovat, uložte soubor.
Otevřete okno terminálu a spusťte npm start ji ve react složce. Po sestavení a načtení by se mělo zobrazit uživatelské rozhraní volání služby ACS a můžete volat do schůzky Teams, kterou dynamicky vytvořil Microsoft Graph.
Zastavte aplikaci React stisknutím kláves Ctrl + C v okně terminálu.
Zastavte projekt Azure Functions.
Potvrďte změny Gitu a nasdílejte je do úložiště GitHub pomocí editoru Visual Studio Code:
- Vyberte ikonu Správa zdrojového kódu (třetí na panelu nástrojů Editoru Visual Studio Code).
- Zadejte zprávu o potvrzení a vyberte Potvrdit.
- Vyberte Synchronizovat změny.

Otevřete local.settings.json a aktualizujte ACS_CONNECTION_STRING hodnotu pomocí připojovací řetězec služby ACS, které jste uložili v předchozím cvičení.

Otevřete server/typescript/src/functions/httpTriggerAcsToken.ts v editoru Visual Studio Code. Má následující kód:

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;

Funkce provádí následující úlohy:
- Importy CommunicationIdentityClient , které se použijí k vytvoření identity a tokenu uživatele.
```
import { CommunicationIdentityClient } from '@azure/communication-identity';
```
- Získá připojovací řetězec služby ACS z proměnné prostředí s názvem ACS_CONNECTION_STRING.
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
Poznámka

Jedná se o hodnotu připojovací řetězec, kterou jste do souboru local.settings.json přidali dříve.
- Vytvoří novou CommunicationIdentityClient instanci a předá jí připojovací řetězec služby ACS.
```
let tokenClient = new CommunicationIdentityClient(connectionString);
```
- Vytvoří uživatele služby ACS a získá token VOICE OVER IP.
```
const user = await tokenClient.createUser();
const userToken = await tokenClient.getToken(user, ["voip"]);
```
- Odešle hodnoty userId a tokenu zpět volajícímu.
```
return {
    jsonBody: { userId: user.communicationUserId, ...userToken }
};
```
V okně terminálu přejděte do složky server/typescript a spusťte npm startpříkaz .
Teď, když jsou Azure Functions spuštěné místně, musí být klient schopný je volat, aby získal identitu uživatele ACS a hodnoty tokenu.
Otevřete soubor client/react/App.tsx v editoru.
userId Vyhledejte proměnné stavu a token v komponentě. Odeberte pevně zakódované hodnoty a nahraďte je prázdnými uvozovkami:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

useEffect Vyhledejte funkci a změňte ji tak, aby vypadala takto, aby bylo možné volání funkce Azure Functions načíst identitu a token uživatele služby ACS:

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

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

}, []);

Než budete pokračovat, uložte soubor.
Otevřete samostatný terminál a spusťte npm start příkaz ve složce React . Po sestavení a načtení by se mělo zobrazit uživatelské rozhraní volání služby ACS a můžete volat do schůzky Teams, kterou dynamicky vytvořil Microsoft Graph.
Zastavte oba terminálové procesy (React a Azure Functions) stisknutím ctrl + C.
Potvrďte změny Gitu a nasdílejte je do úložiště GitHub pomocí editoru Visual Studio Code:
- Vyberte ikonu Správa zdrojového kódu (třetí na panelu nástrojů Editoru Visual Studio Code).
- Zadejte zprávu o potvrzení a vyberte Potvrdit.
- Vyberte Synchronizovat změny.

Nasazení aplikace do Azure Functions a Azure Container Apps

17 min zbývá

Důležité

Kromě požadavků uvedených v tomto kurzu budete muset na počítač nainstalovat také následující nástroje, abyste mohli toto cvičení dokončit.

Azure CLI
Pokud používáte VS Code, nainstalujte rozšíření Azure Functions.

V tomto cvičení se dozvíte, jak nasadit funkce Microsoft Graphu a ACS probírané v předchozích cvičeních, abyste Azure Functions. Vytvoříte také image kontejneru a nasadíte ji do Azure Container Apps.

Azure Container Apps

Nasazení do Azure Functions

C#
TypeScript

Poznámka

Tato část pomocí sady Visual Studio publikuje funkce jazyka C# do Azure. Pokud chcete raději používat Visual Studio Code, můžete postupovat podle pokynů v rychlém startu Create funkce jazyka C# v Azure pomocí editoru Visual Studio Code.

Otevřete projekt v samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln sadě Visual Studio.
Klikněte pravým tlačítkem na GraphACSFunctions projekt a vyberte Publikovat.
V cílové části vyberte Azure a pak klikněte na Další.
Vyberte Azure Function App (Windows) a pak klikněte na Další.
Vyberte své předplatné a pak vyberte + Create Nové.
Zadejte následující informace:
- Název funkce: Vyžaduje se globálně jedinečný název. Příklad: YOUR_LAST_NAME> acsFunctions<.
- Předplatné: Vyberte své předplatné.
- Skupina prostředků: Vyberte skupinu prostředků, kterou jste vytvořili dříve v tomto kurzu, nebo můžete vytvořit novou.
- Plán hostování: Plán Consumption.
- Umístění: Vyberte oblast, do které chcete nasazení provést.
- Azure Storage: Create novou. (Můžete také vybrat existující účet úložiště.)
- Azure Insights: Create nový. (Můžete také vybrat existující účet úložiště.)
Poznámka

Vyžaduje se globálně jedinečný název. Pokud chcete, aby byl název jedinečný, přidejte na konec jména číslo nebo příjmení.
Po vytvoření aplikace Azure Function App se zobrazí potvrzovací obrazovka. Ujistěte se, že je vybraná možnost Spustit z balíčku , a pak vyberte Dokončit.
Vyberte Publikovat a nasaďte funkci do Azure.
Po nasazení funkce do Azure přejděte na Azure Portal a vyberte aplikaci Function App, kterou jste vytvořili.
Zkopírujte adresu URL funkce, kterou jste nasadili. Hodnotu použijete později v tomto cvičení.
V nabídce vlevo vyberte Nastavení –> Konfigurace .
Vyberte tlačítko + Nové nastavení aplikace a do nastavení aplikace přidejte následující klíče a hodnoty. Tyto hodnoty můžete znovu získat z local.settings.json v GraphACSFunctions projektu.
```
# 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>
```
Výběrem tlačítka Uložit uložte nastavení.
Nakonec musíte pro aplikaci funkcí povolit CORS (Sdílení prostředků mezi zdroji), aby byla rozhraní API aplikace funkcí přístupná mimo vaši doménu. V nabídce vlevo vyberte Nastavení –> CORS .
Do textového pole Allowed Origins (Povolené původy) zadejte * (přístupné ze všech domén) a pak vyberte tlačítko Uložit.

Začněme nasazením kódu funkcí do Azure Functions pomocí nástroje VS Code.

Otevřete složku projektu server/typescript .
V kořenovém adresáři projektu byste už měli mít spuštěnou npm install složku node_modules . Pokud ne, otevřete příkazové okno a spuštěním příkazu npm install nainstalujte závislosti.
Otevřete paletu příkazů VS Code (Shift+Cmd+P na Macu | Shift+Ctrl+P ve Windows) a vyberte Azure Functions: Create Function App v Azure.

Poznámka

Pokud tuto možnost nevidíte, ujistěte se, že máte v nástroji VS Code nainstalované rozšíření Azure Functions.
Zobrazí se výzva k zadání následujících informací:
- Název vašeho předplatného Azure.
- Název funkce: acsFunctions<YOUR_LAST_NAME>.
Poznámka

Vyžaduje se globálně jedinečný název. Pokud chcete, aby byl název jedinečný, přidejte na konec jména číslo nebo příjmení.
- Zásobník modulu runtime – Vyberte nejnovější verziNode.js LTS .
- Oblast (vyberte libovolnou oblast, kterou chcete).
Po vytvoření aplikace Azure Function App se zobrazí zpráva o zobrazení podrobností.
Zpět na paletu příkazů v editoru VS Code a vyberte Azure Functions: Deploy to Function App (Nasadit do aplikace funkcí). Zobrazí se výzva k výběru předplatného a názvu aplikace funkcí, kterou jste vytvořili dříve.
Po nasazení funkce do Azure udělejte toto:
- Vyberte rozšíření Azure ve VS Code (klikněte na ikonu Azure na bočním panelu).
- Rozbalte své předplatné.
- Rozbalte svou aplikaci Function App.
- Klikněte pravým tlačítkem na funkci a vyberte Procházet web. Než budete pokračovat, ujistěte se, že aplikace funkcí funguje správně.
Zkopírujte doménu funkce Azure Functions do místního souboru. Hodnotu použijete později v tomto cvičení.

Nasazení do Azure Container Apps

První úkol, který provedete, je vytvoření nového prostředku Azure Container Registry (ACR). Po vytvoření registru vytvoříte image a nahrajete ji do registru.
Otevřete příkazové okno a spuštěním následujícího příkazu se přihlaste ke svému předplatnému Azure:
```
az login
```

Podle potřeby přidejte následující proměnné prostředí, které nahraďí vaše hodnoty zástupnými symboly. <Přidejte GITHUB_USERNAME> jako hodnotu malými písmeny a nahraďte AZURE_FUNCTIONS_DOMAIN Azure Functions doménou <> (do hodnoty domény zahrňte https:// ).

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

Create nový prostředek Azure Container Registry spuštěním následujícího příkazu:

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

Otevřete soubor client/react/Dockerfile v editoru a všimněte si, že se provádějí následující úlohy:
- Aplikace React je sestavená a přiřazená do fáze sestavení.
- Server nginx je nakonfigurovaný a výstup fáze sestavení se zkopíruje do image serveru nginx.

Sestavte image kontejneru v Azure spuštěním následujícího příkazu z kořenového adresáře složky client/react . Nahraďte< YOUR_FUNCTIONS_DOMAIN> doménou Azure Functions, kterou jste dříve v tomto cvičení zkopírovali do místního souboru.

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 .

Spuštěním následujícího příkazu zobrazte seznam imagí v registru. Měla by se zobrazit nová image.
```
az acr repository list --name $ACR_NAME --output table
```
Teď, když je image nasazená, musíte vytvořit aplikaci Azure Container App, která kontejner dokáže spustit.
Přejděte na Azure Portal v prohlížeči a přihlaste se.
Do horního panelu hledání zadejte container apps a ze zobrazených možností vyberte Aplikace kontejneru .
Na panelu nástrojů vyberte Create.

Poznámka

I když používáte Azure Portal, můžete aplikaci kontejneru vytvořit také pomocí Azure CLI. Další informace najdete v tématu Rychlý start: Nasazení první aplikace kontejneru. Na konci tohoto cvičení uvidíte také příklad použití Azure CLI.
Proveďte následující úlohy:
- Vyberte své předplatné.
- Vyberte skupinu prostředků, kterou chcete použít (v případě potřeby vytvořte novou). Pokud chcete, můžete použít stejnou skupinu prostředků, kterou jste použili pro prostředek služby ACS. Zkopírujte název skupiny prostředků do stejného místního souboru, do kterého jste uložili Azure Functions doménu.
- Zadejte název aplikace kontejneru acs-to-teams-meeting.
- Vyberte oblast.
- V části Prostředí container apps vyberte Create nový.
- Zadejte název prostředíacs-to-teams-meeting-env.
- Vyberte tlačítko Vytvořit.
- Vyberte Další: Nastavení >aplikace .
Na obrazovce Create Container App zadejte následující hodnoty:
- Zrušte zaškrtnutí políčka Použít obrázek rychlého startu .
- Název: acs-to-teams-meeting
- Zdroj obrázku: Azure Container Registry
- Registr: <YOUR_ACR_REGISTRY_NAME.azurecr.io>
- Obrázek: acs-to-teams-meeting
- Značka obrázku: nejnovější
- PROCESOR a paměť: 0,25 jader procesoru, paměť -.5 Gi
V části Nastavení příchozího přenosu dat aplikace proveďte následující kroky:
- Zaškrtněte políčko Povoleno .
- Vyberte přepínač Accepting traffic from anywhere (Příjem provozu odkudkoli).
Tím se vytvoří vstupní bod (příchozí přenos dat) pro vaši aplikaci React a umožníte ji volat odkudkoli. Azure Container Apps přesměruje veškerý provoz na HTTPS.
- Cílový port: 80

Vyberte Zkontrolovat a vytvořit. Po ověření vyberte tlačítko Create.

Pokud se zobrazí chyba, může to být způsobeno tím, že prostředí aplikací kontejneru je neaktivní příliš dlouho. Nejjednodušším řešením bude projít procesem opětovného vytvoření aplikace kontejneru. Alternativně můžete spuštěním následujícího příkazu vytvořit aplikaci kontejneru pomocí 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

Jakmile se nasazení aplikace kontejneru dokončí, přejděte na ni v Azure Portal a vyberte adresu URL aplikace na obrazovce Přehled. Zobrazí se aplikace spuštěná v kontejneru nginx.

Share via

Hlasové hovory a videohovory z vlastní aplikace do schůzky v Teams

Co v tomto kurzu vytvoříte

Přehled aplikačního řešení

Požadavky

Mezi technologie použité v tomto kurzu patří:

Create prostředku Azure Communication Services

Integrace volání Azure Communication Services do aplikace React

Dynamické Create schůzky v Microsoft Teams pomocí Microsoft Graphu

Vytvoření souboru local.settings.json

Volání funkce Azure Functions z React

Dynamické Create identity a tokenu Azure Communication Services

Nasazení aplikace do Azure Functions a Azure Container Apps

Nasazení do Azure Functions

Nasazení do Azure Container Apps

Gratulujeme!

Dokončili jste tento kurz.

Váš názor