Beágyazott képtámogatás hozzáadása a Teams interop csevegésben

A Teams együttműködési csevegésével vagy az Interop-csevegéssel engedélyezheti az Azure Communication Services felhasználói számára, hogy a Teams-felhasználók által küldött beágyazott rendszerképeket fogadják. Ha engedélyezi a részletes szövegszerkesztőt, az Azure Communication Services felhasználói beágyazott képeket küldhetnek a Teams-felhasználóknak. További információ: Felhasználói felületi kódtár használati esetei.

Az Azure Communication Servicesben a sorba ágyazott képek fogadásának funkciója további beállítás nélkül tartalmazza az CallWithChat összetevőt. Az Azure Communication Servicesben a funkció beágyazott képek küldéséhez történő engedélyezéséhez állítsa a richTextEditor értékét true értékre CallWithChatCompositeOptions alatt.

Important

Az Azure Communication Services beágyazott képek küldésére szolgáló funkciója jelenleg előzetes verzióban érhető el.

Az előzetes verziójú API-k és SDK-k szolgáltatásszintű szerződés nélkül érhetők el. Javasoljuk, hogy éles számítási feladatokhoz ne használja őket. Előfordulhat, hogy egyes funkciók nem támogatottak, vagy a képességek korlátozottak lehetnek.

További információkért tekintse át a Microsoft Azure Előzetes verzió kiegészítő használati feltételeit.

Kód letöltése

Az oktatóanyag kódjának eléréséhez tekintse meg a GitHub Azure Samples felhasználói felületi kódtár – Teams Interop Chat című cikkét.

Prerequisites

  • Egy Azure-fiók, aktív előfizetéssel. További részletekért lásd : Fiók létrehozása ingyenesen.
  • Visual Studio Code az egyik támogatott platformon.
  • Node.js, aktív hosszú távú támogatás (LTS) és karbantartási LTS-verziók. node --version A parancs használatával ellenőrizze a verziót.
  • Aktív Azure Communication Services erőforrás és kapcsolati karakterlánc. További információ: Azure Communication Services-erőforrás létrehozása.
  • A felhasználói felületi kódtár 1.15.0-s vagy a beágyazott képek fogadásának legújabb verziója. A felhasználói felületi kódtár 1.19.0-beta.1-es vagy legújabb bétaverziójának használatával küldhet beágyazott képeket.
  • Létrehoztak egy Teams-értekezletet, és elkészült a találkozó linkje.
  • A ChatWithChat összetett működésének ismerete.

Background

A Teams Interop Chatnak egy meglévő Teams-értekezlet részét kell képeznie. Amikor a Teams-felhasználó létrehoz egy online értekezletet, létrejön egy csevegési szál, és hozzá lesz rendelve az értekezlethez. Ahhoz, hogy az Azure Communication Services-végfelhasználó csatlakozhasson a csevegéshez, és megkezdhesse az üzenetek küldését/fogadását, az értekezlet résztvevőinek (egy Teams-felhasználónak) először be kell fogadnia őket a hívásba. Ellenkező esetben nem férnek hozzá a csevegéshez.

Miután az Azure Communication Services-végfelhasználót beengedték a hívásba, elkezdhetnek csevegni a hívás többi résztvevőjével. Ez a cikk bemutatja, hogyan működik a beágyazott képmegosztás a Teams Interop csevegésben.

Overview

Mivel először egy Teams-értekezlethez kell csatlakoznia, használja a ChatWithChat felhasználói felületi kódtárból származó összetettet.

Kompozit létrehozásához kövesse a példát a ChatWithChat.

A mintakódhoz a következő kódrészletként definiált kódrészletre van szükség CallWithChatExampleProps:

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

Nincs szükség konkrét beállításra a beágyazott rendszerképek fogadásának engedélyezéséhez. Beágyazott képek küldéséhez azonban a richTextEditor függvényt engedélyezni kell.CallWithChatExampleProps Az alábbiakban egy kódrészletet talál az engedélyezéséről:

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

Ahhoz, hogy elindítsa az összetett értekezlet-csevegést, át kell adnia TeamsMeetingLinkLocator, amely a következő formában van:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Nincs szükség más beállításra.

A kód futtatása

Futtassuk npm run start. Ezután elérheti a mintaalkalmazást a következőn keresztül localhost:3000: .

Képernyőkép az Azure Communication Services felhasználói felületi kódtárról.

A csevegőablak megnyitásához válassza a panel alján található csevegés gombot. Most, ha egy Teams-felhasználó küld egy képet, az alábbi képernyőképhez hasonlót kell látnia.

Képernyőkép arról, hogy az Azure Communication Services felhasználói felületi kódtára két beágyazott rendszerképet fogad.

Ha engedélyezve van a beágyazott képek küldésére szolgáló funkció, az alábbi képernyőképhez hasonlót kell látnia.

Képernyőkép arról, hogy az Azure Communication Services felhasználói felületi kódtára két beágyazott képet küld és üzeneteket szerkeszt.

Ismert problémák

  • Előfordulhat, hogy a felhasználói felületi kódtár jelenleg nem támogat bizonyos GIF-képeket. Előfordulhat, hogy a felhasználó ehelyett statikus képet kap.
  • A webes felhasználói felületi kódtár jelenleg nem támogatja a Teams-felhasználók által küldött klipeket (rövid videókat).
  • Bizonyos Android-eszközök esetében csak akkor támogatott egyetlen kép beillesztése, ha lenyomva tartja a rich text szerkesztőt, és válassza a Beillesztés lehetőséget. Előfordulhat, hogy a vágólap nézetből a billentyűzettel való kijelölés nem támogatott.

Következő lépés

A felhasználói felületi kódtár többi részének ellenőrzése

  • Last updated on