Połączenie audio/wideo z aplikacji niestandardowej do spotkania usługi Teams

Artykuł
Developer (Średni)
Czas do ukończenia: 59 min

Poziom: Pośredni

W tym samouczku dowiesz się, jak usługi Azure Communication Services mogą być używane w niestandardowej aplikacji React, aby umożliwić użytkownikowi nawiązywanie połączenia audio/wideo na spotkaniu w usłudze Microsoft Teams. Poznasz różne bloki konstrukcyjne, których można użyć, aby umożliwić ten scenariusz i uzyskać praktyczne instrukcje umożliwiające zapoznanie się z różnymi zaangażowanymi usługami w chmurze firmy Microsoft.

Co utworzysz w tym samouczku

Omówienie rozwiązania aplikacji

Rozwiązanie ACS Audio/Video

Wymagania wstępne

Node LTS — node LTS jest używany dla tego projektu
git
Program Visual Studio Code lub inne wybrane środowisko IDE.
Rozszerzenie usługi Azure Functions dla programu VS Code
Azure Functions Core Tools
Subskrypcja platformy Azure
Dzierżawa deweloperów platformy Microsoft 365
Konto usługi GitHub
Program Visual Studio w przypadku korzystania z wersji języka C# tego samouczka. Program Visual Studio Code można również użyć, jeśli jest to preferowane.

Technologie używane w tym samouczku obejmują

React
Azure Communication Services
Azure Functions
Microsoft Graph
Microsoft Teams

Tworzenie zasobu usług Azure Communication Services

Pozostały czas: 57 min

W tym ćwiczeniu utworzysz zasób usług Azure Communication Services (ACS) w witrynie Azure Portal.

Usługa ACS w witrynie Azure Portal

Aby rozpocząć pracę, wykonaj następujące zadania:

Odwiedź witrynę Azure Portal w przeglądarce i zaloguj się.
Wpisz usługi komunikacyjne na pasku wyszukiwania w górnej części strony i wybierz pozycję Usługi komunikacyjne z wyświetlonych opcji.
Wybierz pozycję Utwórz na pasku narzędzi.
Wykonaj następujące zadania:
- Wybierz subskrypcję platformy Azure.
- Wybierz grupę zasobów do użycia (utwórz nową, jeśli nie istnieje).
- Wprowadź nazwę zasobu USŁUGI ACS. Ta wartość musi być unikatowa.
- Wybierz lokalizację danych.
Wybierz pozycję Przejrzyj i utwórz , a następnie pozycję Utwórz.
Po utworzeniu zasobu usługi ACS przejdź do niego i wybierz pozycję Ustawienia —> tożsamości i tokeny dostępu użytkowników.
Zaznacz pole wyboru Voice and video calling (VOIP).
Wybierz Generuj.
Skopiuj wartości tokenu Identity and User Access do pliku lokalnego. Wartości będą potrzebne w dalszej części tego ćwiczenia.
Wybierz pozycję Ustawienia —> klucze i skopiuj wartość klucz podstawowy parametry połączenia do pliku lokalnego, w którym skopiowano wartości tożsamości użytkownika i tokenu.
Aby uruchomić aplikację, potrzebujesz linku spotkania usługi Teams. Przejdź do usługi Microsoft Teams, zaloguj się przy użyciu dzierżawy deweloperów platformy Microsoft 365 i wybierz opcję Kalendarz po lewej stronie.

Napiwek

Jeśli obecnie nie masz konta platformy Microsoft 365, możesz zarejestrować się w celu uzyskania subskrypcji programu deweloperów platformy Microsoft 365. Jest ona bezpłatna przez 90 dni i będzie stale odnawiana, o ile używasz jej do działań programistycznych. Jeśli masz subskrypcję programu Visual Studio Enterprise lub Professional, oba programy obejmują bezpłatną subskrypcję dla deweloperów platformy Microsoft 365, aktywną na okres życia subskrypcji programu Visual Studio.
Wybierz dowolną datę/godzinę w kalendarzu, dodaj tytuł spotkania, zaproś użytkownika z dzierżawy deweloperów platformy Microsoft 365 i wybierz pozycję Zapisz.
Wybierz nowe spotkanie dodane w kalendarzu i skopiuj link spotkania usługi Teams, który jest wyświetlany w tym samym pliku, w którym zapisano tożsamość użytkownika, token i parametry połączenia usługi ACS.
Teraz, gdy zasób ACS jest skonfigurowany i masz link dołączania do spotkania usługi Teams, pobierzmy aplikację React i uruchomimy.

Integrowanie usług Azure Communication Services wywołujących w aplikacji React

Pozostały czas: 47 min

W tym ćwiczeniu dodasz interfejs użytkownika usługi ACS wywołujący złożony do aplikacji React, aby umożliwić wykonywanie wywołań audio/wideo z aplikacji niestandardowej do spotkania usługi Microsoft Teams.

ACS w rozwiązaniu React

Odwiedź witrynę GitHub i zaloguj się. Jeśli nie masz jeszcze konta usługi GitHub, możesz wybrać opcję Utwórz konto, aby je utworzyć.
Odwiedź repozytorium Microsoft Cloud GitHub.
Wybierz opcję Rozwidlenia, aby dodać repozytorium do żądanej organizacji/konta usługi GitHub.
Uruchom następujące polecenie, aby sklonować to repozytorium na maszynę. Zastąp <YOUR_ORG_NAME> nazwą organizacji/konta usługi GitHub.
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
Otwórz folder projektu samples/acs-to-teams-meeting w programie Visual Studio Code.
Rozwiń folder klient/react.
Otwórz plik package.json w programie VS Code i zwróć uwagę na następujące pakiety ACS:
```
@azure/communication-common 
@azure/communication-react
```
Sprawdź dokładnie, czy masz zainstalowany program npm 10 lub nowszy, otwierając okno terminalu i uruchamiając następujące polecenie:
```
npm --version
```
Napiwek

Jeśli nie masz zainstalowanego narzędzia npm 10 lub nowszego, możesz zaktualizować narzędzie npm do najnowszej wersji, uruchamiając polecenie npm install -g npm.
Otwórz okno terminalu i uruchom npm install polecenie w folderze react , aby zainstalować zależności aplikacji.
Otwórz plik App.tsx i pośmiń chwilę na zapoznanie się z importami w górnej części pliku. Obsługują one importowanie symboli zabezpieczeń usługi ACS i połączeń audio/wideo, które będą używane w aplikacji.
```
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';
```
Uwaga

Zobaczysz, jak CallComposite składnik jest używany w dalszej części tego ćwiczenia. Udostępnia ona podstawowe funkcje interfejsu użytkownika dla usług Azure Communication Services w celu umożliwienia nawiązywania połączenia audio/wideo z aplikacji na spotkaniu w usłudze Microsoft Teams.
App Znajdź składnik i wykonaj następujące zadania:
- Pośmiń chwilę na zbadanie useState definicji w składniku.
- userId useState Zastąp puste cudzysłowy funkcji wartością tożsamości użytkownika usługi ACS skopiowaną w poprzednim ćwiczeniu.
- token useState Zastąp puste cudzysłowy funkcji wartością tokenu ACS skopiowaną w poprzednim ćwiczeniu.
- teamsMeetingLink useState Zastąp puste cudzysłowy funkcji wartością linku spotkania usługi Teams skopiowaną w poprzednim ćwiczeniu.
```
// 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>('');
```
Uwaga

W dalszej części tego samouczka zobaczysz, jak dynamicznie pobierać userIdwartości , tokeni teamsMeetingLink .
Pośmiń chwilę na zapoznanie się z useMemo funkcjami w składniku App .
- Funkcja credential useMemo tworzy nowe AzureCommunicationTokenCredential wystąpienie, gdy token ma wartość.
- Funkcja callAdapterArgs useMemo zwraca obiekt, który zawiera argumenty używane do wywołania audio/wideo. Zwróć uwagę, że używa userIdwartości , credentiali teamsMeetingLink w argumentach wywołań 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]);
```
Uwaga

useMemo Jest używany w tym scenariuszu, ponieważ chcemy AzureCommunicationTokenCredential , aby obiekt i args karty wywołań były tworzone raz, ponieważ wymagane parametry są przekazywane. Zobacz dodatkowe szczegóły dotyczące useMemo tutaj.
credentials Gdy element i callAdapterArgs będzie gotowy, następujący wiersz obsługuje tworzenie karty wywołania ACS przy użyciu haka React dostarczonego useAzureCommunicationCallAdapter przez usługę ACS. Obiekt callAdapter będzie używany później w interfejsie użytkownika wywołującym składnik złożony.
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
Uwaga

Ponieważ useAzureCommunicationCallAdapter jest elementem zaczepienia react, nie przypisze wartości do callAdapter momentu, aż wartość będzie prawidłowa callAdapterArgs .

Wcześniej przypisano tożsamość użytkownika, token i łącze spotkania usługi Teams z wartościami stanu w składniku App . To działa dobrze na razie, ale w późniejszym ćwiczeniu zobaczysz, jak dynamicznie pobierać te wartości. Ponieważ wartości zostały ustawione wcześniej, oznacz jako komentarz kod w useEffect funkcji, jak pokazano poniżej. Po uruchomieniu usługi Azure Functions w następnych ćwiczeniach ponownie przejdziesz do tego kodu.

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

    */
}, []);

Znajdź następujący kod JSX. Używa on symbolu CallComposite zaimportowanego do renderowania interfejsu użytkownika używanego do nawiązywania połączenia audio/wideo z aplikacji React na spotkanie w usłudze Teams. Eksplorowany callAdapter wcześniej element jest przekazywany do jego adapter właściwości, aby podać wymagane argumenty.
```
if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}
```
Zapisz plik przed kontynuowaniem.
Uruchom polecenie npm start w oknie terminalu, aby uruchomić aplikację. Upewnij się, że uruchomisz polecenie w folderze react .
Po utworzeniu aplikacji powinien zostać wyświetlony interfejs użytkownika wywołujący. Włącz wybieranie mikrofonu i kamery i zainicjuj wywołanie. Powinno zostać wyświetlone, że znajdujesz się w poczekalni. Jeśli dołączysz do spotkania skonfigurowanego wcześniej w usłudze Microsoft Teams, możesz zezwolić gościowi na wejście na spotkanie.
Naciśnij Ctrl + C , aby zatrzymać aplikację. Teraz, po pomyślnym uruchomieniu, zobaczmy, jak dynamicznie uzyskać tożsamość użytkownika i token usługi ACS, a następnie automatycznie utworzyć spotkanie w usłudze Microsoft Teams i zwrócić adres URL dołączania przy użyciu programu Microsoft Graph.

Dynamiczne tworzenie spotkania usługi Microsoft Teams przy użyciu programu Microsoft Graph

Pozostały czas: 37 min

W tym ćwiczeniu zautomatyzujesz proces tworzenia linku spotkania usługi Microsoft Teams i przekazywania do usługi ACS przy użyciu usług Azure Functions i Microsoft Graph.

Tworzenie spotkania usługi Teams

Musisz utworzyć aplikację Microsoft Entra ID na potrzeby uwierzytelniania aplikacji demona. W tym kroku uwierzytelnianie będzie obsługiwane w tle przy użyciu poświadczeń aplikacji, a aplikacja Microsoft Entra ID będzie używać uprawnień aplikacji do tworzenia wywołań interfejsu API programu Microsoft Graph. Program Microsoft Graph będzie używany do dynamicznego tworzenia spotkania usługi Microsoft Teams i zwracania adresu URL spotkania usługi Teams.
Wykonaj następujące kroki, aby utworzyć aplikację Microsoft Entra ID:
1. Przejdź do witryny Azure Portal i wybierz pozycję Microsoft Entra ID.
2. Wybierz kartę Rejestracja aplikacji, a następnie pozycję + Nowa rejestracja.
3. Wypełnij szczegóły nowego formularza rejestracji aplikacji, jak pokazano poniżej, a następnie wybierz pozycję Zarejestruj:
  - Nazwa: Aplikacja międzyoperacyjna usługi ACS Teams
  - Obsługiwane typy kont: konta w dowolnym katalogu organizacyjnym (dowolny katalog Microsoft Entra ID — multitenant) i osobiste konta Microsoft (np. Skype, Xbox)
  - Identyfikator URI przekierowania: pozostaw to pole puste
4. Po zarejestrowaniu aplikacji przejdź do pozycji Uprawnienia interfejsu API i wybierz pozycję + Dodaj uprawnienie.
5. Wybierz pozycję Microsoft Graph , a następnie pozycję Uprawnienia aplikacji.
6. Calendars.ReadWrite Wybierz uprawnienie, a następnie wybierz pozycję Dodaj.
7. Po dodaniu uprawnień wybierz pozycję Udziel zgody administratora dla <YOUR_ORGANIZATION_NAME>.
8. Przejdź do karty Certyfikaty i wpisy tajne , wybierz pozycję + Nowy klucz tajny klienta, a następnie wybierz pozycję Dodaj.
9. Skopiuj wartość wpisu tajnego do pliku lokalnego. Użyjesz wartości w dalszej części tego ćwiczenia.
10. Przejdź do karty Przegląd i skopiuj Application (client) ID wartości i Directory (tenant) ID do tego samego pliku lokalnego, który został użyty w poprzednim kroku.

Otwórz folder samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln w programie Visual Studio lub otwórz folder GraphACSFunctions w programie Visual Studio Code.
Przejdź do GraphACSFunctions projektu i utwórz local.settings.json plik z następującymi wartościami:
```
{
    "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"
    ]
}
```
- Użyj wartości skopiowanych do pliku lokalnego we wcześniejszym ćwiczeniu, aby zaktualizować TENANT_IDCLIENT_ID wartości i CLIENT_SECRET .
- Zdefiniuj USER_ID identyfikator użytkownika, który chcesz utworzyć spotkanie w usłudze Microsoft Teams.
Identyfikator użytkownika można pobrać z witryny Azure Portal.
- Zaloguj się przy użyciu konta administratora dzierżawy dewelopera platformy Microsoft 365.
- Wybierz Tożsamość Microsoft Entra
- Przejdź do karty Użytkownicy na pasku bocznym.
- Wyszukaj nazwę użytkownika i wybierz ją, aby wyświetlić szczegóły użytkownika.
- Wewnątrz szczegółów Object ID użytkownika reprezentuje wartość User ID. Object ID Skopiuj wartość i użyj jej jako USER_ID wartości w local.settings.json.
Uwaga

ACS_CONNECTION_STRING zostanie użyty w następnym ćwiczeniu, aby nie trzeba było go jeszcze aktualizować.

Otwórz GraphACSFunctions.sln plik znajdujący się w folderze acs-to-teams-meeting/server/csharp i pamiętaj, że zawiera on następujące pakiety programu Microsoft Graph i tożsamości:

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

Przejdź do Program.cs i zanotuj następujący kod w metodzie ConfigureServices :

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

Ten kod tworzy GraphServiceClient obiekt, który może służyć do wywoływania programu Microsoft Graph z usługi Azure Functions. Jest to pojedynczy i może być wstrzykiwany do innych klas.
Wywołania interfejsu API programu Microsoft Graph można wykonywać przy użyciu uprawnień tylko do aplikacji (takich jak Calendars.ReadWrite), przekazując ClientSecretCredential wartość do konstruktora GraphServiceClient . Funkcja ClientSecretCredential używa Tenant IdClient Id wartości i z Client Secret aplikacji Microsoft Entra ID.

Otwórz pozycję Usługi/GraphService.cs.

Pośmiń chwilę na zapoznanie się z CreateMeetingEventAsync metodą:

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 obiekty i IConfiguration są wstrzykiwane do konstruktora i przypisywane do pól.
Funkcja CreateMeetingAsync() publikuje dane w interfejsie API zdarzeń kalendarza programu Microsoft Graph, który dynamicznie tworzy zdarzenie w kalendarzu użytkownika i zwraca adres URL sprzężenia.

Otwórz TeamsMeetingFunctions.cs i pośmiń chwilę na sprawdzenie konstruktora. Popatrzony GraphServiceClient wcześniej jest wstrzykiwany i przypisywany do _graphService pola.
```
private readonly IGraphService _graphService;

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

Znajdź metodę 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;
}

Definiuje ona nazwę HttpTriggerTeamsUrl funkcji, którą można wywołać za pomocą żądania HTTP GET.
Wywołuje _graphService.CreateMeetingAsync()metodę , która tworzy nowe zdarzenie i zwraca adres URL sprzężenia.

Uruchom program, naciskając F5 w programie Visual Studio lub wybierając pozycję Debuguj —> Rozpocznij debugowanie z menu. Ta akcja powoduje uruchomienie projektu usługi Azure Functions i udostępnienie ACSTokenFunction go do wywołania.

Uwaga

Jeśli używasz programu VS Code, możesz otworzyć okno terminalu w folderze GraphACSFunctions i uruchomić polecenie func start. Przyjęto założenie, że na maszynie zainstalowano narzędzia Azure Functions Core Tools .

Otwórz folder projektu samples/acs-to-teams-meeting/server/typescript w programie Visual Studio Code.
Utwórz plik local.settings.json z następującymi wartościami:
```
{
    "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"
    ]
}
```
- Użyj wartości skopiowanych do pliku lokalnego we wcześniejszym ćwiczeniu, aby zaktualizować TENANT_IDCLIENT_ID wartości i CLIENT_SECRET .
- Zdefiniuj USER_ID identyfikator użytkownika, który chcesz utworzyć spotkanie w usłudze Microsoft Teams.
Identyfikator użytkownika można pobrać z witryny Azure Portal.
- Zaloguj się przy użyciu konta administratora dzierżawy dewelopera platformy Microsoft 365.
- Wybierz pozycję Microsoft Entra ID,
- Przejdź do karty Użytkownicy na pasku bocznym.
- Wyszukaj nazwę użytkownika i wybierz ją, aby wyświetlić szczegóły użytkownika.
- Wewnątrz szczegółów Object ID użytkownika reprezentuje wartość User ID. Object ID Skopiuj wartość i użyj jej jako USER_ID wartości w local.settings.json.
Uwaga

ACS_CONNECTION_STRING zostanie użyty w następnym ćwiczeniu, aby nie trzeba było go jeszcze aktualizować.
Otwórz plik package.json w programie VS Code i zwróć uwagę, że uwzględniono następujące pakiety programu Microsoft Graph i tożsamości:
```
@azure/communication-identity
@azure/identity
@microsoft/microsoft-graph-client
```
Otwórz okno terminalu w folderze typescript i uruchom npm install polecenie , aby zainstalować zależności aplikacji.
Otwórz plik Shared/graph.ts i pośmiń chwilę na zapoznanie się z importami w górnej części pliku. Ten kod obsługuje importowanie symboli uwierzytelniania i klienta, które są używane w funkcji platformy Azure do wywoływania programu Microsoft Graph.
```
import { startDateTimeAsync, endDateTimeAsync } from './dateTimeFormat';
import { ClientSecretCredential } from '@azure/identity';
import { Client } from '@microsoft/microsoft-graph-client';
import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
import 'isomorphic-fetch';
```
Napiwek

W dalszej części tego ćwiczenia zobaczysz również importy z dateTimeFormat.ts , które są używane w dalszej części tego ćwiczenia. startDateTimeAsync i endDateTimeAsync są używane podczas tworzenia linku spotkania usługi Microsoft Teams, aby zdefiniować datę rozpoczęcia i datę zakończenia spotkania.
Pośmiń chwilę na zbadanie clientSecretCredential i appGraphClient. Będą one używane w dalszej części procesu uwierzytelniania i podczas wywoływania interfejsu API programu Microsoft Graph:
```
let clientSecretCredential;
let appGraphClient;
```

ensureGraphForAppOnlyAuth Znajdź funkcję:

ClientSecretCredentialTenant IdClient Id używa wartości i Client Secret z aplikacji Microsoft Entra ID.
Obiekt authProvider jest definiowany jako aplikacja Microsoft Entra ID, która będzie uwierzytelniać się w tle i używać uprawnień tylko do aplikacji (takich jak Calendars.ReadWrite) do tworzenia wywołań interfejsu API programu Microsoft Graph.

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

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

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

Pośmiń chwilę na zapoznanie się z funkcją createNewMeetingAsync . Publikuje dane w interfejsie API zdarzeń kalendarza programu Microsoft Graph, który dynamicznie tworzy zdarzenie w kalendarzu użytkownika i zwraca nowe szczegóły zdarzenia:

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;

Przejdź do pozycji server/typescript/src/functions/httpTriggerTeamsUrl.ts i zapoznaj się z funkcją Wyzwalacz HTTP:

createNewMeetingAsync jest importowany z graph.ts. Obsługuje tworzenie i pobieranie nowych szczegółów zdarzenia.
userId jest pobierany z local.settings.json wewnątrz funkcji Wyzwalacz HTTP. To pobieranie odbywa się przez uzyskanie dostępu do zmiennej środowiskowej USER_ID przy użyciu polecenia process.env.USER_ID.
Po wyzwoleniu funkcji wywołuje createNewMeetingAsync zdefiniowany identyfikator użytkownika i zwraca nowe szczegóły zdarzenia w teamMeetingLink parametrze .
Funkcja uzyskuje dostęp do adresu URL dołączania do spotkania usługi Teams przez wywołanie meeting.onlineMeeting.joinUrl metody i zwraca wartość w treści odpowiedzi.

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;

Użyj okna terminalu, aby uruchomić npm start polecenie w folderze samples/acs-video-to-teams-meeting/server/typescript , aby uruchomić funkcję lokalnie.

Wywoływanie funkcji platformy Azure z platformy React

Teraz, gdy httpTriggerTeamsUrl funkcja jest gotowa do użycia, wywołajmy ją z aplikacji React.
Rozwiń folder klient/react.
Dodaj plik env do folderu z następującymi wartościami:
```
REACT_APP_TEAMS_MEETING_FUNCTION=http://localhost:7071/api/httpTriggerTeamsUrl
REACT_APP_ACS_USER_FUNCTION=http://localhost:7071/api/httpTriggerAcsToken
```
Te wartości zostaną przekazane do platformy React podczas kompilacji, aby można było je łatwo zmienić zgodnie z potrzebami podczas procesu kompilacji.
Otwórz plik client/react/App.tsx w programie VS Code.
Znajdź zmienną teamsMeetingLink stanu w składniku. Usuń zakodowany na stałe link zespołów i zastąp go pustymi cudzysłowami:
```
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```

useEffect Znajdź funkcję i zmień ją tak, aby wyglądała następująco. Ta funkcja obsługuje wywoływanie funkcji platformy Azure, która wcześniej tworzy spotkanie usługi Teams i zwraca link dołączania do spotkania:

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

}, []);

Zapisz plik przed kontynuowaniem.
Otwórz okno terminalu w cd folderze *react i uruchom polecenie npm start , aby skompilować i uruchomić aplikację.
Po utworzeniu i załadowaniu aplikacji powinien zostać wyświetlony interfejs użytkownika wywołujący usługę ACS, a następnie wywołanie spotkania usługi Teams, które zostało dynamicznie utworzone przez program Microsoft Graph.
Zatrzymaj proces terminalu, wprowadzając Ctrl + C w oknie terminalu.
Zatrzymaj projekt usługi Azure Functions.

Uwaga

Odwiedź dokumentację usług Azure Communication Services, aby dowiedzieć się więcej na temat rozszerzania spotkań w usłudze Microsoft Teams na inne sposoby.

Dynamiczne tworzenie tożsamości i tokenu usług Azure Communication Services

Pozostały czas: 27 min

W tym ćwiczeniu dowiesz się, jak dynamicznie pobierać tożsamość użytkownika i wartości tokenów z usług Azure Communication Services przy użyciu usługi Azure Functions. Po pobraniu wartości zostaną przekazane do złożonego interfejsu użytkownika usługi ACS, aby umożliwić klientowi wywołanie.

Tworzenie tożsamości i tokenu usługi ACS

C#
TypeScript

Otwórz local.settings.json i zaktualizuj ACS_CONNECTION_STRING wartość przy użyciu parametry połączenia ACS zapisanych we wcześniejszym ćwiczeniu.

Otwórz Startup.cs w programie Visual Studio i zapoznaj się z drugim AddSingleton() wywołaniem ConfigureServices() metody .

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

Wywołanie AddSingleton() tworzy CommunicationIdentityClient obiekt przy użyciu ACS_CONNECTION_STRING wartości z local.settings.json.
Otwórz ACSTokenFunction.cs i znajdź definicje konstruktora i pola.
- Zdefiniowane jest pole o nazwie Scopes , które zawiera CommunicationTokenScope.VoIP zakres. Ten zakres służy do tworzenia tokenu dostępu dla wywołania wideo.
```
private static readonly CommunicationTokenScope[] Scopes =
[
    CommunicationTokenScope.VoIP,
];
```
- Pojedyncze CommunicationIdentityClient wystąpienie utworzone w Startup.cs jest wstrzykiwane do konstruktora i przypisywane _tokenClient do pola.
```
private readonly CommunicationIdentityClient _tokenClient;

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

Zapoznaj się z Run() metodą w 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;
}

Definiuje funkcję o nazwie HttpTriggerAcsToken , którą można wywołać za pomocą żądania HTTP GET.
Nowy użytkownik usługi ACS jest tworzony przez wywołanie _tokenClient.CreateUserAsync() metody .
Token dostępu używany do wywołań wideo jest tworzony przez wywołanie _tokenClient. GetTokenAsync() metody .
Identyfikator użytkownika i token są zwracane z funkcji jako obiekt JSON.

Uruchom program, naciskając F5 w programie Visual Studio lub wybierając pozycję Debuguj —> Rozpocznij debugowanie z menu. Spowoduje to uruchomienie projektu usługi Azure Functions i udostępnienie ACSTokenFunction wywołania.

Uwaga

Jeśli używasz programu VS Code, możesz otworzyć okno terminalu w folderze GraphACSFunctions i uruchomić polecenie func start. Przyjęto założenie, że na maszynie zainstalowano narzędzia Azure Functions Core Tools .
Teraz, gdy usługa Azure Functions działa lokalnie, klient musi mieć możliwość wywołania ich w celu uzyskania tożsamości użytkownika i wartości tokenu usługi ACS.
Otwórz plik samples/acs-to-teams-meeting/client/react/App.tsx w edytorze.
userId Znajdź zmienne i token stanu w składniku. Usuń zakodowane na stałe wartości i zastąp je pustymi cudzysłowami:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

useEffect Znajdź funkcję i zmień ją tak, aby wyglądała następująco, aby umożliwić wywoływanie funkcji platformy Azure w celu pobrania tożsamości użytkownika i tokenu usługi 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();

}, []);

Zapisz plik przed kontynuowaniem.
Otwórz okno terminalu i uruchom polecenie npm start w folderze react . Po utworzeniu i załadowaniu powinien zostać wyświetlony interfejs użytkownika wywołujący usługę ACS. Możesz wywołać spotkanie usługi Teams, które zostało dynamicznie utworzone przez program Microsoft Graph.
Zatrzymaj aplikację React, naciskając Ctrl + C w oknie terminalu.
Zatrzymaj projekt usługi Azure Functions.
Zatwierdź zmiany git i wypchnij je do repozytorium GitHub przy użyciu programu Visual Studio Code:
- Wybierz ikonę Kontrola źródła (trzeci w dół na pasku narzędzi programu Visual Studio Code).
- Wprowadź komunikat zatwierdzenia i wybierz pozycję Zatwierdź.
- Wybierz pozycję Synchronizuj zmiany.

Otwórz local.settings.json i zaktualizuj ACS_CONNECTION_STRING wartość przy użyciu parametry połączenia ACS zapisanych we wcześniejszym ćwiczeniu.

Otwórz plik server/typescript/src/functions/httpTriggerAcsToken.ts w programie Visual Studio Code. Zawiera on następujący kod:

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

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

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

export default httpTriggerAcsToken;

Funkcja wykonuje następujące zadania:
- Importy CommunicationIdentityClient , które będą używane do tworzenia tożsamości i tokenu użytkownika.
```
import { CommunicationIdentityClient } from '@azure/communication-identity';
```
- Pobiera parametry połączenia ACS ze zmiennej środowiskowej o nazwie ACS_CONNECTION_STRING.
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
Uwaga

Jest to wartość parametry połączenia dodana wcześniej do pliku local.settings.json.
- Tworzy nowe CommunicationIdentityClient wystąpienie i przekazuje do niego parametry połączenia ACS.
```
let tokenClient = new CommunicationIdentityClient(connectionString);
```
- Tworzy użytkownika usługi ACS i pobiera token protokołu VOICE Over IP.
```
const user = await tokenClient.createUser();
const userToken = await tokenClient.getToken(user, ["voip"]);
```
- Wysyła wartości userId i tokenu z powrotem do obiektu wywołującego.
```
return {
    jsonBody: { userId: user.communicationUserId, ...userToken }
};
```
Przejdź do folderu server/typescript w oknie terminalu i uruchom polecenie npm start.
Teraz, gdy usługa Azure Functions działa lokalnie, klient musi mieć możliwość wywołania ich w celu uzyskania tożsamości użytkownika i wartości tokenu usługi ACS.
Otwórz plik client/react/App.tsx w edytorze.
userId Znajdź zmienne i token stanu w składniku. Usuń zakodowane na stałe wartości i zastąp je pustymi cudzysłowami:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

useEffect Znajdź funkcję i zmień ją tak, aby wyglądała następująco, aby umożliwić wywoływanie funkcji platformy Azure w celu pobrania tożsamości użytkownika i tokenu usługi 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();

}, []);

Zapisz plik przed kontynuowaniem.
Otwórz oddzielny terminal i uruchom polecenie npm start w folderze react . Po utworzeniu i załadowaniu powinien zostać wyświetlony interfejs użytkownika wywołujący usługę ACS. Możesz wywołać spotkanie usługi Teams, które zostało dynamicznie utworzone przez program Microsoft Graph.
Zatrzymaj oba procesy terminalowe (React i Azure Functions), wybierając Ctrl + C.
Zatwierdź zmiany git i wypchnij je do repozytorium GitHub przy użyciu programu Visual Studio Code:
- Wybierz ikonę Kontrola źródła (trzeci w dół na pasku narzędzi programu Visual Studio Code).
- Wprowadź komunikat zatwierdzenia i wybierz pozycję Zatwierdź.
- Wybierz pozycję Synchronizuj zmiany.

Wdrażanie aplikacji w usługach Azure Functions i Azure Container Apps

Pozostały czas: 17 min

Ważne

Oprócz wymagań wstępnych wymienionych w tym samouczku należy również zainstalować następujące narzędzia na maszynie, aby ukończyć to ćwiczenie.

Interfejs wiersza polecenia platformy Azure
Jeśli używasz programu VS Code, zainstaluj rozszerzenie usługi Azure Functions

W tym ćwiczeniu dowiesz się, jak wdrożyć funkcje programu Microsoft Graph i ACS omówione we wcześniejszych ćwiczeniach w usłudze Azure Functions. Utworzysz również obraz kontenera i wdrożysz go w usłudze Azure Container Apps.

Azure Container Apps

Wdrażanie w usłudze Azure Functions

C#
TypeScript

Uwaga

Ta sekcja używa programu Visual Studio do publikowania funkcji języka C# na platformie Azure. Jeśli wolisz używać programu Visual Studio Code, możesz postępować zgodnie z instrukcjami w przewodniku Szybki start Tworzenie funkcji języka C# na platformie Azure przy użyciu programu Visual Studio Code .

samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln Otwórz projekt w programie Visual Studio.
Kliknij prawym przyciskiem myszy GraphACSFunctions projekt i wybierz polecenie Publikuj.
Wybierz pozycję Azure w sekcji docelowej, a następnie kliknij przycisk Dalej.
Wybierz pozycję Aplikacja funkcji platformy Azure (Windows),a następnie kliknij przycisk Dalej.
Wybierz swoją subskrypcję, a następnie wybierz pozycję + Utwórz nowy.
Wprowadź następujące informacje:
- Nazwa funkcji: wymagana jest globalnie unikatowa nazwa. Przykład: acsFunctions<YOUR_LAST_NAME>.
- Subskrypcja: wybierz swoją subskrypcję.
- Grupa zasobów: wybierz grupę zasobów utworzoną wcześniej w tym samouczku lub utwórz nową.
- Plan hostingu: plan zużycia.
- Lokalizacja: wybierz region, do którego chcesz wdrożyć.
- Azure Storage: utwórz nowy. (Możesz również wybrać istniejące konto magazynu).
- Azure Insights: utwórz nowy. (Możesz również wybrać istniejące konto magazynu).
Uwaga

Wymagana jest globalnie unikatowa nazwa. Możesz zwiększyć unikatowość nazwy, dodając liczbę lub nazwisko na końcu nazwy.
Po utworzeniu aplikacji funkcji platformy Azure zostanie wyświetlony ekran potwierdzenia. Upewnij się, że wybrano opcję Uruchom z pakietu , a następnie wybierz pozycję Zakończ.
Wybierz pozycję Publikuj, aby wdrożyć funkcję na platformie Azure.
Po wdrożeniu funkcji na platformie Azure przejdź do witryny Azure Portal i wybierz utworzoną aplikację funkcji.
Skopiuj adres URL wdrożonej funkcji. Użyjesz wartości w dalszej części tego ćwiczenia.
Wybierz pozycję Ustawienia —> Konfiguracja w menu po lewej stronie.

Wybierz przycisk + Nowa aplikacja i dodaj następujące klucze i wartości w ustawieniach aplikacji. Te wartości można odzyskać w local.settings.json projekcie GraphACSFunctions .

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

Wybierz przycisk Zapisz, aby zapisać ustawienia.
Na koniec należy włączyć mechanizm CORS (współużytkowanie zasobów między źródłami) dla aplikacji funkcji, aby interfejsy API aplikacji funkcji były dostępne spoza domeny. Wybierz pozycję Ustawienia —> MECHANIZM CORS w menu po lewej stronie.
Wprowadź * (dostępne z dowolnych domen) w polu tekstowym Dozwolone źródła , a następnie wybierz przycisk Zapisz .

Zacznijmy od wdrożenia kodu funkcji w usłudze Azure Functions przy użyciu programu VS Code.

Otwórz folder projektu server/typescript.
Powinien zostać uruchomiony npm install folder node_modules w katalogu głównym projektu. Jeśli nie, otwórz okno polecenia i uruchom polecenie npm install , aby zainstalować zależności.
Otwórz paletę poleceń programu VS Code (Shift+Cmd+P na komputerze Mac | Shift+Ctrl+P w systemie Windows) i wybierz pozycję Azure Functions: Utwórz aplikację funkcji na platformie Azure.

Uwaga

Jeśli ta opcja nie jest widoczna, upewnij się, że rozszerzenie usługi Azure Functions jest zainstalowane w programie VS Code.
Zostanie wyświetlony monit o wprowadzenie następujących informacji:
- Nazwa subskrypcji platformy Azure.
- Nazwa funkcji: acsFunctions<YOUR_LAST_NAME>.
Uwaga

Wymagana jest globalnie unikatowa nazwa. Możesz zwiększyć unikatowość nazwy, dodając liczbę lub nazwisko na końcu nazwy.
- Stos środowiska uruchomieniowego — wybierz najnowszą wersję Node.js LTS .
- Region (wybierz dowolny region).
Po utworzeniu aplikacji funkcji platformy Azure zostanie wyświetlony komunikat o wyświetlaniu szczegółów.
Wróć do palety poleceń w programie VS Code i wybierz pozycję Azure Functions: Wdróż w aplikacji funkcji. Zostanie wyświetlony monit o wybranie subskrypcji i utworzonej wcześniej nazwy aplikacji funkcji.
Po wdrożeniu funkcji na platformie Azure wykonaj następujące czynności:
- Wybierz rozszerzenie platformy Azure w programie VS Code (kliknij ikonę platformy Azure na pasku bocznym).
- Rozwiń subskrypcję.
- Rozwiń aplikację funkcji.
- Kliknij prawym przyciskiem myszy funkcję i wybierz pozycję Przeglądaj witrynę internetową. Przed kontynuowaniem upewnij się, że aplikacja funkcji działa poprawnie.
Skopiuj domenę funkcji platformy Azure do pliku lokalnego. Użyjesz wartości w dalszej części tego ćwiczenia.

Wdrażanie w usłudze Azure Container Apps

Pierwszym zadaniem, które wykonasz, jest utworzenie nowego zasobu usługi Azure Container Registry (ACR). Po utworzeniu rejestru utworzysz obraz i wypchniesz go do rejestru.
Otwórz okno polecenia i uruchom następujące polecenie, aby zalogować się do subskrypcji platformy Azure:
```
az login
```

Dodaj następujące zmienne powłoki podstawiające wartości dla symboli zastępczych zgodnie z potrzebami. Dodaj GITHUB_USERNAME> jako małą wartość i zastąp domenę< usługi Azure Functions wartością AZURE_FUNCTIONS_DOMAIN> (uwzględnij https:// wartość w domenie).<

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

Utwórz nowy zasób usługi Azure Container Registry , uruchamiając następujące polecenie:

Bash
Program 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

Otwórz plik client/react/Dockerfile w edytorze i zwróć uwagę, że są wykonywane następujące zadania:
- Aplikacja React jest kompilowana i przypisywana do etapu kompilacji.
- Serwer nginx jest skonfigurowany, a dane wyjściowe etapu kompilacji są kopiowane do obrazu serwera nginx.

Skompiluj obraz kontenera na platformie Azure, uruchamiając następujące polecenie z katalogu głównego folderu client/react . Zastąp <YOUR_FUNCTIONS_DOMAIN> domeną usługi Azure Functions skopiowaną do pliku lokalnego wcześniej w tym ćwiczeniu.

Bash
Program 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 .

Uruchom następujące polecenie, aby wyświetlić listę obrazów w rejestrze. Powinien zostać wyświetlony nowy obraz.
```
az acr repository list --name $ACR_NAME --output table
```
Po wdrożeniu obrazu należy utworzyć aplikację kontenera platformy Azure, która może uruchomić kontener.
Odwiedź witrynę Azure Portal w przeglądarce i zaloguj się.
Wpisz aplikacje kontenera na górnym pasku wyszukiwania i wybierz pozycję Aplikacje kontenera z wyświetlonych opcji.
Wybierz pozycję Utwórz na pasku narzędzi.

Uwaga

Mimo że używasz witryny Azure Portal, aplikację kontenera można również utworzyć przy użyciu interfejsu wiersza polecenia platformy Azure. Aby uzyskać więcej informacji, zobacz Szybki start: wdrażanie pierwszej aplikacji kontenera. Zobaczysz przykład użycia interfejsu wiersza polecenia platformy Azure na końcu tego ćwiczenia.
Wykonaj następujące zadania:
- Wybierz subskrypcję.
- Wybierz grupę zasobów do użycia (w razie potrzeby utwórz nową). Jeśli chcesz, możesz użyć tej samej grupy zasobów, która była używana dla zasobu ACS. Skopiuj nazwę grupy zasobów do tego samego pliku lokalnego, w którym zapisano domenę usługi Azure Functions.
- Wprowadź nazwę aplikacji kontenera dla spotkania acs-to-teams.
- Wybierz region.
- Wybierz pozycję Utwórz nowy w sekcji Środowisko aplikacji kontenera.
- Wprowadź nazwę środowiska acs-to-teams-meeting-env.
- Zaznacz przycisk Utwórz.
- Wybierz pozycję Dalej: Ustawienia >aplikacji.
Wprowadź następujące wartości na ekranie Tworzenie aplikacji kontenera:
- Usuń zaznaczenie pola wyboru Użyj obrazu szybkiego startu.
- Nazwa: acs-to-teams-meeting
- Źródło obrazu: Azure Container Registry
- Rejestr: <YOUR_ACR_REGISTRY_NAME.azurecr.io>
- Obraz: acs-to-teams-meeting
- Tag obrazu: latest
- Procesor CPU i pamięć: 0,25 rdzeni procesora CPU, pamięć -.5 Gi
W sekcji Ustawienia ruchu przychodzącego aplikacji wykonaj następujące czynności:
- Zaznacz pole wyboru Włączone.
- Wybierz przycisk radiowy Akceptowanie ruchu z dowolnego miejsca.
Spowoduje to utworzenie punktu wejścia (ruchu przychodzącego) dla aplikacji React i zezwolenie na jej wywoływanie z dowolnego miejsca. Usługa Azure Container Apps przekierowuje cały ruch do protokołu HTTPS.
- Port docelowy: 80

Wybierz pozycję Przejrzyj i utwórz. Po zakończeniu walidacji wybierz przycisk Utwórz .

Jeśli wystąpi błąd, może to być spowodowane tym, że środowisko aplikacji kontenera jest nieaktywne zbyt długo. Najprostszym rozwiązaniem będzie ponowne przejście przez proces tworzenia aplikacji kontenera. Alternatywnie możesz uruchomić następujące polecenie, aby utworzyć aplikację kontenera przy użyciu interfejsu wiersza polecenia platformy Azure:

Bash
Program 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

Po zakończeniu wdrażania aplikacji kontenera przejdź do niej w witrynie Azure Portal i wybierz adres URL aplikacji na ekranie Przegląd , aby wyświetlić aplikację działającą w kontenerze nginx.

Udostępnij za pośrednictwem

Połączenie audio/wideo z aplikacji niestandardowej do spotkania usługi Teams

Co utworzysz w tym samouczku

Omówienie rozwiązania aplikacji

Wymagania wstępne

Technologie używane w tym samouczku obejmują

Tworzenie zasobu usług Azure Communication Services

Integrowanie usług Azure Communication Services wywołujących w aplikacji React

Dynamiczne tworzenie spotkania usługi Microsoft Teams przy użyciu programu Microsoft Graph

Tworzenie pliku local.settings.json

Wywoływanie funkcji platformy Azure z platformy React

Dynamiczne tworzenie tożsamości i tokenu usług Azure Communication Services

Wdrażanie aplikacji w usługach Azure Functions i Azure Container Apps

Wdrażanie w usłudze Azure Functions

Wdrażanie w usłudze Azure Container Apps

Gratulacje!

Ukończono ten samouczek

Opinia