Włączanie wbudowanego obrazu przy użyciu biblioteki interfejsu użytkownika w czacie współdziałania usługi Teams

Artykuł
11/07/2024

W przypadku czatu współdziałania usługi Teams ("Czat międzyoperajowy"), można umożliwić użytkownikom usług Azure Communication Services odbieranie wbudowanych obrazów wysyłanych przez użytkowników usługi Teams. Po włączeniu edytora tekstu sformatowanego użytkownicy usług Azure Communication Services mogą wysyłać obrazy wbudowane do użytkowników usługi Teams. Aby dowiedzieć się więcej, zobacz Przypadki użycia biblioteki interfejsu użytkownika.

Funkcja w usługach Azure Communication Services na potrzeby odbierania obrazów wbudowanych jest dostarczana ze złożonym elementem bez dodatkowej CallWithChat konfiguracji. Aby włączyć funkcję w usługach Azure Communication Services na potrzeby wysyłania obrazów wbudowanych, ustaw wartość richTextEditor w true obszarze CallWithChatCompositeOptions.

Ważne

Funkcja w usługach Azure Communication Services do wysyłania obrazów wbudowanych jest obecnie dostępna w wersji zapoznawczej.

Interfejsy API i zestawy SDK w wersji zapoznawczej są udostępniane bez umowy dotyczącej poziomu usług. Zalecamy, aby nie używać ich w przypadku obciążeń produkcyjnych. Niektóre funkcje mogą nie być obsługiwane lub mogą mieć ograniczone możliwości.

Aby uzyskać więcej informacji, zapoznaj się z dodatkowymi warunkami użytkowania dla wersji zapoznawczych platformy Microsoft Azure.

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, aktywne długoterminowe wsparcie (LTS) i wersje LTS konserwacji. Użyj polecenia , node --version aby sprawdzić wersję.
Aktywny zasób usług Azure Communication Services i parametry połączenia. Aby uzyskać więcej informacji, zobacz Tworzenie zasobu usług Azure Communication Services.
Biblioteka interfejsu użytkownika w wersji 1.15.0 lub najnowszej wersji do odbierania obrazów wbudowanych. Użyj biblioteki interfejsu użytkownika w wersji 1.19.0-beta.1 lub najnowszej wersji beta do wysyłania obrazów wbudowanych.
Utworzone spotkanie usługi Teams i gotowy link do spotkania.
Znajomość sposobu działania złożonego chatWithChat.

Tło

Przede wszystkim czat interop usługi Teams musi być obecnie częścią spotkania usługi Teams. Gdy użytkownik usługi Teams utworzy spotkanie online, zostanie utworzony wątek czatu i skojarzony ze spotkaniem. Aby umożliwić użytkownikowi usług Azure Communication Services dołączenie do czatu i rozpoczęcie wysyłania lub odbierania wiadomości, uczestnik spotkania (użytkownik usługi Teams) musi najpierw przyznać je do połączenia. W przeciwnym razie nie mają dostępu do czatu.

Gdy użytkownik usług Azure Communication Services zostanie przyjęty do połączenia, może rozpocząć rozmowę z innymi uczestnikami połączenia. Z tego samouczka dowiesz się, jak działa funkcja wysyłania i odbierania obrazów wbudowanych w rozmowie międzyoperacyjnej.

Omówienie

Ponieważ musisz najpierw dołączyć do spotkania usługi Teams, musimy użyć złożonego z biblioteki interfejsu ChatWithChat użytkownika.

Przyjrzyjmy się podstawowemu przykładowi ze strony storybook, aby utworzyć ChatWithChat złożony element.

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

Do włączenia odbierania obrazów wbudowanych nie jest wymagana żadna określona konfiguracja. Jednak aby wysyłać obrazy wbudowane, richTextEditor funkcja musi być włączona za pomocą CallWithChatExamplePropspolecenia . Oto fragment kodu dotyczący sposobu jej włączania:

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

Aby rozpocząć złożony czat na spotkaniu, musisz przekazać TeamsMeetingLinkLocatorelement , który wygląda następująco:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Nie jest wymagana żadna inna konfiguracja.

Uruchamianie kodu

Uruchommy polecenie npm run start. Następnie możesz uzyskać dostęp do przykładowej aplikacji za pomocą polecenia localhost:3000.

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

Wybierz przycisk czatu znajdujący się w dolnej części okienka, aby otworzyć okienko czatu. Teraz, jeśli użytkownik usługi Teams wyśle obraz, powinien zostać wyświetlony obraz podobny do poniższego zrzutu ekranu.

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

Po włączeniu funkcji wysyłania obrazów wbudowanych powinna zostać wyświetlona zawartość podobna do poniższego zrzutu ekranu.

Zrzut ekranu przedstawiający bibliotekę interfejsu użytkownika usług Azure Communication Services wysyłającą dwa obrazy wbudowane i edytując komunikaty.

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.
W przypadku niektórych urządzeń z systemem Android wklejanie pojedynczego obrazu jest obsługiwane tylko w przypadku przytrzymania edytora tekstu sformatowanego i wybraniu pozycji Wklej. Wybranie z widoku schowka przy użyciu klawiatury może nie być obsługiwane.

Następny krok

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

Możesz również chcieć:

Udostępnij za pośrednictwem