Komma igång med samtalsberedskap och användargränssnittsbiblioteket

Viktigt

Den här funktionen i Azure Communication Services är för närvarande i förhandsversion.

Förhandsversions-API:er och SDK:er tillhandahålls utan serviceavtal. Vi rekommenderar att du inte använder dem för produktionsarbetsbelastningar. Vissa funktioner kanske inte stöds eller också har de begränsade funktioner.

Mer information finns i Kompletterande användningsvillkor för Förhandsversioner av Microsoft Azure.

När en användare har för avsikt att ansluta till ett webbsamtal är deras primära fokus på den konversation de vill ha med de andra personen i samtalet – den här personen kan vara läkare, lärare, ekonomisk rådgivare eller vän. Själva konversationen kan utgöra tillräckligt med stress, för att inte tala om att navigera i processen för att se till att de och deras enheter är redo att ses och/eller höras. Det är viktigt att se till att enheten och klienten som de använder är redo för anropet

Det kan vara omöjligt att förutsäga alla problem eller kombinationer av problem som kan uppstå, men genom att använda den här självstudien kan du:

• Minska sannolikheten för problem som påverkar en användare under ett anrop
• Exponera bara ett problem om det kommer att påverka upplevelsen negativt
• Undvik att göra så att en användare söker efter en lösning. Erbjuda guidad hjälp för att lösa problemet

Relaterad till den här självstudien är Azure Communication Services diagnostikverktyget för nätverkstestning. Användare kan använda diagnostikverktyget för nätverkstestning för ytterligare felsökning i kundsupportscenarier.

Självstudiestruktur

I den här självstudien använder vi Azure Communication Services UI-bibliotek för att skapa en upplevelse som gör användaren redo att ansluta till ett samtal. Den här självstudien är strukturerad i tre delar:

• Del 1: Hämta användaren till en webbläsare som stöds
• Del 2: Se till att din app har åtkomst till mikrofonen och kameran
• Del 3: Låta användaren välja önskad mikrofon och kamera

Förutsättningar

• Visual Studio Code på någon av plattformarna som stöds.
• Node.js, Active LTS and Maintenance LTS-versioner (10.14.1 rekommenderas). node --version Använd kommandot för att kontrollera din version.

Ladda ned kod

Få åtkomst till den fullständiga koden för den här självstudien på GitHub.

Appstruktur

Användare har flera hinder att korsa när de ansluter ett samtal från webbläsarsupporten till att välja rätt kamera. I den här självstudien används React med Azure Communication Services UI-bibliotek för att skapa en app som utför kontroller av samtalsberedskap. Dessa kontroller vägleder användaren via webbläsarstöd, kamera- och mikrofonbehörigheter och slutligen enhetskonfiguration.

Användarflödet för appen är följande:

Din slutliga app uppmanar användaren till en webbläsare som stöds och åtkomst för kameran och mikrofonen och låter sedan användaren välja och förhandsgranska sina mikrofon- och kamerainställningar innan de ansluter till samtalet:

Konfigurera projektet

För att konfigurera React App använder vi mallen create-react-app för den här snabbstarten. Det här create-react-app kommandot skapar en enkel att köra TypeScript-app som drivs av React. Kommandot installerar Azure Communication Services npm-paket och FluentUI npm-paketet för att skapa avancerat användargränssnitt. Mer information om create-react-app finns i: Kom igång med 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

I slutet av den här processen bör du ha ett fullständigt program i mappen ui-library-call-readiness-app. I den här snabbstarten ändrar vi filerna i src mappen.

Installera paket

Eftersom den här funktionen är i offentlig förhandsversion måste du använda betaversionerna av Azure Communication Services npm-paket. npm install Använd kommandot för att installera följande paket:

# 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

Anteckning

Om du installerar kommunikationspaketen i en befintlig app @azure/communication-react stöder det för närvarande inte React v18. Om du vill nedgradera till React v17 eller mindre följer du dessa instruktioner.

Inledande appkonfiguration

För att komma igång ersätter vi standardinnehållet App.tsx create-react-app med en grundläggande konfiguration som:

• Registrerar nödvändiga ikoner som vi använder i den här självstudien
• Anger en temaprovider som kan användas för att ange ett anpassat tema
• Skapa en StatefulCallClient med en provider som ger underordnade komponenter åtkomst till anropsklienten

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

Kör Skapa React app

Nu ska vi testa konfigurationen genom att köra:

# Run the React App
npm start

När appen körs besöker http://localhost:3000 du i webbläsaren för att se din app som körs. Du bör se en grön bockmarkering med ett Test Complete meddelande.

Nästa steg

Del 1: Webbläsarsupport