Vytvoření prostředí pro připravenost volání pomocí Azure Communication Services

Článek
03/25/2023

Důležité

Tato funkce Azure Communication Services je aktuálně ve verzi Preview.

Rozhraní API a sady SDK verze Preview se poskytují bez smlouvy o úrovni služeb. Doporučujeme je nepoužívat pro produkční úlohy. Některé funkce nemusí být podporované nebo můžou mít omezené možnosti.

Další informace najdete v dodatečných podmínkách použití pro Verze Preview Microsoft Azure.

V tomto kurzu používáme Azure Communication Services s knihovnou uživatelského rozhraní k vytvoření prostředí, které uživatele připraví na připojení k hovoru. Knihovna uživatelského rozhraní poskytuje sadu bohatých komponent a ovládacích prvků uživatelského rozhraní, které lze použít k vytvoření prostředí připravenosti na volání, a bohatou sadu rozhraní API pro pochopení stavu uživatele.

Požadavky

Postupujte podle postupu nastavení aplikace v předchozí části tohoto kurzu: Připravenost na volání – přehled

Stažení kódu

Získejte přístup k úplnému kódu tohoto kurzu na GitHubu.

Kontrola podpory prohlížeče

Abychom zajistili, že uživatel bude mít co nejlepší prostředí, chceme nejprve zkontrolovat, jestli je uživatel v podporovaném prohlížeči. V této části vytvoříme stránku, na které se zobrazí "Příprava relace", zatímco provedeme rychlou kontrolu podpory na pozadí v prohlížeči uživatele.

Gif zobrazující prováděnou kontrolu prohlížeče

Stránka Příprava relace

Vytvořte nový soubor s názvem PreparingYourSession.tsx , ve kterém vytvoříme číselník, který se zobrazí uživateli při provádění asynchronních kontrol na pozadí:

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

Tuto obrazovku Příprava relace pak můžeme připojit k naší aplikaci. App.tsx V proměnné testState a pro sledování stavu aplikace a v době, kdy testState je ve runningEnvironmentChecks stavu, zobrazíme obrazovku Příprava relace.

Nejprve do souboru App.tsx , který jsme vytvořili v přehledu, přidejte následující importy:

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

Po dokončení aktualizujte soubor App.tsx tak, aby obsahoval nový spinner.

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

Provedení kontroly informací o prostředí

Nejprve vytvořte volání environmentSupportUtils.tssouboru nástroje . Do tohoto volání přidáme metodu checkEnvironmentSupport. Tato metoda používá volání stavového klienta k provedení požadavku na informace o prostředí, na kterém je spuštěný volající stavový klient.

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

Data vrácená z checkEnvironmentSupport obsahují následující informace:

Podpora prohlížečů
Podpora verzí prohlížeče
Podpora operačního systému (platforma)
Podrobné informace o prostředí

Informování uživatele, že se nachází v nepodporovaném prohlížeči

Dále musíme tyto informace poskytnuté z volající sady SDK použít k informování uživatele o stavu jeho prostředí, pokud dojde k problému. Knihovna uživatelského rozhraní poskytuje tři různé komponenty, které slouží k tomuto účelu v závislosti na tom, o jaký problém se jedná.

UnsupportedOperatingSystem
UnsupportedBrowser
UnsupportedBrowserVersion

Začneme hostováním komponent knihovny uživatelského rozhraní v modálu FluentUI: Vytvoříme nový soubor s názvem , UnsupportedEnvironmentPrompts.tsx ve kterém vytvoříme různé výzvy:

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

Tyto výzvy pak můžeme zobrazit v komponentě kontroly prostředí. Vytvořte soubor s názvem EnvironmentChecksComponent.tsx , který obsahuje logiku pro zobrazení této výzvy: Tato komponenta má zpětné onTestsSuccessful volání, které může uživatele převést na další stránku aplikace.

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

Pak můžeme přidat do EnvironmentChecksComponentApp.tsx. Aplikace pak uživatele přesune do fáze Kontroly zařízení , jakmile bude test úspěšný pomocí zpětného onTestsSuccessful volání:

Teď naimportujeme novou komponentu do naší aplikace v App.tsx

import { EnvironmentChecksComponent } from './EnvironmentChecksComponent';

Pak pojďme aktualizovat komponentu App v 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>
  );
}

Teď můžete aplikaci spustit. Zkuste spustit v nepodporovaném prohlížeči a zobrazí se nepodporovaná výzva prohlížeče:

Gif se selháním kontroly prohlížeče

Další kroky

Část 2: Žádost o přístup ke kameře a mikrofonu

Sdílet prostřednictvím