Compartir a través de

Agregar compatibilidad con imágenes alineadas en el chat de interoperabilidad de Teams

Con el chat de interoperabilidad de Teams, chat de interoperabilidad, podemos permitir que los usuarios finales de Azure Communication Services reciban imágenes alineadas enviadas por los usuarios de Teams. Al habilitar un editor de texto enriquecido, los usuarios de Azure Communication Services pueden enviar imágenes insertadas a los usuarios de Teams. Para más información, consulte Casos de uso de la biblioteca de IU.

La característica de Azure Communication Services que permite recibir imágenes alineadas incluye el compuesto de CallWithChat sin configuración adicional. Para habilitar la característica en Azure Communication Services para enviar imágenes insertadas, configure richTextEditor como true dentro de CallWithChatCompositeOptions.

Importante

La característica de Azure Communication Services para enviar imágenes en línea está actualmente en versión preliminar.

Las API y los SDK en versión preliminar se proporcionan sin contrato de nivel de servicio. No se recomienda su uso para cargas de trabajo de producción. Es posible que algunas características no se admita o que las funcionalidades estén limitadas.

Para obtener más información, consulte Términos de uso complementarios para las Versiones preliminares de Microsoft Azure.

Descarga de código

Para acceder al código de este tutorial, consulte el artículo de GitHub Azure Samples UI Library - Teams Interop Chat.

Requisitos previos

Información previa

El chat de interoperabilidad de Teams debe integrarse en una reunión de Teams existente. Cuando el usuario de Teams crea una reunión en línea, se crea una conversación de chat y se asocia a la reunión. Para que el usuario final de Azure Communication Services pueda unirse al chat y comenzar a enviar o recibir mensajes, es necesario que un participante de la reunión (un usuario de Teams) lo admita primero en la llamada. De lo contrario, no tiene acceso al chat.

Una vez que el usuario final de Azure Communication Services es admitido en la llamada, puede empezar a chatear con otros participantes en la llamada. Este artículo describe cómo funciona el uso compartido de imágenes alineadas en el chat de interoperabilidad de Teams.

Información general

Dado que primero debe unirse a una reunión de Teams, use el compuesto de ChatWithChat de la biblioteca de interfaz de usuario.

Para crear una ChatWithChat composición, siga el ejemplo del tutorial CallWithChatComposite.

Desde el código de ejemplo, necesita CallWithChatExampleProps, que se define como el siguiente fragmento de código:

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

No se necesita ninguna configuración específica para habilitar la recepción de imágenes alineadas. Pero para enviar imágenes en línea, la función richTextEditor debe habilitarse a través de CallWithChatExampleProps. Este es un fragmento de código para habilitarla:

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

Para iniciar el compuesto del chat de reunión, debe pasar TeamsMeetingLinkLocator, que tiene este aspecto:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

No se requiere ninguna otra configuración.

Ejecución del código

Ejecutemos npm run start. Luego, puede acceder a la aplicación de ejemplo a través de localhost:3000.

Recorte de pantalla que muestra la biblioteca de interfaz de usuario de Azure Communication Services.

Seleccione el botón de chat ubicado en la parte inferior del panel para abrir el panel del chat. Ahora, si un usuario de Teams envía una imagen, debería ver algo parecido al recorte de pantalla siguiente.

Recorte de pantalla que muestra la biblioteca de interfaz de usuario de Azure Communication Services recibiendo dos imágenes insertadas.

Cuando la característica para enviar imágenes alineadas está habilitada, debería ver algo parecido al recorte de pantalla siguiente.

Recorte de pantalla que muestra la biblioteca de interfaz de usuario de Azure Communication Services enviando dos imágenes insertadas y editando mensajes.

Problemas conocidos

  • Es posible que la biblioteca de interfaz de usuario no admita ciertas imágenes GIF en este momento. El usuario podría recibir una imagen estática en su lugar.
  • La biblioteca de interfaz de usuario web no admite clips (vídeos cortos) enviados por los usuarios de Teams en este momento.
  • Para determinados dispositivos Android, el pegado de una sola imagen solo se admite cuando mantiene presionado el editor de texto enriquecido y selecciona Pegar. Es posible que no se admita la selección en la vista del Portapapeles con el teclado.

Paso siguiente

Consulte el resto de la biblioteca de interfaz de usuario