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

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

Úroveň: Zprostředkující

V tomto kurzu se dozvíte, jak se dá služba Azure Communication Services použít ve vlastní aplikaci React, která uživateli umožní volat na schůzku Microsoft Teams pomocí zvukového hovoru nebo videohovoru. Dozvíte se o různých stavebních blocích, které je možné použít k tomu, aby tento scénář bylo možné, a poskytnete vám praktické kroky, které vás provedou různými zahrnutými cloudovými službami Microsoftu.

Co vytvoříte v tomto kurzu

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

Řešení zvuku a videa ACS

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
Tenant pro vývojáře Microsoftu 365
Účet GitHub
Visual Studio , pokud používáte verzi jazyka C# kurzu. Visual Studio Code se dá použít také v případě, že je to upřednostňované.

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

React
Azure Communication Services
Azure Functions
Microsoft Graph
Microsoft Teams

Vytvoření prostředku Azure Communication Services

57 min zbývá

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

ACS na webu Azure Portal

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

Navštivte web 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 z možností, které se zobrazí, vyberte Komunikační služby.
Na panelu nástrojů vyberte Vytvořit .
Proveďte následující úlohy:
- Vyberte své předplatné Azure.
- Vyberte skupinu prostředků, která se má použít (pokud neexistuje, vytvořte novou).
- Zadejte název prostředku služby ACS. Musí se jednat o jedinečnou hodnotu.
- Vyberte umístění dat.
Vyberte Zkontrolovat a vytvořit a pak vytvořit.
Po vytvoření prostředku služby ACS na něj přejděte a vyberte Nastavení –> Identity a přístupové tokeny uživatele.
Zaškrtněte políčko Hlasové hovory a videohovory (VOIP ).
Vyberte Generovat.
Zkopírujte hodnoty tokenu Identity a User Access 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 hodnoty identity uživatele a tokenu.
Ke spuštění aplikace budete potřebovat odkaz na schůzku Teams. Přejděte do Microsoft Teams, přihlaste se pomocí svého tenanta Microsoftu 365 pro vývojáře a vyberte možnost Kalendář na levé straně.

Tip

Pokud momentálně nemáte účet Microsoft 365, můžete se zaregistrovat k předplatnému programu Microsoft 365 Developer Program . Je zdarma po dobu 90 dnů a bude se průběžně obnovovat, dokud ji používáte pro aktivitu vývoje. Pokud máte předplatné Sady Visual Studio Enterprise nebo Professional, oba programy zahrnují bezplatné předplatné microsoftu 365 pro vývojáře, které je aktivní po dobu životnosti předplatného sady Visual Studio.
Vyberte libovolné datum a čas v kalendáři, přidejte název schůzky, pozvěte uživatele z vašeho vývojářského tenanta Microsoftu 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í ve stejném souboru, ve kterém jste uložili identitu uživatele, token a připojovací řetězec služby ACS.
Teď, když je váš prostředek služby ACS nastavený a máte odkaz pro připojení ke schůzce Teams, pojďme aplikaci React zprovoznět.

Integrace služeb Azure Communication Services volání do aplikace React

47 min zbývá

V tomto cvičení přidáte uživatelské rozhraní ACS, které volá složené do aplikace React, aby bylo možné do schůzky Microsoft Teams povolit hlasové hovory nebo videohovory z vlastní aplikace.

ACS v Reactu

Navštivte GitHub a přihlaste se. Pokud ještě nemáte účet GitHubu, můžete si ho vytvořit výběrem možnosti Registrace .
Navštivte úložiště Microsoft Cloud Na GitHubu.
Vyberte možnost Fork a 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 počítače. Nahraďte <YOUR_ORG_NAME> názvem 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 klienta nebo react.
Otevřete soubor package.json v editoru VS Code a všimněte si, že jsou zahrnuty následující balíčky služby ACS:
```
@azure/communication-common 
@azure/communication-react
```
Zkontrolujte, jestli máte nainstalovaný npm 10 nebo vyšší, a to otevřením okna terminálu a spuštěním následujícího příkazu:
```
npm --version
```
Tip

Pokud nemáte nainstalovaný npm 10 nebo vyšší, můžete npm aktualizovat na nejnovější verzi spuštěním npm install -g npm.
Otevřete okno terminálu a spusťte npm install příkaz ve složce React a nainstalujte závislosti aplikace.
Otevřete App.tsx a chvíli prozkoumejte importy v horní části souboru. Tyto rutiny zpracovávají import symbolů zabezpečení ACS a zvukových volání a videohovorů, 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:

V tomto cvičení se dozvíte, jak se komponenta CallComposite používá později. Poskytuje základní funkce uživatelského rozhraní pro službu Azure Communication Services, která umožňuje volání zvuku nebo videohovoru z aplikace do schůzky Microsoft Teams.
Vyhledejte komponentu App a proveďte následující úlohy:
- Chvíli se podívejte na useState definice v komponentě.
- userId useState Prázdné uvozovky funkce nahraďte hodnotou identity uživatele služby ACS, kterou jste zkopírovali v předchozím cvičení.
- token useState Prázdné uvozovky funkce nahraďte hodnotou tokenu ACS, kterou jste zkopírovali v předchozím cvičení.
- teamsMeetingLink useState Prázdné uvozovky funkce nahraďte 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číst userIdtoken, a teamsMeetingLink hodnoty.
Chvíli se seznamte s funkcemi useMemo v komponentě App .
- Funkce credential useMemo vytvoří novou AzureCommunicationTokenCredential instanci, jakmile má token hodnotu.
- Funkce callAdapterArgs useMemo vrátí objekt, který má argumenty, které se používají k volání zvuku nebo videohovoru. Všimněte si, že používá userIdhodnotu , credentiala teamsMeetingLink hodnoty v argumentech volání služby ACS.
```
const credential = useMemo(() => {
    if (token) {
        return new AzureCommunicationTokenCredential(token)
    }
    return;
}, [token]);

const callAdapterArgs = useMemo(() => {
    if (userId && credential && displayName && teamsMeetingLink) {
        return {
            userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,
            displayName,
            credential,
            locator: { meetingLink: teamsMeetingLink },
        }
    }
    return {};
}, [userId, credential, displayName, teamsMeetingLink]);
```
Poznámka:

useMemo se používá v tomto scénáři, protože chceme AzureCommunicationTokenCredential , aby se objekt a skupiny adaptérů volání vytvořily pouze jednou, protože jsou předány nezbytné parametry. Další podrobnosti o funkci useMemo najdete tady.
Jakmile jsou a credentials callAdapterArgs jsou připravené, následující řádek zpracovává vytvoření adaptéru volání služby ACS pomocí useAzureCommunicationCallAdapter háku React poskytnutého službou ACS. Objekt callAdapter se použije později v uživatelském rozhraní volající složené součásti.
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
Poznámka:

Protože useAzureCommunicationCallAdapter je háček Reactu, nepřiřazuje hodnotu callAdapter , dokud callAdapterArgs hodnota není platná.

Dříve jste přiřadili identitu uživatele, token a odkaz na schůzku v Teams k hodnotám stavu v komponentě App . To teď funguje správně, ale v pozdějším cvičení uvidíte, jak tyto hodnoty dynamicky načíst. Vzhledem k tomu, že hodnoty nastavíte dříve, zakomentujte kód funkce useEffect , jak je znázorněno dále. Jakmile službu Azure Functions spustíte v dalších cvičeních, znovu se k tomuto kódu připojí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. Používá CallComposite symbol, který jste viděli naimportovaný k vykreslení uživatelského rozhraní použitého k volání zvuku nebo videohovoru z aplikace React do schůzky Teams. Dříve callAdapter prozkoumaný soubor se předá jeho adapter vlastnosti a poskytne požadované argumenty.
```
if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}
```
Před pokračováním soubor uložte.
Spuštěním npm start v okně terminálu spusťte aplikaci. Ujistěte se, že příkaz spustíte 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 do čekací místnosti. Pokud se ke schůzce, kterou jste nastavili dříve v Microsoft Teams, připojíte, můžete hostu povolit, aby schůzku zadal.
Stisknutím kombinace kláves Ctrl+C aplikaci zastavte. Teď, když jste ho úspěšně spustili, se podíváme, 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 pro připojení pomocí Microsoft Graphu.

Dynamické vytvoření 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.

Vytvoření schůzky v Teams

Budete muset vytvořit aplikaci Microsoft Entra ID pro ověřování aplikací démona. V tomto kroku se ověřování zpracuje na pozadí pomocí přihlašovacích údajů aplikace a aplikace Microsoft Entra ID použije oprávnění aplikace k volání rozhraní Microsoft 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.
Následujícím postupem vytvořte aplikaci Microsoft Entra ID:
1. Přejděte na Azure Portal a vyberte Microsoft Entra ID.
2. Vyberte kartu Registrace aplikace a potom + Nová registrace.
3. Vyplňte podrobnosti nového registračního formuláře 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 toto 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 následovaný oprávněními 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 a tajné kódy , vyberte + Nový tajný klíč klienta a pak vyberte Přidat.
9. Zkopírujte hodnotu tajného kódu 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 Directory (tenant) ID do stejného místního souboru, který jste použili v předchozím kroku.

samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln Otevřete 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_IDCLIENT_ID hodnot a CLIENT_SECRET hodnot.
- Definujte USER_ID id uživatele, které chcete vytvořit schůzku v Microsoft Teams.
ID uživatele můžete získat z webu Azure Portal.
- Přihlaste se pomocí svého účtu správce tenanta pro vývojáře Microsoft 365.
- Vyberte Microsoft Entra ID
- Přejděte na kartu Uživatelé na bočním panelu.
- Vyhledejte své uživatelské jméno a vyberte ho, abyste zobrazili podrobnosti o uživateli.
- Uvnitř podrobností Object ID uživatele představuje User ID. Object ID Zkopírujte hodnotu a použijte ji USER_ID pro 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 složku GraphACSFunctions.sln acs-to-teams-meeting/server/csharp a všimněte si, že obsahuje následující balíčky Microsoft Graphu 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 dá se vložit do jiných tříd.
Volání rozhraní Microsoft Graph API s oprávněními jen pro aplikace (například Calendars.ReadWrite) můžete provést předáním ClientSecretCredential hodnoty konstruktoruGraphServiceClient. Client Id Tenant IdPoužívá ClientSecretCredential a Client Secret hodnoty z aplikace Microsoft Entra ID.

Otevřete služby nebo GraphService.cs.

Prozkoumejte metodu CreateMeetingEventAsync na chvíli:

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 se vloží do konstruktoru a přiřadí se 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 připojení.

Otevřete TeamsMeetingFunctions.cs a chvíli se podívejte na konstruktor. Předchozí GraphServiceClient pohled se vloží do pole a přiřadí se k _graphService němu.
```
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.
_graphService.CreateMeetingAsync()Volá , který 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 –> spusťte ladění z nabídky. Tato akce spustí projekt Azure Functions a zpřístupní ACSTokenFunction 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 máte na počítači nainstalované nástroje Azure Functions Core Tools .

Otevřete složku projektu samples/acs-to-teams-meeting/server/typescript v editoru Visual Studio Code.
Vytvořte 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_IDCLIENT_ID hodnot a CLIENT_SECRET hodnot.
- Definujte USER_ID id uživatele, které chcete vytvořit schůzku v Microsoft Teams.
ID uživatele můžete získat z webu Azure Portal.
- Přihlaste se pomocí svého účtu správce tenanta pro vývojáře Microsoft 365.
- Vyberte MICROSOFT Entra ID,
- Přejděte na kartu Uživatelé na bočním panelu.
- Vyhledejte své uživatelské jméno a vyberte ho, abyste zobrazili podrobnosti o uživateli.
- Uvnitř podrobností Object ID uživatele představuje User ID. Object ID Zkopírujte hodnotu a použijte ji USER_ID pro 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 ve 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 spusťte npm install příkaz pro instalaci závislostí aplikace.
Otevřete sdílené /graph.ts a chvíli prozkoumejte importy v horní části souboru. Tento kód zpracovává import ověřovacích symbolů a symbolů klienta, 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žívají později v tomto cvičení. startDateTimeAsync a endDateTimeAsync používají se při vytváření odkazu na schůzku v Microsoft Teams k definování počátečního a koncového data pro schůzku.
Chvíli se podívejte clientSecretCredential a appGraphClient. Použijí se později v procesu ověřování a při volání rozhraní Microsoft Graph API:
```
let clientSecretCredential;
let appGraphClient;
```

ensureGraphForAppOnlyAuth Vyhledejte funkci:

ClientSecretCredentialTenant IdClient Id používá a Client Secret hodnoty z aplikace Microsoft Entra ID.
Objekt authProvider je definován jako aplikace Microsoft Entra ID, která se ověří na pozadí a použije oprávnění jen pro aplikace (například Calendars.ReadWrite) k volání rozhraní Microsoft 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 vytváří událost v kalendáři uživatele a vrací 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 triggeru HTTP:

createNewMeetingAsync je importován z graph.ts. Zpracovává vytváření a načítání podrobností o nové události.
userId je načten z local.settings.json uvnitř funkce Trigger HTTP. Toto načítání se provádí přístupem k USER_ID proměnné prostředí pomocí .process.env.USER_ID
Když se funkce aktivuje, zavolá createNewMeetingAsync s definovaným ID uživatele a vrátí nové podrobnosti události v parametru teamMeetingLink .
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;

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

Volání funkce Azure z Reactu

Teď, když httpTriggerTeamsUrl je funkce připravená k použití, ji zavoláme z aplikace React.
Rozbalte složku klienta nebo react.
Do složky přidejte 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ředají do Reactu při sestavování, abyste je mohli snadno změnit podle potřeby během procesu sestavení.
Ve VS Code otevřete soubor client/react/App.tsx .
Vyhledejte proměnnou teamsMeetingLink stavu v komponentě. Odeberte pevně zakódovaný odkaz na týmy 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 v 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();

}, []);

Před pokračováním soubor uložte.
Otevřete okno terminálu do cd složky *react a spusťte npm start aplikaci.
Po sestavení a načtení aplikace byste měli vidět zobrazené uživatelské rozhraní volání služby ACS a pak můžete zavolat do schůzky Teams, která byla dynamicky vytvořena Microsoft Graphem.
Ukončete proces terminálu zadáním ctrl + C v okně terminálu.
Zastavte projekt Azure Functions.

Poznámka:

Další informace o rozšíření schůzek Microsoft Teams jinými způsoby najdete v dokumentaci ke službě Azure Communication Services.

Dynamické vytvoření identity a tokenu služby Azure Communication Services

27 min zbývá

V tomto cvičení se naučíte dynamicky načítat hodnoty identity uživatele a tokenů z Azure Communication Services pomocí Azure Functions. Po načtení se hodnoty předají složené uživatelskému rozhraní služby ACS, aby bylo možné volat zákazníkem.

Vytvoření identity a tokenu služby ACS

C#
TypeScript

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

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

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 definice konstruktoru a pole.
- Pole s názvem Scopes je definováno, které zahrnuje CommunicationTokenScope.VoIP obor. Tento obor slouží k vytvoření přístupového tokenu pro videohovor.
```
private static readonly CommunicationTokenScope[] Scopes =
[
    CommunicationTokenScope.VoIP,
];
```
- Instance CommunicationIdentityClient singleton 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, kterou HttpTriggerAcsToken lze 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 –> spusťte ladění z nabídky. Tím se spustí projekt Azure Functions a zpřístupní ACSTokenFunction se 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 máte na počítači nainstalované nástroje Azure Functions Core Tools .
Teď, když je služba Azure Functions spuštěná místně, musí být klient schopný do nich volat, aby získal hodnoty identity uživatele a tokenu služby ACS.
V editoru otevřete ukázky/acs-to-teams-meeting/client/react/App.tsx .
userId Vyhledejte proměnné stavu a token proměnné 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 se povolilo volání funkce Azure Functions pro načtení identity a tokenu 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();

}, []);

Před pokračováním soubor uložte.
Otevřete okno terminálu a spusťte npm start ho react ve 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, která byla dynamicky vytvořena Microsoft Graphem.
Ukončete aplikaci React stisknutím 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ávy zdrojového kódu (třetí z nich dolů na panelu nástrojů Visual Studio Code).
- Zadejte zprávu potvrzení a vyberte Potvrdit.
- Vyberte Synchronizovat změny.

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

Otevřete v editoru Visual Studio Code server/typescript/src/functions/httpTriggerAcsToken.ts . 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á ACS připojovací řetězec z proměnné prostředí s názvem ACS_CONNECTION_STRING.
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
Poznámka:

Toto je hodnota připojovací řetězec, kterou jste přidali do souboru local.settings.json dříve.
- Vytvoří novou CommunicationIdentityClient instanci a předá připojovací řetězec služby ACS.
```
let tokenClient = new CommunicationIdentityClient(connectionString);
```
- Vytvoří uživatele služby ACS a získá token IP služby Voice Over.
```
const user = await tokenClient.createUser();
const userToken = await tokenClient.getToken(user, ["voip"]);
```
- Odešle id uživatele a hodnoty 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 start.
Teď, když je služba Azure Functions spuštěná místně, musí být klient schopný do nich volat, aby získal hodnoty identity uživatele a tokenu služby ACS.
V editoru otevřete soubor client/react/App.tsx .
userId Vyhledejte proměnné stavu a token proměnné 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 se povolilo volání funkce Azure Functions pro načtení identity a tokenu 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();

}, []);

Před pokračováním soubor uložte.
Otevřete samostatný terminál a spusťte npm start ho 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, která byla dynamicky vytvořena Microsoft Graphem.
Zastavte oba terminálové procesy (React a Azure Functions) tak, že vyberete Ctrl +C.
Potvrďte změny Gitu a nasdílejte je do úložiště GitHub pomocí editoru Visual Studio Code:
- Vyberte ikonu správy zdrojového kódu (třetí z nich dolů na panelu nástrojů Visual Studio Code).
- Zadejte zprávu 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 pro tento kurz budete také muset na svůj počítač nainstalovat 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 Graph a ACS probírané v předchozích cvičeních do 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 používá Visual Studio k publikování funkcí jazyka C# do Azure. Pokud chcete použít Visual Studio Code, můžete postupovat podle pokynů ve funkci Vytvoření jazyka C# v Azure pomocí rychlého startu editoru Visual Studio Code .

samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln Otevřete projekt v sadě Visual Studio.
Klikněte pravým tlačítkem myši na GraphACSFunctions projekt a vyberte Publikovat.
V cílové části vyberte Azure a pak klikněte na Další.
Vyberte aplikaci funkcí Azure (Windows) a pak klikněte na Další.
Vyberte své předplatné a pak vyberte + Vytvořit nový.
Zadejte následující údaje:
- Název funkce: Vyžaduje se globálně jedinečný název. Příklad: acsFunctions<YOUR_LAST_NAME>.
- Předplatné: Vyberte 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 nasadit.
- Azure Storage: Vytvořte novou. (Můžete také vybrat existující účet úložiště.)
- Azure Insights: Vytvořte nový. (Můžete také vybrat existující účet úložiště.)
Poznámka:

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

Začněme tím, že použijeme VS Code k nasazení kódu funkcí do Azure Functions.

Otevřete složku projektu server/typescript.
Už byste měli spustit npm install složku node_modules v kořenovém adresáři projektu. Pokud ne, otevřete příkazové okno a spusťte npm install instalaci závislostí.
Otevření palety příkazů VS Code (Shift+Cmd+P na Macu | Shift+Ctrl+P ve Windows) a vyberte Azure Functions: Vytvoření aplikace funkcí v Azure.

Poznámka:

Pokud tuto možnost nevidíte, ujistěte se, že máte nainstalované rozšíření Azure Functions ve VS Code.
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. Název můžete nastavit jako jedinečný tak, že na konec jména přidáte číslo nebo příjmení.
- Zásobník modulu runtime – vyberte nejnovější verzi Node.js LTS .
- Oblast (vyberte libovolnou oblast, kterou chcete).
Po vytvoření aplikace Funkcí Azure se zobrazí zpráva o zobrazení podrobností.
Vraťte se do palety příkazů v editoru VS Code a vyberte Azure Functions: 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 postupujte takto:
- Vyberte rozšíření Azure ve VS Code (klikněte na ikonu Azure na bočním panelu).
- Rozbalte své předplatné.
- Rozbalte aplikaci Funkcí.
- 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í úlohou, kterou provedete, je vytvoření nového prostředku služby Azure Container Registry (ACR). Po vytvoření registru vytvoříte image a nasdílíte 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 doménu Azure Functions hodnotou <AZURE_FUNCTIONS_DOMAIN> (zahrňte ji https:// do hodnoty domény).

Udeřit
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>"

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

Udeřit
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 sestavena a přiřazena ke fázi 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é složky klienta nebo react . Nahraďte <YOUR_FUNCTIONS_DOMAIN> doménou Azure Functions, kterou jste zkopírovali do místního souboru dříve v tomto cvičení.

Udeřit
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ěl by se zobrazit nový obrázek.
```
az acr repository list --name $ACR_NAME --output table
```
Teď, když je image nasazená, musíte vytvořit aplikaci kontejneru Azure, která může kontejner spustit.
Navštivte web Azure Portal v prohlížeči a přihlaste se.
Na horním panelu hledání zadejte aplikace typu kontejner a z možností, které se zobrazí, vyberte KontejnerOvé aplikace .
Na panelu nástrojů vyberte Vytvořit .

Poznámka:

I když používáte Azure Portal, můžete aplikaci typu Kontejner vytvořit také pomocí Azure CLI. Další informace najdete v tématu Rychlý start: Nasazení první aplikace typu kontejner. Na konci tohoto cvičení uvidíte příklad použití Azure CLI.
Proveďte následující úlohy:
- Vyberte své předplatné.
- Vyberte skupinu prostředků, která se má 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 doménu Azure Functions.
- Zadejte název aplikace kontejneru schůzky acs-to-teams.
- Vyberte oblast.
- V části Prostředí container Apps vyberte Vytvořit nový.
- Zadejte název prostředí acs-to-teams-meeting-env.
- Vyberte tlačítko Vytvořit.
- Vyberte Další: Nastavení >aplikace .
Na obrazovce Vytvořit aplikaci kontejneru zadejte následující hodnoty:
- Zrušte zaškrtnutí políčka Použít obrázek pro rychlý start.
- Název: acs-to-teams-meeting
- Zdroj image: 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 procesorových jader, -.5 Gi paměť
V části Nastavení příchozího přenosu dat aplikace postupujte takto:
- Zaškrtněte políčko Povoleno.
- Vyberte přepínač Přijmout provoz odkudkoli.
Tím se pro vaši aplikaci React vytvoří vstupní bod (příchozí přenos dat) a umožníte ho volat odkudkoli. Azure Container Apps přesměruje veškerý provoz na HTTPS.
- Cílový port: 80

Vyberte Zkontrolovat a vytvořit. Jakmile ověření projde, vyberte tlačítko Vytvořit .

Pokud se zobrazí chyba, může to být kvůli tomu, že vaše prostředí kontejnerových aplikací je neaktivní na příliš dlouhou dobu. Nejjednodušším řešením bude projít procesem opětovného vytvoření aplikace kontejneru. Případně můžete spuštěním následujícího příkazu vytvořit aplikaci kontejneru pomocí Azure CLI:

Udeřit
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 něj na webu Azure Portal a na obrazovce Přehled vyberte adresu URL aplikace, abyste zobrazili aplikaci spuštěnou v kontejneru nginx.

Sdílet prostřednictvím

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

Co vytvoříte v tomto kurzu

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

Požadavky

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

Vytvoření prostředku Azure Communication Services

Integrace služeb Azure Communication Services volání do aplikace React

Dynamické vytvoření schůzky v Microsoft Teams pomocí Microsoft Graphu

Vytvoření souboru local.settings.json

Volání funkce Azure z Reactu

Dynamické vytvoření identity a tokenu služby 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