Introduzione alla preparazione alle chiamate e alla libreria dell'interfaccia utente

Quando un utente intende partecipare a una chiamata Web, l'attenzione principale è la conversazione che vuole avere con le altre persone sulla chiamata: questo utente può essere un medico, insegnante, consulente finanziario o amico. La conversazione in sé può essere già stressante, oltre al dover assicurarsi che loro e i loro dispositivi siano pronti per essere visti e/o ascoltati. È fondamentale assicurarsi che il dispositivo e il client in uso siano pronti per la chiamata

Può essere impossibile prevedere ogni problema o combinazione di problemi che possono verificarsi, ma applicando questa esercitazione è possibile:

• Ridurre la probabilità di problemi che interessano un utente durante una chiamata
• Esporre un problema solo se influisce negativamente sull'esperienza
• Evita che un utente debba cercare una soluzione; Offri assistenza guidata per risolvere il problema

Correlato a questa esercitazione è lo strumento di diagnostica dei test di rete di Azure Communication Services. Gli utenti possono usare lo strumento di diagnostica dei test di rete per ulteriori operazioni di risoluzione dei problemi negli scenari di supporto clienti.

Struttura dell'esercitazione

In questa esercitazione si usa la libreria dell'interfaccia utente di Servizi di comunicazione di Azure per creare un'esperienza che consente all'utente di partecipare a una chiamata. Questa esercitazione è strutturata in tre parti:

• Parte 1: Guidare l'utente su un browser supportato
• Parte 2: Garantire che l'app abbia accesso al microfono e alla fotocamera
• Parte 3: Fare in modo che l'utente selezioni il microfono e la fotocamera desiderati

Prerequisiti

• Visual Studio Code in una delle piattaforme supportate.
• Node.js, versioni Active LTS e Maintenance LTS (10.14.1 consigliata). Usare il comando node --version per controllare la versione in uso.

Scaricare il codice

Accedere al codice completo per questa esercitazione su GitHub.

Struttura dell'app

Gli utenti hanno diversi ostacoli da attraversare quando si partecipa a una chiamata dal supporto del browser per selezionare la fotocamera corretta. Questa esercitazione usa React con la libreria dell'interfaccia utente di Servizi di comunicazione di Azure per creare un'app che esegue i controlli di conformità delle chiamate. Questi controlli guidano l'utente tramite il supporto del browser, le autorizzazioni della fotocamera e del microfono e infine la configurazione del dispositivo.

Il flusso utente dell'app è il seguente:

L'app finale richiede all'utente un browser supportato e l'accesso per la fotocamera e il microfono, quindi consentire all'utente di scegliere e visualizzare in anteprima le impostazioni del microfono e della fotocamera prima di partecipare alla chiamata:

Configurare il progetto

Per creare un'app React, usiamo vite. Si tratta di uno strumento di compilazione che mira a offrire un'esperienza di sviluppo più rapida e snella per i progetti Web moderni. Per altre informazioni, vite vedere Creare un'app React da zero e Introduzione a Vite

Si noti che la libreria dell'interfaccia utente del servizio di comunicazione di Azure supporta solo React 18. Verificare di essere nella versione supportata dopo aver creato l'app react controllando package.json. Per questa guida introduttiva si modificano i file all'interno della cartella src.

Installare pacchetti

Poiché questa funzionalità è disponibile in anteprima pubblica, è necessario usare le versioni beta dei pacchetti npm di Servizi di comunicazione di Azure. Usare il npm install comando per installare questi pacchetti:

# 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

Configurazione iniziale dell'app

Per iniziare, sostituiamo il contenuto predefinito App.tsx con una configurazione di base che:

• Registra le icone necessarie usate in questa esercitazione
• Imposta un provider di temi che può essere usato per impostare un tema personalizzato
• Creare un oggetto StatefulCallClient con un provider che fornisce ai componenti figlio l'accesso al client di chiamata

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

Eseguire l'app React

Per testare la configurazione, eseguire:

# Run the React App
npm run dev

Quando l'app è in esecuzione, visita http://localhost:3000 nel browser per visualizzare l'app in esecuzione. Verrà visualizzato un segno di spunta verde con un Test Complete messaggio.

Passaggi successivi