Erstellen einer Umgebung zur Vorbereitung auf Anrufe mit Azure Communication Services

Artikel
03/25/2023

Wichtig

Dieses Feature von Azure Communication Services befindet sich derzeit in der Vorschau.

Vorschau-APIs und -SDKs werden ohne Vereinbarung zum Servicelevel bereitgestellt. Es wird empfohlen, diese nicht für Produktionsworkloads zu verwenden. Einige Features werden möglicherweise nicht unterstützt oder bieten nur eingeschränkte Funktionalität.

Weitere Informationen finden Sie in den ergänzenden Nutzungsbestimmungen für Microsoft Azure-Vorschauversionen.

In diesem Tutorial verwenden wir Azure Communication Services mit der Benutzeroberflächenbibliothek, um eine Umgebung zu erstellen, die Benutzer auf die Teilnahme an einem Anruf vorbereitet. Die Benutzeroberflächenbibliothek bietet eine Reihe von Komponenten und Steuerelementen, mit denen Sie eine Umgebung zur Vorbereitung auf Anrufe einrichten können, sowie zahlreiche APIs, um Informationen zum Benutzerstatus zu erhalten.

Voraussetzungen

Führen Sie den Prozess zur Einrichtung der App im vorherigen Teil dieses Tutorials aus: Vorbereitung auf Anrufe – Übersicht.

Code herunterladen

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

Überprüfen der Browserunterstützung

Um ein optimales Benutzererlebnis sicherzustellen, müssen wir zuerst überprüfen, ob die Benutzer einen unterstützten Browser verwenden. In diesem Abschnitt erstellen wir eine Seite, auf der „Ihre Sitzung wird vorbereitet“ angezeigt wird, während wir im Hintergrund eine schnelle Überprüfung der Browserunterstützung auf dem Gerät des Benutzers durchführen.

Gif-Animation: Browserüberprüfung wird ausgeführt

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 „Ihre Sitzung wird vorbereitet“ in unsere App einbinden. 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';

Danach aktualisieren Sie die App.tsx-Datei, um den neuen Wartekreisel hinzuzufügen.

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 Überprüfung der Umgebungsinformationen

Erstellen Sie zuerst den Hilfsprogrammdateiaufruf environmentSupportUtils.ts. In diesem Aufruf fügen wir eine checkEnvironmentSupport-Methode hinzu. 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 von checkEnvironmentSupport zurückgegebenen Daten enthalten die folgenden Informationen:

Browserunterstützung
Unterstützung der Browserversion
Unterstützung des Betriebssystems (der Plattform)
Detaillierte Umgebungsinformationen

Information an den Benutzer bei Verwendung eines nicht unterstützten Browsers

Als Nächstes müssen wir diese Informationen aus dem Aufruf-SDK verwenden, um den Benutzer über den Zustand seiner Umgebung zu informieren, wenn ein Problem vorliegt. Die Benutzeroberflächenbibliothek stellt drei verschiedene Komponenten bereit, die diesen Zweck erfüllen, je nachdem, welches Problem vorliegt.

UnsupportedOperatingSystem
UnsupportedBrowser
UnsupportedBrowserVersion

Zunächst hosten wir die Komponenten der Benutzeroberflächenbibliothek in einem FluentUI-Modalelement. Erstellen Sie eine neue Datei namens UnsupportedEnvironmentPrompts.tsx, in der wir die verschiedenen Eingabeaufforderungen 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>
);

Diese Eingabeaufforderungen können wir dann in einer Komponente zur Umgebungsprüfung anzeigen. Erstellen Sie eine Datei namens EnvironmentChecksComponent.tsx, die die Logik für die Anzeige dieser Eingabeaufforderung enthält. Diese Komponente verfügt über einen onTestsSuccessful-Rückruf, 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} />
    </>
  );
}

Dann können wir EnvironmentChecksComponent zu App.tsx hinzufügen. Die App übergibt den Benutzer dann in die Phase Geräteüberprüfungen, sobald der Test mit dem onTestsSuccessful-Rückruf erfolgreich ist:

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

import { EnvironmentChecksComponent } from './EnvironmentChecksComponent';

Anschließend aktualisieren wir 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 die Ausführung in einem nicht unterstützten Browser. Der Bildschirm „Nicht unterstützter Browser“ wird angezeigt:

Gif-Animation: Browserüberprüfung nicht erfolgreich

Nächste Schritte

Teil 2: Anfordern von Kamera- und Mikrofonzugriff

Freigeben über