Aktivera infogad avbildning med hjälp av användargränssnittsbiblioteket i Teams Interoperability Chat

Artikel
04/20/2024

I en Teams Interoperability Chat ("Interop Chat") kan vi göra det möjligt för slutanvändare i Azure Communication Service att ta emot infogade bilder som skickas av Teams-användare. För närvarande kan slutanvändaren av Azure Communication Service endast ta emot infogade avbildningar från Teams-användaren. Mer information finns i Användningsfall för användargränssnittsbibliotek.

Viktigt!

Den infogade avbildningsfunktionen levereras med CallWithChat Composite utan ytterligare installationer.

Ladda ned kod

Få åtkomst till koden för den här självstudien på GitHub.

Förutsättningar

Ett Azure-konto med en aktiv prenumeration. Mer information finns i Skapa ett konto kostnadsfritt.
Visual Studio Code på någon av plattformarna som stöds.
Node.js, Active LTS- och Maintenance LTS-versioner. node --version Använd kommandot för att kontrollera din version.
En aktiv Communication Services-resurs och anslutningssträng. Skapa en Communication Services-resurs.
Använda användargränssnittsbiblioteket version 1.15.0 eller den senaste.
Skapa ett Teams-möte och möteslänken klar.
Var bekant med hur ChatWithChat Composite fungerar.

Bakgrund

Först och främst måste vi förstå att Teams Interop Chat måste ingå i ett Teams-möte för närvarande. När Teams-användaren skapar ett onlinemöte skapas en chatttråd och associeras med mötet. För att göra det möjligt för Azure Communication Service-slutanvändaren att ansluta till chatten och börja skicka/ta emot meddelanden måste en mötesdeltagare (en Teams-användare) först ta emot dem till samtalet. Annars har de inte åtkomst till chatten.

När slutanvändaren av Azure Communication Service har antagits till samtalet kan de börja chatta med andra deltagare i samtalet. I den här självstudien tittar vi på hur infogad avbildning fungerar i Interop-chatt.

Översikt

Eftersom vi måste ansluta till ett Teams-möte först måste vi använda ChatWithChat Composite från användargränssnittsbiblioteket.

Låt oss följa det grundläggande exemplet från storybook-sidan för att skapa en ChatWithChat Composite.

Från exempelkoden behöver CallWithChatExamplePropsden , som definieras som följande kodfragment:

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

För att kunna starta kompositen för möteschatten måste vi skicka TeamsMeetingLinkLocator, vilket ser ut så här:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Detta är allt du behöver – och det finns ingen annan konfiguration som krävs för att aktivera infogad avbildning specifikt.

Kör koden

Nu ska vi köra npm run start så att du kan komma åt vår exempelapp via localhost:3000 följande skärmbild:

Skärmbild av ett UI-bibliotek för Azure Communication Services.

Klicka bara på chattknappen längst ned för att visa chattpanelen och om Teams-användaren nu skickar en bild bör du se något som liknar följande skärmbild:

Skärmbild av Azure Communication Services UI-bibliotek som tar emot två infogade avbildningar.

Observera att i en Teams Interop Chat stöder vi för närvarande endast slutanvändare av Azure Communication Service för att ta emot infogade bilder som skickas av Teams-användaren. Mer information om vilka funktioner som stöds finns i användningsfallen för användargränssnittsbiblioteket

Kända problem

Användargränssnittsbiblioteket kanske inte stöder vissa GIF-bilder just nu. Användaren kan få en statisk avbildning i stället.
Webbgränssnittsbiblioteket stöder inte klipp (korta videor) som skickas av Teams-användarna just nu.

Nästa steg

Kontrollera resten av användargränssnittsbiblioteket

Du kanske också vill:

Share via