Introducción a la preparación para llamadas y a la biblioteca de interfaz de usuario

Artículo
06/09/2023

Importante

Esta característica de Azure Communication Services se encuentra actualmente en versión preliminar.

Las API y los SDK en versión preliminar se proporcionan sin contrato de nivel de servicio. Se recomienda no usarlos para las cargas de trabajo de producción. Es posible que algunas características no sean compatibles o que sus funcionalidades estén limitadas.

Para obtener más información, consulte Términos de uso complementarios para las Versiones preliminares de Microsoft Azure.

Flujo de un usuario que se une a una llamada desde un vínculo de correo electrónico

Cuando un usuario piensa unirse a una llamada web, el centro de su atención es la conversación que quiere tener con las otras personas en la llamada, que podrían tener el rol de médico, profesor, asesor financiero o amigo. La conversación en sí puede implicar suficiente estrés, sin tomar en cuenta que, además, debe navegar por el proceso de asegurarse de que los dispositivos estén listos para ser vistos o escuchados. Es fundamental asegurarse de que el dispositivo y el cliente que estén usando estén listos para la llamada.

Podría ser imposible predecir cada problema o combinación de problemas que puedan surgir, pero si aplica este tutorial, podrá:

Reducir la probabilidad de problemas que afecten a un usuario durante una llamada
Resaltar un problema solo si va a afectar negativamente a la experiencia
Evitar que un usuario tenga que buscar una solución; ofrecer ayuda guiada para resolver el problema

La herramienta de diagnóstico de pruebas de red de Azure Communication Services se relaciona con este tutorial. Los usuarios pueden usar la herramienta de diagnóstico de pruebas de red para probar más soluciones de problemas en escenarios de soporte técnico para el cliente.

Estructura del tutorial

En este tutorial, se usa la biblioteca de interfaz de usuario de Azure Communication Services para crear una experiencia que permita al usuario prepararse para unirse a una llamada. Este tutorial está dividido en tres partes:

Requisitos previos

Visual Studio Code en una de las plataformas admitidas.
Node.js , las versiones Active LTS y Maintenance LTS (se recomienda la 10.14.1). Use el comando node --version para comprobar la versión.

Descarga de código

Acceda al código completo de este tutorial sobre GitHub.

Estructura de la aplicación

Los usuarios tienen varios obstáculos que atravesar para unirse a una llamada, desde la compatibilidad del explorador hasta la selección de la cámara correcta. En este tutorial, se usa React con la biblioteca de interfaz de usuario de Azure Communication Services para crear una aplicación que realice las comprobaciones de preparación para las llamadas. Estas comprobaciones guían al usuario en relación con la compatibilidad del explorador, los permisos de cámara y micrófono y, por último, la configuración del dispositivo.

El flujo de usuario de la aplicación es el siguiente:

Diagrama que muestra el flujo del usuario durante la preparación de la llamada de ejemplo

La aplicación final solicita al usuario que use un explorador compatible y otorgue acceso a la cámara y al micrófono y, a continuación, permite al usuario elegir el micrófono y la cámara, y obtener una vista previa de su configuración, antes de unirse a la llamada:

GIF que muestra la experiencia de principio a fin de las comprobaciones de preparación de llamada y configuración del dispositivo

Configuración del proyecto

Para configurar la aplicación de React, en esta guía de inicio rápido, se usará la plantilla create-react-app. El comando create-react-app crea una aplicación TypeScript fácil de ejecutar con tecnología de React. El comando instala los paquetes npm de Azure Communication Services y el paquete npm de FluentUI para crear la interfaz de usuario avanzada. Para obtener más información sobre create-react-app, consulte Introducción a React.

# Create an Azure Communication Services App powered by React.
npx create-react-app ui-library-call-readiness-app --template communication-react 

# Change to the directory of the newly created App.
cd ui-library-call-readiness-app

Al final de este proceso, debería tener una aplicación completa dentro de la carpeta ui-library-call-readiness-app. En este inicio rápido, se modificarán los archivos dentro de la carpeta src.

Instalación de paquetes

Como esta característica está en versión preliminar pública, debe usar las versiones beta de los paquetes de npm de Azure Communication Services. Use el comando npm install para instalar estos paquetes:

# Install Public Preview versions of the Azure Communication Services Libraries.
npm install @azure/communication-react@1.5.1-beta.1 @azure/communication-calling@1.10.0-beta.1

Nota

Si va a instalar los paquetes de comunicación en una aplicación existente, @azure/communication-react actualmente no admite React v18. Para cambiar a React v17 o inferior, siga estas instrucciones.

Configuración inicial de la aplicación

Para empezar, se reemplazará el contenido predeterminado de create-react-app App.tsx por una configuración básica que:

Registrará los iconos necesarios que se usan en este tutorial.
Establecerá un proveedor de temas que se puede usar para configurar un tema personalizado.
Creará un StatefulCallClient con un proveedor que proporcione a los componentes secundarios acceso al cliente de llamada.

src/App.tsx

import { CallClientProvider, createStatefulCallClient, FluentThemeProvider, useTheme } from '@azure/communication-react';
import { initializeIcons, registerIcons, Stack, Text } from '@fluentui/react';
import { DEFAULT_COMPONENT_ICONS } from '@azure/communication-react';
import { CheckmarkCircle48Filled } from '@fluentui/react-icons';

// Initializing and registering icons should only be done once per app.
initializeIcons();
registerIcons({ icons: DEFAULT_COMPONENT_ICONS });

const USER_ID = 'user1'; // In your production app replace this with an Azure Communication Services User ID
const callClient = createStatefulCallClient({ userId: { communicationUserId: USER_ID } });

/**
 * Entry point of a React app.
 */
const App = (): JSX.Element => {
  return (
    <FluentThemeProvider>
      <CallClientProvider callClient={callClient}>
        <TestComplete />
      </CallClientProvider>
    </FluentThemeProvider>
  );
}

export default App;

/**
 * Final page to highlight the call readiness checks have completed.
 * Replace this with your own App's next stage.
 */
export const TestComplete = (): JSX.Element => {
  const theme = useTheme();
  return (
    <Stack verticalFill verticalAlign="center" horizontalAlign="center" tokens={{ childrenGap: "1rem" }}>
      <CheckmarkCircle48Filled primaryFill={theme.palette.green} />
      <Text variant="xLarge">Call Readiness Complete</Text>
      <Text variant="medium">From here you can have the user join their call using their chosen settings.</Text>
    </Stack>
  );
};

Ejecución de create-react-app

Vamos a probar la configuración mediante la ejecución de:

# Run the React App
npm start

Una vez que la aplicación se esté ejecutando, visite http://localhost:3000 en el explorador para ver la aplicación en ejecución. Debería ver una marca de verificación verde con el mensaje Test Complete.

Pasos siguientes

Parte 1: Compatibilidad del explorador

Compartir a través de