Creación de una experiencia de preparación de llamadas mediante Azure Communication Services

Artículo
03/25/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.

En este tutorial, se usa Azure Communication Services con la biblioteca de interfaz de usuario para crear una experiencia que permita a los usuarios prepararse para unirse a una llamada. La biblioteca de interfaz de usuario proporciona un conjunto de componentes enriquecidos y controles de interfaz de usuario que se pueden usar para generar una experiencia de preparación de llamadas y un amplio conjunto de API para comprender el estado del usuario.

Requisitos previos

Siga el proceso de configuración de la aplicación de la parte anterior de este tutorial: Preparación de llamadas: Información general

Descarga de código

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

Comprobación de la compatibilidad de exploradores

Para asegurarse de que el usuario obtenga la mejor experiencia, primero queremos asegurarnos de que está en un explorador compatible. En esta sección, se crea una página que muestra "Preparando la sesión" mientras se realiza una comprobación rápida de compatibilidad en segundo plano en el explorador del usuario.

Gif que muestra la comprobación del explorador que se está realizando

Página Preparando la sesión

Cree un nuevo archivo denominado PreparingYourSession.tsx en el que se crea un número para mostrar al usuario mientras se realizan comprobaciones asincrónicas en segundo plano:

src/PreparingYourSession.tsx

import { useTheme } from '@azure/communication-react';
import { ISpinnerStyles, IStackStyles, ITextStyles, ITheme, Spinner, Stack, Text } from '@fluentui/react';

/** This page displays a spinner to the user. This is used to show the user that background checks are being performed. */
export const PreparingYourSession = (): JSX.Element => {
  const theme = useTheme();
  return (
    <Stack verticalFill verticalAlign="center" horizontalAlign="center" tokens={{ childrenGap: '3rem' }}>
      <Stack styles={spinnerContainerStyles(theme)}>
        <Spinner styles={spinnerStyles} />
      </Stack>
      <Stack horizontalAlign="center">
        <Text styles={headingStyles} variant="large">Preparing your session</Text>
        <Text variant="medium">Please be patient</Text>
      </Stack>
    </Stack>
  );
};

const headingStyles: ITextStyles = {
  root: {
    fontWeight: '600',
    lineHeight: '2rem'
  }
};

const spinnerStyles: ISpinnerStyles = {
  circle: {
    height: '2.75rem',
    width: '2.75rem',
    borderWidth: '0.2rem'
  }
};

const spinnerContainerStyles = (theme: ITheme): IStackStyles => ({
  root: {
    padding: '1.75rem',
    borderRadius: '50%',
    background: theme.palette?.themeLighterAlt
  }
});

A continuación, se puede enlazar esta pantalla de preparación de la sesión a la aplicación. En App.tsx y una variable testState para realizar un seguimiento del estado de la aplicación y mientras testState está en estado runningEnvironmentChecks, se muestra la pantalla Preparando la sesión.

En primer lugar, agregue las siguientes importaciones al archivo App.tsx que se ha creado en la introducción:

import { useState } from 'react';
import { PreparingYourSession } from './PreparingYourSession';

Una vez hecho esto, actualice el archivo App.tsx para incluir el nuevo número.

type TestingState = 'runningEnvironmentChecks' | 'finished';

const App = (): JSX.Element => {
  const [testState, setTestState] = useState<TestingState>('runningEnvironmentChecks');

  return (
    <FluentThemeProvider>
      <CallClientProvider callClient={callClient}>
        {/* Show a Preparing your session screen while running the call readiness checks */}
        {testState === 'runningEnvironmentChecks' && (
          <>
            <PreparingYourSession />
          </>
        )}

        {/* After the device setup is complete, take the user to the call. For this sample we show a test complete page. */}
        {testState === 'finished' && <TestComplete />}
      </CallClientProvider>
    </FluentThemeProvider>
  );
}

Realización de una comprobación de información del entorno

En primer lugar, cree una llamada al archivo de utilidad environmentSupportUtils.ts. Dentro de esta llamada, agregue un método checkEnvironmentSupport. Este método usa el cliente con estado de llamada para realizar una solicitud para la información del entorno en la que se ejecuta el cliente con estado de llamada.

src/environmentSupportUtils.ts

import { Features, EnvironmentInfo } from "@azure/communication-calling";
import { StatefulCallClient } from "@azure/communication-react";

/** Use the CallClient's getEnvironmentInfo() method to check if the browser is supported. */
export const checkEnvironmentSupport = async (callClient: StatefulCallClient): Promise<EnvironmentInfo> => {
  const environmentInfo = await callClient.feature(Features.DebugInfo).getEnvironmentInfo();
  console.info(environmentInfo); // view console logs in the browser to see what environment info is returned
  return environmentInfo;
}

Los datos devueltos de checkEnvironmentSupport contienen la siguiente información:

Compatibilidad con exploradores
Compatibilidad con la versión del explorador
Compatibilidad con el sistema operativo (plataforma)
Información detallada del entorno

Notificación al usuario de que está en un explorador no admitido

A continuación, es necesario usar esta información proporcionada desde el SDK de llamadas para informar al usuario del estado de su entorno si hay un problema. La biblioteca de interfaz de usuario proporciona tres componentes diferentes para cumplir este propósito en función de cuál sea el problema.

UnsupportedOperatingSystem
UnsupportedBrowser
UnsupportedBrowserVersion

Para empezar, se hospedan los componentes de la biblioteca de interfaz de usuario dentro de un FluentUI Modal: Crear un nuevo archivo denominado UnsupportedEnvironmentPrompts.tsx donde se crean los distintos avisos:

src/UnsupportedEnvironmentPrompts.tsx

import { UnsupportedOperatingSystem, UnsupportedBrowser, UnsupportedBrowserVersion } from '@azure/communication-react';
import { Modal } from '@fluentui/react';

/**
 * Modal dialog that shows a Browser Version Unsupported Prompt
 * Use the `onTroubleShootingClick` argument to redirect the user to further troubleshooting.
 * Use the `onContinueAnywayClick` argument to allow the user to continue to the next step even though they are on an unsupported browser version.
 */
export const BrowserVersionUnsupportedPrompt = (props: { isOpen: boolean, onContinueAnyway:() => void }): JSX.    Element => (
  <Modal isOpen={props.isOpen}>
    <UnsupportedBrowserVersion
      onTroubleshootingClick={() => alert('This callback should be used to take the user to further troubleshooting')}
      onContinueAnywayClick={() => props.onContinueAnyway()}
    />
  </Modal>
);

/**
 * Modal dialog that shows a Browser Unsupported Prompt
 * Use the `onTroubleShootingClick` argument to redirect the user to further troubleshooting.
 */
export const BrowserUnsupportedPrompt = (props: { isOpen: boolean }): JSX.Element => (
  <Modal isOpen={props.isOpen}>
    <UnsupportedBrowser
      onTroubleshootingClick={() => alert('This callback should be used to take the user to further troubleshooting')}
    />
  </Modal>
);

/**
 * Modal dialog that shows an Operating System Unsupported Prompt
 * Use the `onTroubleShootingClick` argument to redirect the user to further troubleshooting.
 */
export const OperatingSystemUnsupportedPrompt = (props: { isOpen: boolean }): JSX.Element => (
  <Modal isOpen={props.isOpen}>
    <UnsupportedOperatingSystem
      onTroubleshootingClick={() => alert('This callback should be used to take the user to further troubleshooting')}
    />
  </Modal>
);

A continuación, se pueden mostrar estos mensajes en un componente de comprobación del entorno. Cree un archivo denominado EnvironmentChecksComponent.tsx que contenga la lógica para mostrar este mensaje: Este componente tiene una devolución de llamada onTestsSuccessful que puede llevar al usuario a la página siguiente de la aplicación.

src/EnvironmentChecksComponent.tsx

import { useEffect, useState } from 'react';
import { BrowserUnsupportedPrompt, BrowserVersionUnsupportedPrompt, OperatingSystemUnsupportedPrompt } from './UnsupportedEnvironmentPrompts';
import { useCallClient } from '@azure/communication-react';
import { checkEnvironmentSupport } from './environmentSupportUtils';

export type EnvironmentChecksState = 'runningEnvironmentChecks' |
  'operatingSystemUnsupported' |
  'browserUnsupported' |
  'browserVersionUnsupported';

/**
 * This component is a demo of how to use the StatefulCallClient with CallReadiness Components to get a user
 * ready to join a call.
 * This component checks the browser support.
 */
export const EnvironmentChecksComponent = (props: {
  /**
   * Callback triggered when the tests are complete and successful
   */
  onTestsSuccessful: () => void
}): JSX.Element => {
  const [currentCheckState, setCurrentCheckState] = useState<EnvironmentChecksState>('runningEnvironmentChecks');
  

  // Run call readiness checks when component mounts
  const callClient = useCallClient();
  useEffect(() => {
    const runEnvironmentChecks = async (): Promise<void> => {

      // First we get the environment information from the calling SDK.
      const environmentInfo = await checkEnvironmentSupport(callClient);

      if (!environmentInfo.isSupportedPlatform) {
        setCurrentCheckState('operatingSystemUnsupported');
        // If the platform or operating system is not supported we stop here and display a modal to the user.
        return;
      } else if (!environmentInfo.isSupportedBrowser) {
        setCurrentCheckState('browserUnsupported');
        // If browser support fails, we stop here and display a modal to the user.
        return;
      } else if (!environmentInfo.isSupportedBrowserVersion) {
        setCurrentCheckState('browserVersionUnsupported');
        /**
         *  If the browser version is unsupported, we stop here and show a modal that can allow the user 
         *  to continue into the call.
         */
        return;
      } else {
        props.onTestsSuccessful();
      }
    };

    runEnvironmentChecks();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <>
      {/* We show this when the operating system is unsupported */}
      <OperatingSystemUnsupportedPrompt isOpen={currentCheckState === 'operatingSystemUnsupported'} />

      {/* We show this when the browser is unsupported */}
      <BrowserUnsupportedPrompt isOpen={currentCheckState === 'browserUnsupported'} />

      {/* We show this when the browser version is unsupported */}
      <BrowserVersionUnsupportedPrompt isOpen={currentCheckState === 'browserVersionUnsupported'} onContinueAnyway={props.onTestsSuccessful} />
    </>
  );
}

A continuación, se puede agregar EnvironmentChecksComponent a App.tsx. A continuación, la aplicación mueve el usuario a la fase Comprobaciones del dispositivo una vez que la prueba se realiza correctamente mediante la devolución de llamada onTestsSuccessful:

Ahora se importa el nuevo componente en la aplicación en App.tsx.

import { EnvironmentChecksComponent } from './EnvironmentChecksComponent';

Acto seguido, se actualiza componente App en App.tsx:

const App = (): JSX.Element => {
  const [testState, setTestState] = useState<TestingState>('runningEnvironmentChecks');

  return (
    <FluentThemeProvider>
      <CallClientProvider callClient={callClient}>
        {/* Show a Preparing your session screen while running the call readiness checks */}
        {testState === 'runningEnvironmentChecks' && (
          <>
            <PreparingYourSession />
            <EnvironmentChecksComponent
              onTestsSuccessful={() => setTestState('finished')}
            />
          </>
        )}

        {/* After the device setup is complete, take the user to the call. For this sample we show a test complete page. */}
        {testState === 'finished' && <TestComplete />}
      </CallClientProvider>
    </FluentThemeProvider>
  );
}

Ahora puede ejecutar la aplicación. Pruebe a ejecutarla en un explorador no compatible y verá el mensaje de explorador no compatible:

Gif en el que se muestra un error en la comprobación del explorador

Pasos siguientes

Parte 2: Solicitud de acceso a la cámara y al micrófono

Compartir a través de