Включение встроенного образа с помощью библиотеки пользовательского интерфейса в чате взаимодействия Teams

Статья
11/07/2024

С помощью чата взаимодействия Teams ("Чат взаимодействия"), вы можете включить Службы коммуникации Azure пользователей получать встроенные образы, отправленные пользователями Teams. Если редактор форматированного текста включен, Службы коммуникации Azure пользователи могут отправлять встроенные изображения пользователям Teams. Дополнительные сведения см. в вариантах использования библиотеки пользовательского интерфейса.

Функция в Службы коммуникации Azure для получения встроенных образов поставляется с CallWithChat составным без дополнительной настройки. Чтобы включить функцию в Службы коммуникации Azure для отправки встроенных образов, установите richTextEditor значение true в разделе CallWithChatCompositeOptions.

Внимание

Функция в Службы коммуникации Azure для отправки встроенных образов в настоящее время находится в предварительной версии.

Предварительные версии API и пакеты SDK предоставляются без соглашения об уровне обслуживания. Рекомендуется не использовать их для рабочих нагрузок. Некоторые функции могут не поддерживаться или могут иметь ограниченные возможности.

Дополнительные сведения см . в дополнительных условиях использования для предварительных версий Microsoft Azure.

Скачать код

Доступ к коду для этого руководства на сайте GitHub.

Необходимые компоненты

Учетная запись Azure с активной подпиской. Дополнительные сведения см. на странице Создайте бесплатную учетную запись Azure уже сегодня.
Visual Studio Code на одной из поддерживаемых платформ.
Node.js, версии LTS для активной долгосрочной поддержки и обслуживания. Используйте команду node --version, чтобы проверить установленную версию.
Активный ресурс Служб коммуникации Azure и строка подключения. Дополнительные сведения см. в кратком руководстве по созданию ресурсов Служб коммуникации и управлению ими.
Библиотека пользовательского интерфейса версии 1.15.0 или последняя версия для получения встроенных образов. Используйте библиотеку пользовательского интерфейса версии 1.19.0-beta.1 или последнюю бета-версию для отправки встроенных образов.
Собрание Teams, созданное и готовое к собранию.
Знакомство с работой составной работы ChatWithChat.

Общие сведения

Прежде всего, чат взаимодействия Teams должен быть частью собрания Teams в настоящее время. Когда пользователь Teams создает онлайн-собрание, создается поток чата и связан с собранием. Чтобы разрешить пользователю Службы коммуникации Azure присоединиться к чату и начать отправлять или получать сообщения, участник собрания (пользователь Teams) должен сначала признать его на звонок. В противном случае у них нет доступа к чату.

После того, как пользователь Службы коммуникации Azure признался в вызове, он может начать чаты с другими участниками по вызову. В этом руководстве вы узнаете, как функция отправки и получения встроенных образов работает в чате взаимодействия.

Обзор

Так как сначала необходимо присоединиться к собранию Teams, необходимо использовать составной ChatWithChat из библиотеки пользовательского интерфейса.

Давайте рассмотрим базовый пример на странице книги , чтобы создать составной элемент ChatWithChat .

В примере кода он требуется 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;
};

Для получения встроенных образов не требуется никакой настройки. Но для отправки встроенных изображений richTextEditor функция должна быть включена через CallWithChatExampleProps. Ниже приведен фрагмент кода о том, как включить его:

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

Чтобы запустить составной для чата на собраниях, необходимо передать TeamsMeetingLinkLocatorследующее:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Другая настройка не требуется.

Выполнение кода

Давайте запустите npm run start. Затем вы можете получить доступ к примеру приложения с помощью localhost:3000.

Снимок экрана: библиотека пользовательского интерфейса Службы коммуникации Azure.

Нажмите кнопку чата, расположенную в нижней части области, чтобы открыть панель чата. Теперь, если пользователь Teams отправляет изображение, вы увидите примерно следующее снимок экрана.

Снимок экрана: Службы коммуникации Azure библиотека пользовательского интерфейса, получающая два встроенных изображения.

Если функция отправки встроенных изображений включена, вы увидите примерно следующее снимок экрана.

Снимок экрана: Службы коммуникации Azure библиотека пользовательского интерфейса, отправляющая два встроенных изображения и сообщения редактирования.

Известные проблемы

Библиотека пользовательского интерфейса может не поддерживать некоторые изображения GIF в настоящее время. Вместо этого пользователь может получить статическое изображение.
Библиотека веб-пользовательского интерфейса не поддерживает клипы (короткие видео), отправленные пользователями Teams в настоящее время.
Для некоторых устройств Android вставка одного изображения поддерживается только при удержании редактора форматированного текста и нажатии кнопки "Вставка". Выбор из представления буфера обмена с помощью клавиатуры может не поддерживаться.

Следующий шаг

Проверка остальной части библиотеки пользовательского интерфейса

Кроме того, вам может понадобиться следующее:

Поделиться через