Llamadas de audio y vídeo desde una aplicación personalizada en una reunión de Teams

Artículo
Developer (Intermedio)
Tiempo para finalizar: 59 minutos

Nivel: Intermedio

En este tutorial, aprenderá a usar Azure Communication Services en una aplicación de React personalizada para permitir que un usuario realice una llamada de audio y vídeo en una reunión de Microsoft Teams. Obtendrá información sobre los diferentes bloques de creación que se pueden usar para hacer posible este escenario y se le proporcionarán pasos prácticos para guiarle por los diferentes servicios en la nube de Microsoft implicados.

Lo que compilará en este tutorial

Información general de la solución de aplicación

Arquitectura del escenario

Requisitos previos

Node LTS : Node LTS se usa para este proyecto
git
Visual Studio Code u otro IDE que prefiera.
extensión de Azure Functions para VS Code
Azure Functions Core Tools
Suscripción de Azure
Inquilino para desarrolladores de Microsoft 365
Cuenta de GitHub
Visual Studio si usa la versión de C# del tutorial. Visual Studio Code también se puede usar si se prefiere.

Entre las tecnologías que se usan en este tutorial se incluyen

React
Azure Communication Services
Azure Functions
Microsoft Graph
Equipos de Microsoft

Create un recurso de Azure Communication Services

57 minutos restantes

En este ejercicio, creará un recurso de Azure Communication Services (ACS) en el Azure Portal.

ACS en el Azure Portal

Para empezar, realice las siguientes tareas:

Visite el Azure Portal en el explorador e inicie sesión.
Escriba Communication Services en la barra de búsqueda de la parte superior de la página y seleccione Communication Services en las opciones que aparecen.
Seleccione Create en la barra de herramientas.
Realice las siguientes tareas:
- Seleccione su suscripción a Azure.
- Seleccione el grupo de recursos que se va a usar (cree uno nuevo si no existe).
- Escriba un nombre de recurso de ACS. Debe ser un valor único.
- Seleccione una ubicación de datos.
Seleccione Revisar y Create seguido de Create.
Una vez creado el recurso de ACS, vaya a él y seleccione Configuración:> identidades & tokens de acceso de usuario.
Active la casilla Voz y videollamadas (VOIP).
Seleccione Generar.
Copie los valores del token de identidad y acceso de usuario en un archivo local. Necesitará los valores más adelante en este ejercicio.
Seleccione Configuración:> claves y copie la clave principal cadena de conexión valor en el archivo local donde copió los valores de identidad y token del usuario.
Para ejecutar la aplicación, necesitará un vínculo a la reunión de Teams. Vaya a Microsoft Teams, inicie sesión con su inquilino para desarrolladores de Microsoft 365 y seleccione la opción Calendario de la izquierda.

Sugerencia

Si actualmente no tiene una cuenta de Microsoft 365, puede registrarse para obtener la suscripción del Programa para desarrolladores de Microsoft 365 . Es gratis durante 90 días y se renovará continuamente siempre y cuando lo use para la actividad de desarrollo. Si tiene una suscripción de Visual Studio Enterprise o Professional , ambos programas incluyen una suscripción gratuita para desarrolladores de Microsoft 365, activa durante la vida útil de la suscripción de Visual Studio.
Seleccione una fecha y hora en el calendario, agregue un título para la reunión, invite a un usuario desde el inquilino del desarrollador de Microsoft 365 y seleccione Guardar.
Seleccione la nueva reunión que agregó en el calendario y copie el vínculo de reunión de Teams que se muestra en el mismo archivo donde almacenó la identidad, el token y la cadena de conexión de usuario de ACS.
Ahora que el recurso de ACS está configurado y tiene un vínculo de unión a la reunión de Teams, vamos a poner en funcionamiento la aplicación React.

Integrar Azure Communication Services Calling en una aplicación de React

47 minutos restantes

En este ejercicio, agregará la interfaz de usuario de ACS que llama compuesta a una aplicación de React para habilitar la realización de llamadas de audio y vídeo desde una aplicación personalizada a una reunión de Microsoft Teams.

ACS en React

Visite GitHub e inicie sesión. Si aún no tiene una cuenta de GitHub, puede seleccionar la opción Registrarse para crear una.
Visite el repositorio de GitHub de Microsoft Cloud.
Seleccione la opción Bifurcar para agregar el repositorio a la organización o cuenta de GitHub deseada.
Ejecute el siguiente comando para clonar este repositorio en la máquina. Reemplace <YOUR_ORG_NAME> por el nombre de la organización o cuenta de GitHub.
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
Abra la carpeta del proyecto samples/acs-to-teams-meeting en Visual Studio Code.
Expanda la carpeta client/react .
Abra el archivo package.json en VS Code y tenga en cuenta que se incluyen los siguientes paquetes de ACS:
```
@azure/communication-common 
@azure/communication-react
```
Compruebe que tiene npm 10 o superior instalado abriendo una ventana de terminal y ejecutando el siguiente comando:
```
npm --version
```
Sugerencia

Si no tiene npm 10 o superior instalado, puede actualizar npm a la versión más reciente ejecutando npm install -g npm.
Abra una ventana de terminal y ejecute el npm install comando en la carpeta react para instalar las dependencias de la aplicación.
Abra App.tsx y dedique un momento a explorar las importaciones en la parte superior del archivo. Estos controlan la importación de símbolos de seguridad de ACS y llamadas de audio/vídeo que se usarán en la aplicación.
```
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';
```
Nota

Verá cómo se usa el CallComposite componente más adelante en este ejercicio. Proporciona la funcionalidad básica de la interfaz de usuario para Azure Communication Services habilitar la realización de una llamada de audio y vídeo desde la aplicación en una reunión de Microsoft Teams.
Busque el App componente y realice las siguientes tareas:
- Dedique un momento a examinar las useState definiciones del componente.
- Reemplace las comillas vacías de la userIduseState función por el valor de identidad de usuario de ACS que copió en el ejercicio anterior.
- Reemplace las comillas vacías de la tokenuseState función por el valor del token de ACS que copió en el ejercicio anterior.
- Reemplace las comillas vacías de la teamsMeetingLinkuseState función por el valor del vínculo de reunión de Teams que copió en el ejercicio anterior.
```
// 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>('');
```
Nota

Más adelante en este tutorial, verá cómo recuperar dinámicamente los userIdvalores , tokeny teamsMeetingLink .
Dedique un momento a explorar las useMemo funciones del App componente.
- La credentialuseMemo función crea una nueva AzureCommunicationTokenCredential instancia una vez que el token tiene un valor.
- La callAdapterArgsuseMemo función devuelve un objeto que tiene los argumentos que se usan para realizar una llamada de audio/vídeo. Observe que usa los userIdvalores , credentialy teamsMeetingLink en los argumentos de llamada de 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]);
```
Nota

useMemo se usa en este escenario porque solo queremos que el AzureCommunicationTokenCredential objeto y los argumentos del adaptador de llamada se creen una vez cuando se pasen los parámetros necesarios. Vea detalles adicionales sobre useMemo aquí.
Una vez que el y credentialscallAdapterArgs están listos, la línea siguiente controla la creación de un adaptador de llamada de ACS mediante el useAzureCommunicationCallAdapter enlace React proporcionado por ACS. El callAdapter objeto se usará más adelante en la interfaz de usuario que llama al componente compuesto.
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
Nota

Dado useAzureCommunicationCallAdapter que es un enlace de React, no asignará un valor a callAdapter hasta que el callAdapterArgs valor sea válido.

Anteriormente asignó el vínculo de identidad de usuario, token y reunión de Teams a los valores de estado del App componente. Esto funciona bien por ahora, pero en un ejercicio posterior verá cómo recuperar dinámicamente esos valores. Como estableció los valores anteriormente, convierta en comentario el código de la useEffect función como se muestra a continuación. Una vez que obtenga el Azure Functions en ejecución en los ejercicios siguientes, volverá a consultar este código.

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

    */
}, []);

Busque el código JSX siguiente. Usa el CallComposite símbolo que vio importado para representar la interfaz de usuario utilizada para realizar una llamada de audio y vídeo desde la aplicación React en una reunión de Teams. El callAdapter objeto que ha explorado anteriormente se pasa a su adapter propiedad para proporcionar los argumentos necesarios.
```
if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}
```
Guarde el archivo antes de continuar.
Ejecute npm start en la ventana del terminal para ejecutar la aplicación. Asegúrese de ejecutar el comando dentro de la carpeta react .
Una vez compiladas las aplicaciones, debería ver una interfaz de usuario que llama. Habilite la selección del micrófono y la cámara e inicie la llamada. Debería ver que está colocado en una sala de espera. Si se une a la reunión que configuró anteriormente en Microsoft Teams, puede permitir que el invitado entre en la reunión.
Presione Ctrl + C para detener la aplicación. Ahora que lo ha ejecutado correctamente, vamos a explorar cómo puede obtener dinámicamente la identidad y el token de usuario de ACS y crear automáticamente una reunión de Microsoft Teams y devolver la dirección URL de unión mediante Microsoft Graph.

Dinámicamente Create una reunión de Microsoft Teams mediante Microsoft Graph

37 minutos restantes

En este ejercicio, automatizará el proceso de creación de un vínculo de reunión de Microsoft Teams y pasará al ACS mediante Azure Functions y Microsoft Graph.

reunión de Create Teams

Deberá crear una aplicación de Microsoft Entra ID para la autenticación de la aplicación demonio. En este paso, la autenticación se controlará en segundo plano con las credenciales de la aplicación y una aplicación de Microsoft Entra ID usará permisos de aplicación para realizar llamadas a Microsoft Graph API. Microsoft Graph se usará para crear dinámicamente una reunión de Microsoft Teams y devolver la dirección URL de la reunión de Teams.
Realice los pasos siguientes para crear una aplicación de Microsoft Entra ID:
1. Vaya a Azure Portal y seleccione Microsoft Entra ID.
2. Seleccione la pestaña Registro de aplicaciones seguida de + Nuevo registro.
3. Rellene los detalles del nuevo formulario de registro de aplicaciones como se muestra a continuación y seleccione Registrar:
  - Nombre: Aplicación de interoperabilidad de EQUIPOS de ACS
  - Tipos de cuenta admitidos: cuentas en cualquier directorio organizativo (cualquier directorio Microsoft Entra ID: multiinquilino) y cuentas personales de Microsoft (por ejemplo, Skype, Xbox)
  - URI de redirección: deje este valor en blanco.
4. Una vez registrada la aplicación, vaya a Permisos de API y seleccione + Agregar un permiso.
5. Seleccione Microsoft Graph seguido de Permisos de aplicación.
6. Seleccione el Calendars.ReadWrite permiso y, a continuación, seleccione Agregar.
7. Después de agregar los permisos, seleccione Conceder consentimiento del administrador para <YOUR_ORGANIZATION_NAME>.
8. Vaya a la pestaña Certificados & secretos , seleccione + Nuevo secreto de cliente y, a continuación, seleccione Agregar.
9. Copie el valor del secreto en un archivo local. Usará el valor más adelante en este ejercicio.
10. Vaya a la pestaña Información general y copie los Application (client) ID valores y Directory (tenant) ID en el mismo archivo local que usó en el paso anterior.

samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln Abra en Visual Studio o abra la carpeta GraphACSFunctions en Visual Studio Code.
Vaya al GraphACSFunctions proyecto y cree un local.settings.json archivo con los valores siguientes:
```
{
    "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"
    ]
}
```
- Use los valores que copió en el archivo local de un ejercicio anterior para actualizar los TENANT_IDvalores y CLIENT_SECRETCLIENT_ID .
- Defina USER_ID con el identificador de usuario que desea crear una reunión de Microsoft Teams.
Puede obtener el identificador de usuario de la Azure Portal.
- Inicie sesión con su cuenta de administrador de inquilinos de desarrollador de Microsoft 365.
- Seleccione Microsoft Entra ID.
- Vaya a la pestaña Usuarios de la barra lateral.
- Búsqueda para el nombre de usuario y selecciónelo para ver los detalles del usuario.
- Dentro de los detalles del usuario, Object ID representa .User ID Copie el Object ID valor y úselo para el USER_ID valor de local.settings.json.
Nota

ACS_CONNECTION_STRING se usará en el ejercicio siguiente, por lo que aún no es necesario actualizarlo.

Abra GraphACSFunctions.sln ubicado en la carpeta acs-to-teams-meeting/server/csharp y tenga en cuenta que incluye los siguientes paquetes de Microsoft Graph e Identidad:

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

Vaya a Program.cs y anote el código siguiente en el ConfigureServices método :

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

Este código crea un GraphServiceClient objeto que se puede usar para llamar a Microsoft Graph desde Azure Functions. Es un singleton y se puede insertar en otras clases.
Puede realizar llamadas de Microsoft Graph API con permisos de solo aplicación (como Calendars.ReadWrite) pasando un ClientSecretCredential valor al GraphServiceClient constructor. ClientSecretCredential usa los Tenant Idvalores , Client Id y Client Secret de la aplicación Microsoft Entra ID.

Abra Servicios/GraphService.cs.

Dedique un momento a explorar el CreateMeetingEventAsync método :

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 y IConfiguration los objetos se insertan en el constructor y se asignan a campos.
La CreateMeetingAsync() función publica datos en la API de eventos de calendario de Microsoft Graph, que crea dinámicamente un evento en el calendario de un usuario y devuelve la dirección URL de combinación.

Abra TeamsMeetingFunctions.cs y dedique un momento a examinarlo como constructor. El GraphServiceClient objeto que miró anteriormente se inserta y se asigna al _graphService campo.
```
private readonly IGraphService _graphService;

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

Busque el Run método :

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

Define un nombre de función al HttpTriggerTeamsUrl que se puede llamar con una solicitud HTTP GET.
Llama a _graphService.CreateMeetingAsync(), que crea un nuevo evento y devuelve la dirección URL de combinación.

Ejecute el programa presionando F5 en Visual Studio o seleccionando Depurar> - Iniciar depuración en el menú. Esta acción inicia el proyecto Azure Functions y hace que esté ACSTokenFunction disponible para llamar a .

Nota

Si usa VS Code, puede abrir una ventana de terminal en la carpeta GraphACSFunctions y ejecutar func start. Se supone que tiene instalado el Azure Functions Core Tools en el equipo.

Abra la carpeta del proyecto samples/acs-to-teams-meeting/server/typescript en Visual Studio Code.
Create un archivo de local.settings.json con los siguientes valores:
```
{
    "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"
    ]
}
```
- Use los valores que copió en el archivo local de un ejercicio anterior para actualizar los TENANT_IDvalores y CLIENT_SECRETCLIENT_ID .
- Defina USER_ID con el identificador de usuario que desea crear una reunión de Microsoft Teams.
Puede obtener el identificador de usuario de la Azure Portal.
- Inicie sesión con su cuenta de administrador de inquilinos de desarrollador de Microsoft 365.
- Seleccione Microsoft Entra ID,
- Vaya a la pestaña Usuarios de la barra lateral.
- Búsqueda para el nombre de usuario y selecciónelo para ver los detalles del usuario.
- Dentro de los detalles del usuario, Object ID representa .User ID Copie el Object ID valor y úselo para el USER_ID valor de local.settings.json.
Nota

ACS_CONNECTION_STRING se usará en el ejercicio siguiente, por lo que aún no es necesario actualizarlo.
Abra el archivo package.json en VS Code y tenga en cuenta que se incluyen los siguientes paquetes de Microsoft Graph e Identidad:
```
@azure/communication-identity
@azure/identity
@microsoft/microsoft-graph-client
```
Abra una ventana de terminal en la carpeta typescript y ejecute el npm install comando para instalar las dependencias de la aplicación.
Abra Shared/graph.ts y dedique un momento a explorar las importaciones en la parte superior del archivo. Este código controla la importación de la autenticación y los símbolos de cliente que se usan en la función de Azure para llamar a 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';
```
Sugerencia

También verá las importaciones de dateTimeFormat.ts que se usan más adelante en este ejercicio. startDateTimeAsync y endDateTimeAsync se usan al crear un vínculo de reunión de Microsoft Teams para definir la fecha de inicio y la fecha de finalización de la reunión.
Dedique un momento a examinar clientSecretCredential y appGraphClient. Se usarán más adelante en el proceso de autenticación y al llamar a Microsoft Graph API:
```
let clientSecretCredential;
let appGraphClient;
```

Busque la ensureGraphForAppOnlyAuth función :

ClientSecretCredentialusa los Tenant Idvalores , Client Id y Client Secret de la aplicación Microsoft Entra ID.
El authProvider objeto se define como una aplicación de Microsoft Entra ID que se autenticará en segundo plano y usará permisos de solo aplicación (como Calendars.ReadWrite) para realizar llamadas a 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
        });
    }
}

Dedique un momento a explorar la createNewMeetingAsync función. Publica datos en la API de eventos de calendario de Microsoft Graph, que crea dinámicamente un evento en el calendario de un usuario y devuelve los nuevos detalles del evento:

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;

Vaya a server/typescript/src/functions/httpTriggerTeamsUrl.ts y explore la función Desencadenador Http :

createNewMeetingAsync se importa desde graph.ts. Controla la creación y recuperación de nuevos detalles del evento.
userId se recupera de local.settings.json dentro de la función Desencadenador Http. Esta recuperación se realiza mediante el acceso a la variable de USER_ID entorno mediante process.env.USER_ID.
Cuando se desencadena la función, llama createNewMeetingAsync a con el identificador de usuario definido y devuelve los nuevos detalles del evento en teamMeetingLink el parámetro .
La función accede a la dirección URL de unión a la reunión de Teams llamando meeting.onlineMeeting.joinUrl a y devuelve el valor en el cuerpo de la respuesta.

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;

Use una ventana de terminal para ejecutarse npm start en la carpeta samples/acs-video-to-teams-meeting/server/typescript para ejecutar la función localmente.

Llamada a la función de Azure desde React

Ahora que la httpTriggerTeamsUrl función está lista para usarse, vamos a llamarla desde la aplicación React.
Expanda la carpeta client/react .
Agregue un archivo .env a la carpeta con los valores siguientes:
```
REACT_APP_TEAMS_MEETING_FUNCTION=http://localhost:7071/api/httpTriggerTeamsUrl
REACT_APP_ACS_USER_FUNCTION=http://localhost:7071/api/httpTriggerAcsToken
```
Estos valores se pasarán a React a medida que se compila para que pueda cambiarlos fácilmente según sea necesario durante el proceso de compilación.
Abra el archivo client/react/App.tsx en VS Code.
Busque la teamsMeetingLink variable de estado en el componente. Quite el vínculo de los equipos codificados de forma dura y reemplácelo por comillas vacías:
```
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```

Busque la useEffect función y cámbiela para que tenga un aspecto similar al siguiente. Esto controla la llamada a la función de Azure que ha examinado anteriormente, que crea una reunión de Teams y devuelve el vínculo de unión a la reunión:

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

}, []);

Guarde el archivo antes de continuar.
Abra una ventana de terminal, cd en la carpeta *react y ejecute npm start para compilar y ejecutar la aplicación.
Después de compilar y cargar la aplicación, debería ver que se muestra la interfaz de usuario de llamada de ACS y, a continuación, puede llamar a la reunión de Teams creada dinámicamente por Microsoft Graph.
Para detener el proceso de terminal, escriba Ctrl + C en la ventana del terminal.
Detenga el proyecto de Azure Functions.

Nota

Visite la documentación de Azure Communication Services para obtener más información sobre la extensión de reuniones de Microsoft Teams de otras maneras.

Dinámicamente Create una identidad y un token de Azure Communication Services

27 minutos restantes

En este ejercicio aprenderá a recuperar dinámicamente los valores de identidad de usuario y token de Azure Communication Services mediante Azure Functions. Una vez recuperado, los valores se pasarán a la composición de la interfaz de usuario de ACS para permitir que un cliente realice una llamada.

Create identidad y token de ACS

C#
TypeScript

Abra local.settings.json y actualice el ACS_CONNECTION_STRING valor con el cadena de conexión de ACS que guardó en un ejercicio anterior.

Abra Startup.cs en Visual Studio y explore la segunda AddSingleton() llamada en el ConfigureServices() método .

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

La AddSingleton() llamada crea un CommunicationIdentityClient objeto mediante el ACS_CONNECTION_STRING valor de local.settings.json.
Abra ACSTokenFunction.cs y busque las definiciones de constructor y campo.
- Se define un campo denominado Scopes que incluye el CommunicationTokenScope.VoIP ámbito. Este ámbito se usa para crear el token de acceso para la videollamada.
```
private static readonly CommunicationTokenScope[] Scopes =
[
    CommunicationTokenScope.VoIP,
];
```
- La CommunicationIdentityClient instancia singleton creada en Startup.cs se inserta en el constructor y se asigna al _tokenClient campo .
```
private readonly CommunicationIdentityClient _tokenClient;

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

Explore el Run() método en 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;
}

Define una función denominada de HttpTriggerAcsToken que se puede llamar con una solicitud HTTP GET.
Se crea un nuevo usuario de ACS llamando al _tokenClient.CreateUserAsync() método .
Se crea un token de acceso que se usa para las videollamadas mediante una llamada al _tokenClient. GetTokenAsync() método .
El identificador de usuario y el token se devuelven de la función como un objeto JSON.

Ejecute el programa presionando F5 en Visual Studio o seleccionando Depurar -> Iniciar depuración en el menú. Se iniciará el proyecto de Azure Functions y se pondrá ACSTokenFunction a disposición de la llamada.

Nota

Si usa VS Code, puede abrir una ventana de terminal en la carpeta GraphACSFunctions y ejecutar func start. Esto supone que tiene instalado Azure Functions Core Tools en el equipo.
Ahora que el Azure Functions se ejecuta localmente, el cliente debe poder llamar a ellos para obtener los valores de identidad de usuario y token de ACS.
Abra el archivo samples/acs-to-teams-meeting/client/react/App.tsx en el editor.
Busque las userId variables de estado y token en el componente . Quite los valores codificados de forma rígida y reemplácelos por comillas vacías:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

Busque la useEffect función y cámbiela para que tenga un aspecto similar al siguiente para habilitar la llamada a la función de Azure para recuperar una identidad de usuario y un token de 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();

}, []);

Guarde el archivo antes de continuar.
Abra una ventana de terminal y ejecute npm start en la react carpeta . Después de compilar y cargar, debería ver que se muestra la interfaz de usuario de llamada de ACS y puede llamar a la reunión de Teams creada dinámicamente por Microsoft Graph.
Detenga la aplicación React presionando Ctrl + C en la ventana del terminal.
Detenga el proyecto de Azure Functions.
Confirme los cambios de Git e insértelos en el repositorio de GitHub mediante Visual Studio Code:
- Seleccione el icono Control de código fuente (3º abajo en la barra de herramientas de Visual Studio Code).
- Escriba un mensaje de confirmación y seleccione Confirmar.
- Seleccione Sincronizar cambios.

Abra local.settings.json y actualice el ACS_CONNECTION_STRING valor con el cadena de conexión de ACS que guardó en un ejercicio anterior.

Abra server/typescript/src/functions/httpTriggerAcsToken.ts en Visual Studio Code. Tiene el código siguiente:

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;

La función realiza las siguientes tareas:
- Importa CommunicationIdentityClient que se usará para crear la identidad y el token de usuario.
```
import { CommunicationIdentityClient } from '@azure/communication-identity';
```
- Obtiene el cadena de conexión de ACS de una variable de entorno denominada ACS_CONNECTION_STRING.
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
Nota

Este es el valor cadena de conexión que agregó anteriormente al archivo local.settings.json.
- Crea una nueva CommunicationIdentityClient instancia y pasa el cadena de conexión de ACS.
```
let tokenClient = new CommunicationIdentityClient(connectionString);
```
- Crea un usuario de ACS y obtiene un token de Voz sobre IP.
```
const user = await tokenClient.createUser();
const userToken = await tokenClient.getToken(user, ["voip"]);
```
- Devuelve los valores userId y token al autor de la llamada.
```
return {
    jsonBody: { userId: user.communicationUserId, ...userToken }
};
```
Vaya a la carpeta server/typescript en una ventana de terminal y ejecute npm start.
Ahora que el Azure Functions se ejecuta localmente, el cliente debe poder llamar a ellos para obtener los valores de identidad de usuario y token de ACS.
Abra el archivo client/react/App.tsx en el editor.
Busque las userId variables de estado y token en el componente . Quite los valores codificados de forma rígida y reemplácelos por comillas vacías:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

Busque la useEffect función y cámbiela para que tenga un aspecto similar al siguiente para habilitar la llamada a la función de Azure para recuperar una identidad de usuario y un token de 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();

}, []);

Guarde el archivo antes de continuar.
Abra un terminal independiente y ejecute npm start en la carpeta react . Después de compilar y cargar, debería ver que se muestra la interfaz de usuario de llamada de ACS y puede llamar a la reunión de Teams creada dinámicamente por Microsoft Graph.
Detenga ambos procesos de terminal (React y Azure Functions) seleccionando Ctrl + C.
Confirme los cambios de Git e insértelos en el repositorio de GitHub mediante Visual Studio Code:
- Seleccione el icono Control de código fuente (3º abajo en la barra de herramientas de Visual Studio Code).
- Escriba un mensaje de confirmación y seleccione Confirmar.
- Seleccione Sincronizar cambios.

Implementación de la aplicación en Azure Functions y Azure Container Apps

17 minutos restantes

Importante

Además de los requisitos previos enumerados para este tutorial, también deberá instalar las siguientes herramientas en el equipo para completar este ejercicio.

CLI de Azure
Si usa VS Code, instale la extensión Azure Functions.

En este ejercicio aprenderá a implementar las funciones de Microsoft Graph y ACS que se describen en ejercicios anteriores para Azure Functions. También creará una imagen de contenedor e la implementará en Azure Container Apps.

Azure Container Apps

Implementación en Azure Functions

C#
TypeScript

Nota

En esta sección se usa Visual Studio para publicar las funciones de C# en Azure. Si prefiere usar Visual Studio Code, puede seguir las instrucciones de la Create una función de C# en Azure mediante Visual Studio Code inicio rápido.

Abra el samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln proyecto en Visual Studio.
Haga clic con el botón derecho en el GraphACSFunctions proyecto y seleccione Publicar.
Seleccione Azure en la sección de destino y haga clic en Siguiente.
Seleccione Aplicación de funciones de Azure (Windows) y haga clic en Siguiente.
Seleccione la suscripción y, a continuación, seleccione + Create Nuevo.
Escriba la siguiente información:
- Nombre de la función: se requiere un nombre único global. Ejemplo: acsFunctions<YOUR_LAST_NAME>.
- Suscripción: seleccione la suscripción.
- Grupo de recursos: seleccione un grupo de recursos que creó anteriormente en este tutorial o también puede crear uno nuevo.
- Plan de hospedaje: plan de consumo.
- Ubicación: seleccione la región en la que desea realizar la implementación.
- Azure Storage: Create uno nuevo. (También puede seleccionar una cuenta de almacenamiento existente).
- Azure Insights: Create uno nuevo. (También puede seleccionar una cuenta de almacenamiento existente).
Nota

Se requiere un nombre único global. Puede hacer que el nombre sea más único si agrega un número o su apellido al final del nombre.
Una vez creada la aplicación de funciones de Azure, verá una pantalla de confirmación. Asegúrese de que la opción Ejecutar desde el paquete está seleccionada y, a continuación, seleccione Finalizar.
Seleccione Publicar para implementar la función en Azure.
Una vez implementada la función en Azure, vaya al Azure Portal y seleccione la aplicación de funciones que ha creado.
Copie la dirección URL de la función que implementó. Usará el valor más adelante en este ejercicio.
Seleccione Configuración-> Configuración en el menú de la izquierda.
Seleccione el botón + Nueva configuración de la aplicación y agregue las siguientes claves y valores en la configuración de la aplicación. Puede recuperar estos valores desde local.settings.json en el GraphACSFunctions proyecto.
```
# 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>
```
Seleccione el botón Guardar para guardar la configuración.
Por último, debe habilitar CORS (uso compartido de recursos entre orígenes) para que la aplicación de funciones haga que las API de la aplicación de función sean accesibles desde fuera del dominio. Seleccione Configuración:> CORS en el menú de la izquierda.
Escriba * (accesible desde cualquier dominio) en el cuadro de texto Orígenes permitidos y, a continuación, seleccione el botón Guardar .

Empecemos por usar VS Code para implementar el código de funciones en Azure Functions.

Abra la carpeta del proyecto server/typescript .
Ya debería haber ejecutado npm install y ver una carpeta node_modules en la raíz del proyecto. Si no es así, abra una ventana de comandos y ejecute npm install para instalar las dependencias.
Abra la paleta de comandos de VS Code (Mayús+Cmd+P en Mac | Mayús+Ctrl+P en Windows) y seleccione Azure Functions: Create Function App en Azure.

Nota

Si no ve esta opción, asegúrese de que tiene instalada la extensión Azure Functions en VS Code.
Se le pedirá que escriba la siguiente información:
- El nombre de la suscripción de Azure.
- Nombre de la función: acsFunctions<YOUR_LAST_NAME>.
Nota

Se requiere un nombre único global. Puede hacer que el nombre sea más único si agrega un número o su apellido al final del nombre.
- Pila en tiempo de ejecución: seleccione la versión más reciente deNode.js LTS .
- La región (seleccione cualquier región que desee).
Una vez creada la aplicación de funciones de Azure, verá un mensaje sobre cómo ver los detalles.
Volver a la paleta de comandos en VS Code y seleccione Azure Functions: Implementar en Function App. Se le pedirá que seleccione la suscripción y el nombre de function App que creó anteriormente.
Una vez implementada la función en Azure, haga lo siguiente:
- Seleccione la extensión de Azure en VS Code (haga clic en el icono de Azure en la barra lateral).
- Expanda la suscripción.
- Expanda la aplicación de funciones.
- Haga clic con el botón derecho en la función y seleccione Examinar sitio web. Asegúrese de que la aplicación de funciones funciona correctamente antes de continuar.
Copie el dominio de Azure Functions en un archivo local. Usará el valor más adelante en este ejercicio.

Implementación en Azure Container Apps

La primera tarea que realizará es crear un nuevo recurso de Azure Container Registry (ACR). Una vez creado el registro, creará una imagen y la insertará en el registro.
Abra una ventana de comandos y ejecute el siguiente comando para iniciar sesión en la suscripción de Azure:
```
az login
```

Agregue las siguientes variables de shell sustituyendo los valores de los marcadores de posición según corresponda. Agregue el< GITHUB_USERNAME> como un valor en minúsculas y sustituya el dominio de Azure Functions por el <valor de AZURE_FUNCTIONS_DOMAIN> (incluya en https:// el valor de dominio).

Bash
PowerShell

GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
ACR_NAME="aca"$GITHUB_USERNAME
AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

$GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
$RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
$ACR_NAME="aca"+$GITHUB_USERNAME
$AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

Create un nuevo recurso de Azure Container Registry mediante la ejecución del siguiente comando:

Bash
PowerShell

az acr create \
    --resource-group $RESOURCE_GROUP \
    --name $ACR_NAME \
    --sku Basic \
    --admin-enabled true

az acr create `
    --resource-group $RESOURCE_GROUP `
    --name $ACR_NAME `
    --sku Basic `
    --admin-enabled true

Abra el archivo client/react/Dockerfile en el editor y observe que se realizan las siguientes tareas:
- La aplicación React se compila y se asigna a la fase de compilación.
- El servidor nginx está configurado y la salida de la fase de compilación se copia en la imagen del servidor nginx.

Compile la imagen de contenedor en Azure mediante la ejecución del siguiente comando desde la raíz de la carpeta client/react . Reemplace <YOUR_FUNCTIONS_DOMAIN> por el dominio de Azure Functions que copió en un archivo local anteriormente en este ejercicio.

Bash
PowerShell

az acr build --registry $ACR_NAME --image acs-to-teams-meeting \
  --build-arg REACT_APP_ACS_USER_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerAcsToken \
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerTeamsUrl .

az acr build --registry $ACR_NAME --image acs-to-teams-meeting `
  --build-arg REACT_APP_ACS_USER_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerAcsToken `
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerTeamsUrl .

Ejecute el siguiente comando para enumerar las imágenes del registro. Debería ver la nueva imagen en la lista.
```
az acr repository list --name $ACR_NAME --output table
```
Ahora que se implementa la imagen, debe crear una aplicación de contenedor de Azure que pueda ejecutar el contenedor.
Visite el Azure Portal en el explorador e inicie sesión.
Escriba aplicaciones de contenedor en la barra de búsqueda superior y seleccione Aplicaciones contenedoras en las opciones que aparecen.
Seleccione Create en la barra de herramientas.

Nota

Aunque usa el Azure Portal, también se puede crear una aplicación contenedora mediante la CLI de Azure. Para obtener más información, consulte Inicio rápido: implementación de la primera aplicación contenedora. También verá un ejemplo de cómo se puede usar la CLI de Azure al final de este ejercicio.
Realice las siguientes tareas:
- Seleccione su suscripción.
- Seleccione el grupo de recursos que se va a usar (cree uno nuevo si es necesario). Puede usar el mismo grupo de recursos que usó para el recurso de ACS si lo desea. Copie el nombre del grupo de recursos en el mismo archivo local donde almacenó el dominio de Azure Functions.
- Escriba un nombre de aplicación contenedora de acs-to-teams-meeting.
- Seleccione una región.
- Seleccione Create nuevo en la sección Entorno de aplicaciones contenedoras.
- Escriba un nombre de entorno de acs-to-teams-meeting-env.
- Seleccione el botón Crear.
- Seleccione Siguiente: Configuración de >la aplicación.
Escriba los valores siguientes en la pantalla Create Aplicación contenedora:
- Anule la selección de la casilla Usar imagen de inicio rápido .
- Nombre: acs-to-teams-meeting
- Origen de la imagen: Azure Container Registry
- Registro: <YOUR_ACR_REGISTRY_NAME.azurecr.io>
- Imagen: acs-to-teams-meeting
- Etiqueta de imagen: más reciente
- CPU y memoria: 0,25 núcleos de CPU, memoria -.5 Gi
En la sección Configuración de entrada de la aplicación , haga lo siguiente:
- Seleccione la casilla Habilitado.
- Seleccione el botón de radio Accepting traffic from anywhere (Aceptar tráfico desde cualquier lugar ).
Esto creará un punto de entrada (entrada) para la aplicación de React y permitirá que se llame desde cualquier lugar. Azure Container Apps redirige todo el tráfico a HTTPS.
- Puerto de destino: 80

Seleccione Revisar + crear. Una vez superada la validación, seleccione el botón Create.

Si recibe un error, puede deberse a que el entorno de aplicaciones de contenedor está inactivo durante demasiado tiempo. La solución más sencilla será recorrer de nuevo el proceso de creación de la aplicación contenedora. Como alternativa, puede ejecutar el siguiente comando para crear la aplicación contenedora mediante la CLI de Azure:

Bash
PowerShell

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP \
    --location westus --image acs-to-teams-meeting \
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env \
    --ingress-enabled true --ingress-target-port 80 --ingress-type External \
    --ingress-protocol Https --ingress-traffic Anywhere

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP `
    --location westus --image acs-to-teams-meeting `
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env `
    --ingress-enabled true --ingress-target-port 80 --ingress-type External `
    --ingress-protocol Https --ingress-traffic Anywhere

Una vez completada la implementación de la aplicación contenedora, vaya a ella en el Azure Portal y seleccione la dirección URL de la aplicación en la pantalla Información general para ver la aplicación que se ejecuta en el contenedor nginx.

Compartir a través de

Llamadas de audio y vídeo desde una aplicación personalizada en una reunión de Teams

Lo que compilará en este tutorial

Información general de la solución de aplicación

Requisitos previos

Entre las tecnologías que se usan en este tutorial se incluyen

Create un recurso de Azure Communication Services

Integrar Azure Communication Services Calling en una aplicación de React

Dinámicamente Create una reunión de Microsoft Teams mediante Microsoft Graph

Crear un archivo de local.settings.json

Llamada a la función de Azure desde React

Dinámicamente Create una identidad y un token de Azure Communication Services

Implementación de la aplicación en Azure Functions y Azure Container Apps

Implementación en Azure Functions

Implementación en Azure Container Apps

¡Enhorabuena!

Ha completado este tutorial.

Comentarios