Włączanie wbudowanego obrazu przy użyciu biblioteki interfejsu użytkownika w aplikacji Teams Interoperability Chat

Artykuł
04/20/2024

W aplikacji Teams Interoperability Chat ("Interop Chat") możemy umożliwić użytkownikom końcowym usługi Azure Communication Service odbieranie wbudowanych obrazów wysyłanych przez użytkowników usługi Teams. Obecnie użytkownik końcowy usługi Azure Communication Service może odbierać tylko obrazy wbudowane od użytkownika usługi Teams. Aby dowiedzieć się więcej, zapoznaj się z tematem Przypadki użycia biblioteki interfejsu użytkownika.

Ważne

Wbudowana funkcja obrazu jest dostarczana z funkcją CallWithChat Composite bez dodatkowych konfiguracji.

Pobieranie kodu

Uzyskaj dostęp do kodu tego samouczka w witrynie GitHub.

Wymagania wstępne

Konto platformy Azure z aktywną subskrypcją. Aby uzyskać szczegółowe informacje, zobacz Tworzenie bezpłatnego konta.
Program Visual Studio Code na jednej z obsługiwanych platform.
Node.js, wersje Active LTS i Maintenance LTS. Użyj polecenia , node --version aby sprawdzić wersję.
Aktywny zasób usług komunikacyjnych i parametry połączenia. Utwórz zasób usług komunikacyjnych.
Korzystając z biblioteki interfejsu użytkownika w wersji 1.15.0 lub najnowszej.
Utwórz spotkanie usługi Teams i przygotuj link do spotkania.
Zapoznaj się ze sposobem działania aplikacji ChatWithChat Composite .

Tło

Przede wszystkim musimy zrozumieć, że obecnie czat interop usługi Teams musi być częścią spotkania usługi Teams. Gdy użytkownik usługi Teams utworzy spotkanie online, zostanie utworzony i skojarzony z nim wątek czatu. Aby umożliwić użytkownikowi końcowemu usługi Azure Communication Service dołączanie do czatu i rozpoczynanie wysyłania/odbierania wiadomości, uczestnik spotkania (użytkownik usługi Teams) musi najpierw przyznać mu połączenie. W przeciwnym razie nie mają dostępu do czatu.

Gdy użytkownik końcowy usługi Azure Communication Service zostanie przyjęty do połączenia, będzie mógł rozpocząć rozmowę z innymi uczestnikami połączenia. W tym samouczku dowiesz się, jak działa wbudowany obraz w rozmowie międzyoperacyjnej.

Omówienie

Jak wspomniano wcześniej, ponieważ musimy najpierw dołączyć do spotkania usługi Teams, musimy użyć aplikacji ChatWithChat Composite z biblioteki interfejsu użytkownika.

Użyjmy podstawowego przykładu ze strony storybook, aby utworzyć plik ChatWithChat Composite.

W przykładowym kodzie potrzebny CallWithChatExamplePropsjest element , który jest zdefiniowany jako następujący fragment kodu:

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

Aby móc uruchomić złożony czat na spotkanie, musimy przekazać TeamsMeetingLinkLocatorelement , który wygląda następująco:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

To wszystko, czego potrzebujesz — i nie ma innej konfiguracji potrzebnej do włączenia wbudowanego obrazu specjalnie.

Uruchamianie kodu

Uruchommy npm run start polecenie , aby uzyskać dostęp do naszej przykładowej aplikacji za pośrednictwem localhost:3000 poniższego zrzutu ekranu:

Zrzut ekranu przedstawiający bibliotekę interfejsu użytkownika usług Azure Communication Services.

Po prostu kliknij przycisk czatu znajdujący się u dołu, aby wyświetlić panel czatu, a teraz, jeśli użytkownik usługi Teams wyśle obraz, powinien zostać wyświetlony podobny do poniższego zrzutu ekranu:

Zrzut ekranu przedstawiający bibliotekę interfejsu użytkownika usług Azure Communication Services odbierających dwa wbudowane obrazy.

Należy pamiętać, że w aplikacji Teams Interop Chat obecnie obsługujemy tylko użytkownika końcowego usługi Azure Communication Service w celu odbierania wbudowanych obrazów wysyłanych przez użytkownika usługi Teams. Aby dowiedzieć się więcej o obsługiwanych funkcjach, zapoznaj się z tematem Przypadki użycia biblioteki interfejsu użytkownika

Znane problemy

Biblioteka interfejsu użytkownika może nie obsługiwać niektórych obrazów GIF w tej chwili. Zamiast tego użytkownik może otrzymać obraz statyczny.
Biblioteka interfejsu użytkownika sieci Web nie obsługuje obecnie klipów (krótkich filmów wideo) wysyłanych przez użytkowników usługi Teams.

Następne kroki

Sprawdź pozostałą część biblioteki interfejsu użytkownika

Możesz również wykonać następujące czynności:

Udostępnij za pośrednictwem