Začínáme s připraveností na volání a knihovnou uživatelského rozhraní

Článek
06/01/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.

Tok uživatele připojujícího se k hovoru z odkazu e-mailu

Když se uživatel chce připojit k webovému hovoru, zaměřuje se hlavně na konverzaci s dalšími osobami, které se v hovoru můžou účastnit – může to být lékař, učitel, finanční poradce nebo přítel. Samotná konverzace může znamenat dostatek stresu, natož procházení procesu, aby se ujistili, že jsou oni a jejich zařízení připravení být vidět nebo slyšet. Je důležité zajistit, aby zařízení a klient, které používají, byly připravené na volání.

Může být nemožné předpovědět všechny problémy nebo kombinaci problémů, které mohou nastat, ale pomocí tohoto kurzu můžete:

Snížení pravděpodobnosti problémů ovlivňujících uživatele během hovoru
Zveřejnění problému pouze v případě, že bude mít negativní vliv na prostředí
Vyhněte se vyhledávání uživatelů na řešení. Nabídnout pomoc s průvodcem k řešení tohoto problému

K tomuto kurzu se vztahuje nástroj Azure Communication Services Network Testing Diagnostic Tool. K dalšímu řešení potíží ve scénářích zákaznické podpory můžou uživatelé použít nástroj pro diagnostiku testování sítě.

Tutorial – struktura

V tomto kurzu použijeme knihovnu uživatelského rozhraní Azure Communication Services k vytvoření prostředí, které uživatele připraví na připojení k hovoru. Tento kurz je strukturovaný do tří částí:

Část 1: Jak uživatele dostat do podporovaného prohlížeče
Část 2: Zajištění přístupu aplikace k mikrofonu a kameře
Část 3: Nastavení požadovaného mikrofonu a kamery uživatelem

Požadavky

Visual Studio Code na jedné z podporovaných platforem
Node.jsverze , Active LTS a Údržba LTS (doporučuje se verze 10.14.1). node --version Ke kontrole verze použijte příkaz .

Stažení kódu

Získejte přístup k úplnému kódu pro tento kurz na GitHubu.

Struktura aplikace

Uživatelé musí při připojování k hovoru z podpory prohlížeče až po výběr správné kamery překračovat několik překážek. Tento kurz používá React s knihovnou uživatelského rozhraní Azure Communication Services k vytvoření aplikace, která provádí kontroly připravenosti na volání. Tyto kontroly provedou uživatele podporou prohlížeče, oprávněními ke kameře a mikrofonem a nakonec nastavením zařízení.

Tok aplikace pro uživatele je následující:

tokový diagram znázorňující tok uživatele ukázkou připravenosti na volání

Konečná aplikace vyzve uživatele k připojení k podporovanému prohlížeči a přístupu ke kameře a mikrofonu a pak uživateli umožní zvolit a zobrazit náhled nastavení mikrofonu a kamery:

Gif znázorňující kompletní prostředí kontrol připravenosti volání a nastavení zařízení

Nastavení projektu

K nastavení aplikace React použijeme pro účely tohoto rychlého startu šablonu create-react-app. Tento create-react-app příkaz vytvoří snadnou aplikaci TypeScriptu na základě React. Příkaz nainstaluje Azure Communication Services balíčky npm a balíček Npm FluentUI pro vytvoření rozšířeného uživatelského rozhraní. Další informace o příkazu create-react-app najdete v tématu Začínáme s 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

Na konci tohoto procesu byste měli mít úplnou aplikaci ve složce ui-library-call-readiness-app. Pro účely tohoto rychlého startu upravíme soubory ve src složce .

Instalace balíčků

Vzhledem k tomu, že je tato funkce ve verzi Public Preview, musíte používat beta verze balíčků npm Azure Communication Services. Pomocí příkazu npm install nainstalujte tyto balíčky:

# 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

Poznámka

Pokud instalujete komunikační balíčky do existující aplikace, @azure/communication-react nástroj aktuálně nepodporuje React v18. Pokud chcete downgradovat na React verze 17 nebo méně, postupujte podle těchto pokynů.

Počáteční nastavení aplikace

Abychom mohli začít, nahradíme výchozí App.tsx obsah create-react-app základním nastavením, které:

Zaregistruje potřebné ikony, které používáme v tomto kurzu.
Nastaví zprostředkovatele motivu, který se dá použít k nastavení vlastního motivu.
Vytvořte s poskytovatelem StatefulCallClient , který dává podřízeným komponentám přístup k volajícímu klientovi.

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

Spuštění příkazu Vytvořit aplikaci React

Pojďme naše nastavení otestovat spuštěním příkazu:

# Run the React App
npm start

Po spuštění aplikace přejděte http://localhost:3000 do prohlížeče a podívejte se na spuštěnou aplikaci. U zprávy by se měla zobrazit zelená značka Test Complete zaškrtnutí.

Další kroky

Část 1: Podpora prohlížeče

Sdílet prostřednictvím