Erstellen einer Anrufbereitschaftserfahrung mit Azure Communication Services

In diesem Lernprogramm verwenden wir Azure Communication Services mit der Benutzeroberflächenbibliothek , um eine Benutzeroberfläche zu erstellen, die Benutzer für die Teilnahme an einem Anruf bereit macht. Die Benutzeroberflächenbibliothek bietet eine Reihe von umfangreichen Komponenten und UI-Steuerelementen, die verwendet werden können, um eine Anrufbereitschaft zu erzeugen, und einen umfassenden Satz von APIs, um den Benutzerstatus zu verstehen.

Voraussetzungen

• Folgen Sie dem App-Setupprozess im vorherigen Teil dieses Lernprogramms: Anrufbereitschaft – Übersicht

Code herunterladen

Greifen Sie auf den vollständigen Quellcode für dieses Tutorial auf GitHub zu.

Suchen nach Browserunterstützung

Um sicherzustellen, dass der Benutzer die beste Benutzererfahrung erhält, möchten wir zunächst sicherstellen, dass er sich in einem unterstützten Browser befindet. In diesem Abschnitt erstellen wir eine Seite, auf der "Sitzung vorbereiten" angezeigt wird, während wir eine schnelle Unterstützungsüberprüfung im Hintergrund im Browser des Benutzers durchführen.

Seite „Ihre Sitzung wird vorbereitet“

Erstellen Sie eine neue Datei namens PreparingYourSession.tsx. In dieser erstellen wir einen Wartekreisel, der dem Benutzer angezeigt wird, während wir im Hintergrund asynchrone Überprüfungen durchführen:

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

Anschließend können wir diesen Bildschirm "Sitzung vorbereiten" mit unserer App verbinden. In der Datei App.tsx und der Variable testState wird der Zustand der App nachverfolgt, und während testState sich im Zustand runningEnvironmentChecks befindet, zeigen wir den Bildschirm „Ihre Sitzung wird vorbereitet“ an.

Fügen Sie zunächst die folgenden Importe zu unserer App.tsx Datei hinzu, die wir in der Übersicht erstellt haben:

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

Aktualisieren Sie danach unsere App.tsx-Datei, damit sie den neuen Spinner enthält.

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

Durchführen einer Umgebungsinformationsprüfung

Erstellen Sie zuerst den Hilfsprogrammdateiaufruf environmentSupportUtils.ts. In diesem Aufruf fügen wir eine Methode checkEnvironmentSupporthinzu. Diese Methode verwendet den zustandsbehafteten Aufrufclient, um die Informationen zu der Umgebung anzufordern, in der der zustandsbehaftete Aufrufclient ausgeführt wird.

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

Die zurückgegebenen checkEnvironmentSupport Daten enthalten die folgenden Informationen:

• Browser-Unterstützung
• Browserversionsunterstützung
• Unterstützung des Betriebssystems (Plattform)
• Detaillierte Umgebungsinformationen

Informieren des Benutzers, dass er sich in einem nicht unterstützten Browser befinden

Als Nächstes müssen wir diese Informationen aus dem Aufrufen-SDK verwenden, um den Benutzer über den Status seiner Umgebung zu informieren, wenn ein Problem aufgetreten ist. Die Ui-Bibliothek bietet drei verschiedene Komponenten, die diesem Zweck dienen, je nachdem, was das Problem ist.

• UnsupportedOperatingSystem
• UnsupportedBrowser
• UnsupportedBrowserVersion

Zunächst hosten wir die Komponenten der UI-Bibliothek in einem FluentUI Modal: Erstellen Sie eine neue Datei mit dem Namen UnsupportedEnvironmentPrompts.tsx, in der wir verschiedene Dialoge erstellen.

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

Anschließend können wir diese Eingabeaufforderungen in einer Umgebungsprüfungskomponente anzeigen. Erstellen Sie eine Datei EnvironmentChecksComponent.tsx , die die Logik zum Anzeigen dieser Eingabeaufforderung enthält: Diese Komponente verfügt über einen Rückruf onTestsSuccessful , der den Benutzer zur nächsten Seite in der App führen kann.

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

Anschließend können wir EnvironmentChecksComponent zu App.tsx hinzufügen. Die App verschebt den Benutzer dann in die Phase "Geräteüberprüfungen ", nachdem der Test erfolgreich mit dem onTestsSuccessful Rückruf durchgeführt wurde:

Jetzt importieren wir die neue Komponente in unsere App in App.tsx

import { EnvironmentChecksComponent } from './EnvironmentChecksComponent';

Aktualisieren wir dann die App Komponente in 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>
  );
}

Sie können die App jetzt ausführen. Versuchen Sie, auf einem nicht unterstützten Browser auszuführen, und es wird die Aufforderung zum nicht unterstützten Browser angezeigt:

Nächste Schritte