Erste Schritte mit der Anrufbereitschaft und der Ui-Bibliothek

Wenn ein Benutzer einem Webanruf beitreten möchte, liegt sein Hauptfokus auf der Unterhaltung, die er mit den anderen Personen im Anruf haben möchte – diese Persona könnte ein Arzt, Lehrer, Finanzberater oder Freund sein. Die Unterhaltung selbst kann schon genug Stress verursachen, ganz zu schweigen davon, den Prozess zu bewältigen, 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 verwendete Client für den Anruf bereit ist.

Es kann unmöglich sein, jedes Problem oder jede Kombination von Problemen vorherzusagen, die auftreten können, aber indem Sie dieses Lernprogramm anwenden, können Sie:

• Verringern der Wahrscheinlichkeit von Problemen, die sich auf einen Benutzer während eines Anrufs auswirken
• Nur ein Problem ansprechen, wenn es sich negativ auf das Erlebnis auswirkt.
• Vermeiden Sie, dass ein Benutzer nach einer Lösung sucht; Anbieten einer geführten Hilfe zur Behebung des Problems

Im Zusammenhang mit diesem Tutorial steht das Azure Communication Services Network Testing Diagnostic Tool. Benutzer können das Netzwerktestdiagnosetool für weitere Problembehandlungen in Kundensupportszenarien verwenden.

Lernprogrammstruktur

In diesem Lernprogramm verwenden wir die Benutzeroberflächenbibliothek für Azure Communication Services, um eine Benutzeroberfläche zu erstellen, die den Benutzer für die Teilnahme an einem Anruf bereit macht. Dieses Lernprogramm ist in drei Teile strukturiert:

• Teil 1: Wie man den Benutzer zu einem unterstützten Browser führt
• Teil 2: Sicherstellen, dass Ihre App Zugriff auf das Mikrofon und die Kamera hat
• Teil 3: Auswählen des gewünschten Mikrofons und der Kamera durch den Benutzer

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 Lernprogramm wird React mit der Azure Communication Services UI Library verwendet, um eine App zu erstellen, die Anrufbereitschaftsprüfungen durchführt. Diese Prüfungen führen den Benutzer durch die Browserunterstützung, Kamera- und Mikrofonberechtigungen und schließlich die Geräteeinrichtung.

Der Benutzerfluss der App lautet wie folgt:

Ihre endgültige App fordert den Benutzer auf, einen unterstützten Browser zu öffnen und Zugriffsberechtigungen für Kamera und Mikrofon zu erteilen. Dann kann der Benutzer seine Mikrofon- und Kameraeinstellungen auswählen und in der Vorschau ansehen, bevor er dem Anruf beitritt.

Einrichten des Projekts

Zum Erstellen einer React-App verwenden wir vite. Es ist ein Buildtool, das eine schnellere und schlankere Entwicklungserfahrung für moderne Webprojekte bieten soll. Weitere Informationen finden vite Sie hier : Erstellen einer React-App von Grund auf und erste Schritte mit Vite

Beachten Sie, dass die Azure Communication Service UI-Bibliothek nur bis zu React 18 unterstützt. Vergewissern Sie sich, dass Sie nach dem Erstellen der React-Anwendung die unterstützte Version verwenden, indem Sie package.json überprüfen. Für diese Schnellstartanleitung ändern wir die Dateien innerhalb des src Ordners.

Installieren von Paketen

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

# Install Public Preview versions of the Azure Communication Services Libraries.
npm install @azure/communication-react@1.28.0-beta.1 @azure/communication-calling@1.36.3-beta.1

Anfängliches App-Setup

Um unseren Einstieg zu gestalten, ersetzen wir den Standardinhalt App.tsx durch ein grundlegendes Setup, das:

• Registriert die erforderlichen Symbole, die wir in diesem Lernprogramm 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>
  );
};

React-App ausführen

Testen wir unser Setup, indem wir Folgendes ausführen:

# Run the React App
npm run dev

Sobald die App ausgeführt wird, geben Sie http://localhost:3000 in Ihrem Browser ein, um Ihre laufende App zu sehen. Es sollte ein grünes Häkchen mit einer Nachricht Test Complete angezeigt werden.

Nächste Schritte