Integración de llamadas de Azure Communication Services en una aplicación react

En este ejercicio, agregará el componente compuesto de llamadas de la UI de ACS a una aplicación React para habilitar las 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 observe que se incluyen los siguientes paquetes de ACS:
```
@azure/communication-common 
@azure/communication-react
```
Compruebe que tiene instalado npm 10 o posterior 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 mediante la ejecución npm install -g npmde .
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 y de llamada de audio/vídeo de ACS 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 de Azure Communication Services para habilitar la realización de una llamada de audio y vídeo desde la aplicación a 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.
- Reemplaza las comillas vacías de la función teamsMeetingLinkuseState por el enlace de la reunión de Teams que copiaste 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 valores userId, credential y 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 pasan los parámetros necesarios. Vea detalles adicionales sobre useMemo aquí.
Una vez que credentials y callAdapterArgs estén listos, la línea siguiente se encarga de crear un adaptador de llamada de ACS mediante el hook de 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 que useAzureCommunicationCallAdapter es un enlace de React, no asignará un valor a callAdapter hasta que el callAdapterArgs valor sea válido.

Anteriormente, asignó la identidad de usuario, el token y el enlace de la reunión de Teams a los valores de estado del componente App. Esto funciona bien por ahora, pero en un ejercicio posterior verá cómo recuperar dinámicamente esos valores. Como estableció los valores anteriormente, comente el código de la useEffect función como se muestra a continuación. Una vez que hagas funcionar Azure Functions en los siguientes ejercicios, volverás a revisar 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 siguiente código JSX. Usa el CallComposite símbolo que vio importado para representar la interfaz de usuario que se usa para realizar una llamada de audio y vídeo desde la aplicación React a una reunión de Teams. El callAdapter que exploraste previamente se pasa a su propiedad adapter 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 que las aplicaciones se hayan compilado, debería ver una interfaz de usuario de llamada mostrada. Habilite la selección del micrófono y la cámara e inicie la llamada. Debería ver que se le coloca 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 la 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.

Paso siguiente

Crear dinámicamente una reunión de Microsoft Teams con Microsoft Graph

Comentarios

¿Le ha resultado útil esta página?

Last updated on 2025-06-12

Compartir a través de

Integración de llamadas de Azure Communication Services en una aplicación react

Paso siguiente

Comentarios

Recursos adicionales