Abilitare l'immagine inline usando la libreria dell'interfaccia utente in Chat di interoperabilità di Teams

Con Teams Interoperability Chat ("Interop Chat"), è possibile consentire agli utenti di Servizi di comunicazione di Azure di ricevere immagini inline inviate dagli utenti di Teams. Quando un editor di testo RTF è abilitato, Servizi di comunicazione di Azure gli utenti possono inviare immagini inline agli utenti di Teams. Per altre informazioni, vedere Casi d'uso della libreria dell'interfaccia utente.

La funzionalità in Servizi di comunicazione di Azure per la ricezione di immagini inline viene fornita con il CallWithChat composito senza una configurazione aggiuntiva. Per abilitare la funzionalità in Servizi di comunicazione di Azure per l'invio di immagini inline, impostare su richTextEditor true in CallWithChatCompositeOptions.

Scaricare il codice

Per questa esercitazione accedere al codice su GitHub.

Prerequisiti

• Un account Azure con una sottoscrizione attiva. Per informazioni dettagliate vedere Creare un account gratuito.
• Visual Studio Code in una delle piattaforme supportate.
• Node.js, versioni LTS (Active Long-Term Support) e Maintenance LTS. Usare il comando node --version per controllare la versione in uso.
• Risorsa Servizi di comunicazione di Azure attiva e stringa di connessione. Per altre informazioni, vedere Creare una risorsa Servizi di comunicazione di Azure.
• Libreria dell'interfaccia utente versione 1.15.0 o la versione più recente per la ricezione di immagini inline. Usare la libreria dell'interfaccia utente versione 1.19.0-beta.1 o la versione beta più recente per l'invio di immagini inline.
• Una riunione di Teams creata e il collegamento alla riunione pronto.
• Familiarità con il funzionamento del composito ChatWithChat.

Background

Prima di tutto, La chat di interoperabilità di Teams deve far parte di una riunione di Teams attualmente. Quando l'utente di Teams crea una riunione online, viene creato un thread di chat e associato alla riunione. Per consentire all'utente Servizi di comunicazione di Azure di partecipare alla chat e iniziare a inviare o ricevere messaggi, un partecipante alla riunione (un utente di Teams) deve ammettere prima di tutto la chiamata. In caso contrario, non ha accesso alla chat.

Dopo che l'utente Servizi di comunicazione di Azure è ammesso alla chiamata, può iniziare a chattare con altri partecipanti alla chiamata. In questa esercitazione si apprenderà come funziona la funzionalità per l'invio e la ricezione di immagini inline in Chat di interoperabilità.

Panoramica

Poiché è prima necessario partecipare a una riunione di Teams, è necessario usare il ChatWithChat composito dalla libreria dell'interfaccia utente.

Per creare un ChatWithChat composito, seguire l'esempio di base della pagina dello storybook.

Dal codice di esempio è richiesto CallWithChatExampleProps, definito come nel frammento di codice seguente:

export type CallWithChatExampleProps = {
  // Props needed for the construction of the CallWithChatAdapter
  userId: CommunicationUserIdentifier;
  token: string;
  displayName: string;
  endpointUrl: string;
  locator: TeamsMeetingLinkLocator | CallAndChatLocator;

  // Props to customize the CallWithChatComposite experience
  fluentTheme?: PartialTheme | Theme;
  compositeOptions?: CallWithChatCompositeOptions;
  callInvitationURL?: string;
};

Non è necessaria alcuna configurazione specifica per abilitare la ricezione di immagini inline. Tuttavia, per inviare immagini inline, la richTextEditor funzione deve essere abilitata tramite CallWithChatExampleProps. Ecco un frammento di codice su come abilitarlo:

<CallWithChatExperience
  // ...any other call with chat props
  compositeOptions={{ richTextEditor: true }}
/>

Per avviare la composizione per la chat di riunione, è necessario passare TeamsMeetingLinkLocator, che ha un aspetto simile al seguente:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Non sono necessarie altre configurazioni.

Eseguire il codice

npm run startEseguire . È quindi possibile accedere all'app di esempio tramite localhost:3000.

Selezionare il pulsante chat nella parte inferiore del riquadro per aprire il riquadro della chat. Ora, se un utente di Teams invia un'immagine, verrà visualizzata una schermata simile alla seguente.

Quando la funzionalità per l'invio di immagini inline è abilitata, verrà visualizzata una schermata simile alla seguente.

Problemi noti

• La libreria dell'interfaccia utente potrebbe non supportare alcune immagini GIF in questo momento. L'utente potrebbe invece ricevere un'immagine statica.
• La libreria dell'interfaccia utente Web non supporta le clip (brevi video) inviate dagli utenti di Teams in questo momento.
• Per determinati dispositivi Android, incollando una singola immagine è supportata solo quando si tiene premuto l'editor di testo RTF e si seleziona Incolla. La selezione dalla visualizzazione Degli Appunti tramite la tastiera potrebbe non essere supportata.

Passaggio successivo

È anche possibile:

• Controllare i casi d'uso della libreria dell'interfaccia utente
• Aggiungere una chat all'app
• Creare token di accesso utente
• Informazioni sull'architettura client e server
• Informazioni sull'autenticazione
• Aggiungere la condivisione di file con la libreria dell'interfaccia utente in Servizi di comunicazione di Azure Chat
• Aggiungere la condivisione di file con la libreria dell'interfaccia utente in Chat di interoperabilità di Teams