Estendere l'esperienza di chiamata

È possibile usare l'esperienza preconfezionata Appuntamenti virtuali creata tramite la prenotazione di appuntamenti virtuali di Microsoft Teams o tramite l'API per appuntamenti virtuali di Microsoft Graph per consentire agli utenti di partecipare a un'esperienza di appuntamenti virtuali ospitata da Microsoft. Se si dispone di Microsoft Teams Premium, è possibile personalizzare ulteriormente l'esperienza tramite il Tema riunione, che consente di scegliere immagini, logo e colori da usare in tutta l'esperienza. Servizi di comunicazione di Azure può essere utile a sviluppatori che vogliono ospitare la soluzione autonomamente o personalizzare l'esperienza.

Servizi di comunicazione di Azure offre tre opzioni di personalizzazione:

• Personalizzare l'interfaccia utente tramite compositi pronti all’uso dell'interfaccia utente.
• Creare un layout personalizzato usando componenti e compositi della libreria dell'interfaccia utente.
• Creare un'interfaccia utente personalizzata con kit di sviluppo software

Prerequisiti

Si prevede che il lettore di questo articolo possieda già una conoscenza di base degli argomenti seguenti:

• Servizi di comunicazione di Azure Chat, Chiamate e libreria dell’interfaccia utente

Compositi dell'interfaccia utente personalizzabili pronti all'uso

È possibile integrare compositi per riunioni pronti all'uso forniti dalla libreria dell'interfaccia utente del servizio di comunicazione di Azure. Questo composito fornisce componenti React preconfezionati che possono essere integrati nell'applicazione Web. Per altre informazioni sull'uso di questo composito con framework Web diversi, vedere qui.

1. In primo luogo, specificare i dettagli sull'utente dell'applicazione. A tale scopo, creare argomenti dell'adapter di chiamata di comunicazione di Azure per contenere informazioni sull'ID utente, sul token di accesso, sul nome visualizzato e sull'URL della riunione di Teams.

const callAdapterArgs = {
        userId: new CommunicationUserIdentifier(<USER_ID>'),
        displayName: “Adele Vance”,
        credential: new AzureCommunicationTokenCredential('<TOKEN>'),
        locator: { meetingLink: '<TEAMS_MEETING_URL>'},
        endpoint: '<AZURE_COMMUNICATION_SERVICE_ENDPOINT_URL>';
}

2. Creare un hook React personalizzato con useAzureCommunicationCallAdapter per creare un adapter di chiamata.

const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);

3. Restituisce il componente React CallComposite che offre un'esperienza di riunione.

return (
  <div>
    <CallWithChatComposite
      adapter={callAdapter}
    />
  </div>
);

È possibile personalizzare ulteriormente l'interfaccia utente con il proprio tema per la personalizzazione e il marchio o ottimizzare il layout per desktop o dispositivi mobili. Se si vuole personalizzare ulteriormente il layout, è possibile utilizzare componenti dell'interfaccia utente preesistenti, come descritto nella sezione successiva.

Creare un layout personalizzato con componenti dell'interfaccia utente

La libreria dell'interfaccia utente di Servizi di comunicazione di Azure consente di accedere a singoli componenti per personalizzare l'interfaccia utente e il suo comportamento. L'immagine seguente evidenzia i singoli componenti disponibili per l'uso.

La tabella seguente illustra in dettaglio i singoli componenti:

È anche possibile personalizzare l'esperienza di chat. L'immagine seguente evidenzia i singoli componenti della chat.

Nella tabella seguente vengono fornite descrizioni con collegamenti a singoli componenti

Si esaminerà come usare il componente Barra di controllo per visualizzare solo i pulsanti della fotocamera e del microfono in questo ordine e le azioni di controllo eseguite dopo la selezione di tali pulsanti.

export const AllButtonsControlBarExample: () => JSX.Element = () => {
  return (
    <FluentThemeProvider>
      <ControlBar layout={'horizontal'}>
        <CameraButton
          onClick={() => {  /*handle onClick*/ }}
        />
        <MicrophoneButton
          onClick={() => {  /*handle onClick*/ }}
        />
      </ControlBar>
    </FluentThemeProvider>
)}

Per una maggiore personalizzazione, è possibile aggiungere altri pulsanti predefiniti e modificare il colore, le icone o l'ordine. Se si dispone di componenti dell'interfaccia utente esistenti che si desidera usare o si vuole avere un maggiore controllo sull'esperienza, è possibile usare i kit di sviluppo software (SDK) sottostanti per creare un'interfaccia utente personalizzata.

Creare un'interfaccia utente personalizzata con kit di sviluppo software

Servizi di comunicazione di Azure offre SDK di chat e chiamata per creare esperienze di appuntamenti virtuali. L'esperienza è costituita da tre parti principali, l’autenticazione, la chiamata e la chat. Sono disponibili campioni dedicati di QuickStarts e GitHub per ogni esempio, ma gli esempi di codice seguenti illustrano come abilitare l'esperienza. L'autenticazione dell'utente richiede che sia creato o selezionato un utente di Servizi di comunicazione di Azure esistente e che sia rilasciato un token. È possibile usare una stringa di connessione per creare CommunicationIdentityClient. È consigliabile implementare questa logica nel back-end, poiché la condivisione della stringa di connessione con i client non è sicura.

var client = new CommunicationIdentityClient(connectionString);

Creare un utente di Servizi di comunicazione di Azure associato alla risorsa di Servizi di comunicazione di Azure con il metodo CreateUserAsync.

var identityResponse = await client.CreateUserAsync();
var identity = identityResponse.Value;

Rilasciare il token di accesso associato all'utente di Servizi di comunicazione di Azure con ambito di chat e chiamata.

var tokenResponse = await client.GetTokenAsync(identity, scopes: new [] { CommunicationTokenScope.VoIP, CommunicationTokenScope.Chat  });
var token =  tokenResponse.Value.Token;

A questo punto, si dispone di un utente di Servizi di comunicazione di Azure e un token assegnato a tale utente validi. È ora possibile integrare l'esperienza di chiamata. Questa parte viene implementata sul lato client e per questo esempio si presuppone che le proprietà vengano propagate al client dal back-end. L'esercitazione seguente illustra come eseguire questa operazione. Creare prima un CallClient che avvia l'SDK e concedere l'accesso a CallAgent e gestione dispositivi.

const callClient = new CallClient(); 
Create CallAgent from the client and define the display name of the user.
tokenCredential = new AzureCommunicationTokenCredential(token);
callAgent = await callClient.createCallAgent(tokenCredential, {displayName: 'Adele Vance'})

Unirsi alla riunione di Microsoft Teams associata all'appuntamento virtuale in base all'URL della riunione di Teams.

var meetingLocator = new TeamsMeetingLinkLocator("<TEAMS_MEETING_URL>");
callAgent.join(meetingLocator , new JoinCallOptions());

Questi passaggi consentono di unirsi alla riunione di Teams. È quindi possibile estendere questi passaggi con gestione degli altoparlanti, del microfono, della fotocamera e dei singoli flussi video. Facoltativamente, è anche possibile integrare la chat nell'esperienza di appuntamento virtuale.

Creare un ChatClient che avvia l'SDK e consente di accedere a notifiche e a ChatThreadClient.

const chatClient = new ChatClient(
    endpointUrl,
    new AzureCommunicationTokenCredential(token)
  );

Sottoscrivere per ricevere notifiche di chat in tempo reale per l'utente di Servizi di comunicazione di Azure.

await chatClient.startRealtimeNotifications();

Sottoscrivere a un evento quando il messaggio viene ricevuto.

// subscribe to new message notifications
chatClient.on("chatMessageReceived", (e) => { /*Render message*/})

Creare ChatThreadClient per avviare il client per operazioni correlate a un thread di chat specifico.

chatThreadClient = await chatClient.getChatThreadClient(threadIdInput.value);

Inviare un messaggio di chat nella chat della riunione di Teams associata all'appuntamento virtuale.

let sendMessageRequest = { content: 'Hello world!' };
let sendMessageOptions = { senderDisplayName : 'Adele Vance' };
let sendChatMessageResult = await chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions);

Con tutte e tre queste fasi, si dispone di un utente che può partecipare a appuntamenti virtuali con audio, video, condivisione dello schermo e chat. Questo approccio offre il controllo completo sull'interfaccia utente e sul comportamento di singole azioni.

Passaggi successivi

• Informazioni sulle opzioni di estendibilità disponibili per Appuntamenti virtuali.
• Informazioni su come personalizzare prima e dopo l'appuntamento
• Informazioni su come personalizzare l'esperienza pre-chiamata
• Informazioni su come personalizzare l'esperienza di chiamata