Erste Schritte mit der Vorbereitung auf Anrufe und der Benutzeroberflächenbibliothek

Artikel
06/09/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.

Flow eines Benutzenden, der über einen E-Mail-Link an einem Anruf teilnimmt

Wenn ein Benutzender an einem Webanruf teilnehmen möchte, liegt sein Hauptaugenmerk auf der Unterhaltung, die er mit der/den anderen Person(en) im Gespräch führen möchte ( diese Person kann ein Arzt bzw. eine Ärztin, ein Lehrer bzw. eine Lehrerin, ein Finanzberater bzw. eine Finanzberaterin oder ein Freund bzw. eine Freundin sein). Die Unterhaltung selbst kann genug Stress darstellen, ganz zu schweigen von der Navigation im Prozess, um sicherzustellen, dass sie und ihre Geräte bereit sind, gesehen und/oder gehört zu werden. Es ist wichtig sicherzustellen, dass das verwendete Gerät und der Client für den Anruf bereit sind.

Es mag unmöglich sein, alle Probleme oder Kombinationen von Problemen vorherzusagen, die auftreten können, aber mit Hilfe dieses Tutorials können Sie Folgendes tun:

Verringern der Wahrscheinlichkeit von Problemen, die sich auf einen Benutzenden während eines Anrufs auswirken
Verfügbarmachen eines Problems nur, wenn es sich negativ auf die Benutzererfahrung auswirkt
Vermeiden, dass ein Benutzender nach einer Lösung sucht; Anbieten von geführter Hilfe zum Beheben des Problems

Dieses Tutorial bezieht sich auf das Azure Communication Services-Diagnosetool für Netzwerktests. Benutzende können das Diagnosetool für Netzwerktests für weitere Problembehandlungen in Kundensupportszenarien verwenden.

Struktur des Tutorials

In diesem Tutorial verwenden wir die Benutzeroberflächenbibliothek von Azure Communication Services, um eine Umgebung zu erstellen, die Benutzenden auf die Teilnahme an einem Anruf vorbereitet. Dieses Tutorial ist in drei Teile unterteilt:

Voraussetzungen

Visual Studio Code auf einer der unterstützten Plattformen
Node.js: Active LTS- und Maintenance LTS-Versionen (Empfehlung: 10.14.1). Verwenden Sie den Befehl node --version, um Ihre Version zu überprüfen.

Code herunterladen

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

App-Struktur

Benutzende müssen mehrere Hürden überwinden, wenn sie an einem Anruf teilnehmen, von der Browserunterstützung zur Auswahl der richtigen Kamera. In diesem Tutorial wird React mit der Benutzeroberflächenbibliothek von Azure Communication Services verwendet, um eine App zu erstellen, die Anrufbereitschaftsprüfungen durchführt. Diese Überprüfungen führen den Benutzenden durch Browserunterstützung, Kamera- und Mikrofonberechtigungen und schließlich durch die Geräteeinrichtung.

Der Benutzerflow der App lautet wie folgt:

Flowdiagramm, das den Benutzerfluss durch das Beispiel für die Anrufbereitschaft zeigt

Ihre endgültige App fordert die Benutzenden zu einem unterstützten Browser und Zugriff auf die Kamera und das Mikrofon auf. Anschließend können die Benutzenden ihre Mikrofon- und Kameraeinstellungen auswählen und in der Vorschau anzeigen, bevor sie an dem Anruf teilnehmen:

GIF-Datei, die den gesamten Ablauf der Prüfung der Anrufbereitschaft und der Einrichtung des Geräts zeigt

Einrichten des Projekts

Für diese Schnellstartanleitung verwenden wir zum Einrichten der React-App die Vorlage „create-react-app“. Dieser Befehl create-react-app erstellt eine einfach auszuführende TypeScript-App, die von React unterstützt wird. Der Befehl installiert die Azure Communication Services-npm-Pakete und das FluentUI-npm-Paket zum Erstellen einer erweiterten Benutzeroberfläche. Weitere Informationen zu „create-react-app“ finden Sie unter Erste Schritte mit 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

Am Ende dieses Prozesses sollten Sie über eine vollständige Anwendung im Ordner ui-library-call-readiness-app verfügen. In dieser Schnellstartanleitung werden Dateien im Ordner src geändert.

Installieren von Paketen

Da sich dieses Feature in der öffentlichen Vorschau befindet, müssen Sie die Betaversionen der Azure Communication Services-npm-Pakete verwenden. Verwenden Sie den Befehl npm install, um diese Pakete zu installieren:

# 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

Hinweis

Wenn Sie die Kommunikationspakete in einer vorhandenen App installieren, wird React v18 von @azure/communication-react derzeit nicht unterstützt. Führen Sie diese Anweisungen aus, um ein Downgrade auf React v17 oder weniger durchzuführen.

Anfängliches App-Setup

Um den Einstieg zu erleichtern, ersetzen wir den Inhalt der Standard-App.tsx von „create-react-app“ durch ein grundlegendes Setup, das folgendes vorgibt:

Registriert die erforderlichen Symbole, die wir in diesem Tutorial verwenden
Legt einen Designanbieter fest, der zum Festlegen eines benutzerdefinierten Designs verwendet werden kann
Erstellen einer StatefulCallClient mit einem Anbieter, der untergeordneten Komponenten Zugriff auf den Anrufclient gewährt

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

Ausführen der React-App für die Erstellung

Wir testen unser Setup, indem wir Folgendes ausführen:

# Run the React App
npm start

Nachdem die App ausgeführt wird, besuchen Sie http://localhost:3000 in Ihrem Browser, um die ausgeführte App anzuzeigen. Es sollte ein grünes Häkchen mit einer Nachricht Test Complete angezeigt werden.

Nächste Schritte

Teil 1: Browserunterstützung

Freigeben über