Povolení vloženého obrázku pomocí knihovny uživatelského rozhraní v Chatu interoperability Teams

V chatu interoperability Teams ("Interop Chat") můžeme koncovým uživatelům služby Azure Communication Service povolit příjem vložených obrázků odesílaných uživateli Teams. Koncový uživatel služby Azure Communication Service v současné době může přijímat pouze vložené obrázky od uživatele Teams. Další informace najdete v tématu Případy použití knihovny uživatelského rozhraní.

Důležité

Funkce vloženého obrázku je dodávána s CallWithChat Composite bez dalších nastavení.

Stažení kódu

Získejte přístup k kódu pro tento kurz na GitHubu.

Požadavky

• Účet Azure s aktivním předplatným. Podrobnosti najdete v tématu Vytvoření účtu zdarma.
• Visual Studio Code na jedné z podporovaných platforem
• Node.js, verze LTS a údržba LTS. node --version Pomocí příkazu zkontrolujte verzi.
• Aktivní prostředek služby Communication Services a připojovací řetězec. Vytvořte prostředek komunikační služby.
• Použití knihovny uživatelského rozhraní verze 1.15.0 nebo nejnovější.
• Vytvořte schůzku Teams a připravte odkaz na schůzku.
• Seznamte se s tím, jak ChatWithChat Composite funguje.

Pozadí

Nejprve musíme pochopit, že chat v Teams interop musí být součástí schůzky Teams v současné době. Když uživatel Teams vytvoří online schůzku, vytvoří se vlákno chatu a přidružuje se ke schůzce. Pokud chcete koncovému uživateli služby Azure Communication Service povolit připojení k chatu a začít posílat a přijímat zprávy, musí účastník schůzky (uživatel Teams) nejprve přijmout hovor. Jinak nemají přístup k chatu.

Jakmile koncový uživatel služby Azure Communication Service přijme hovor, bude moct začít chatovat s dalšími účastníky hovoru. V tomto kurzu se podíváme, jak funguje vložený obrázek v chatu spolupráce.

Přehled

Jak už jsme zmínili dříve, protože se musíme nejprve připojit ke schůzce Teams, musíme použít ChatWithChat Složený z knihovny uživatelského rozhraní.

Pojďme se pustit do základního příkladu ze stránky scénáře a vytvořit chatWithChat Composite.

Z ukázkového kódu potřebuje CallWithChatExampleProps, který je definován jako následující fragment kódu:

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

Abychom mohli zahájit složený chat pro schůzku, musíme předat TeamsMeetingLinkLocator, což vypadá takto:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

To je vše, co potřebujete – a k povolení vložené image není potřeba žádné další nastavení.

Spuštění kódu

Pojďme to spustit npm run start a pak byste měli mít přístup k naší ukázkové aplikaci pomocí localhost:3000 následujícího snímku obrazovky:

Jednoduše klikněte na tlačítko chatu umístěné v dolní části, aby se zobrazil panel chatu a když uživatel Teams pošle obrázek, měli byste vidět něco jako na následujícím snímku obrazovky:

Všimněte si, že v chatu Spolupráce v Teams momentálně podporujeme pouze koncového uživatele služby Azure Communication Service, abychom dostávali vložené obrázky odeslané uživatelem Teams. Další informace o podporovaných funkcích najdete v případech použití knihovny uživatelského rozhraní.

Známé problémy

• Knihovna uživatelského rozhraní nemusí v tuto chvíli podporovat určité obrázky GIF. Uživatel může místo toho obdržet statický obrázek.
• Knihovna webového uživatelského rozhraní v současnosti nepodporuje klipy (krátká videa) odesílaná uživateli Teams.

Další kroky

Kontrola zbytku knihovny uživatelského rozhraní

Můžete také chtít:

• Kontrola případů použití knihovny uživatelského rozhraní
• Přidání chatu do aplikace
• Vytváření přístupových tokenů uživatele
• Další informace o architektuře klienta a serveru
• Další informace o ověřování
• Přidání sdílení souborů pomocí knihovny uživatelského rozhraní v chatu služby Azure Communication Service
• Přidání sdílení souborů s knihovnou uživatelského rozhraní v Chatu spolupráce v Teams