Compartilhar via

Habilitar imagem embutida usando a Biblioteca de interface do usuário no Chat de Interoperabilidade do Teams

  • Artigo

Com o Chat de Interoperabilidade do Teams ("Chat de Interoperabilidade"), você pode permitir que os usuários do Serviços de Comunicação do Azure recebam imagens embutidas enviadas pelos usuários do Teams. Quando um editor de rich text está habilitado, os usuários dos Serviços de Comunicação do Azure podem enviar imagens embutidas aos usuários do Teams. Para saber mais, confira Casos de uso da Biblioteca de interface do usuário.

O recurso nos Serviços de Comunicação do Azure para receber imagens embutidas vem com a composição CallWithChat sem configuração extra. Para habilitar o recurso nos Serviços de Comunicação do Azure para enviar imagens embutidas, defina richTextEditor como true em CallWithChatCompositeOptions.

Importante

O recurso nos Serviços de Comunicação do Azure para enviar imagens embutidas está atualmente em versão prévia.

Versões prévias das APIs e dos SDKs são fornecidas sem um contrato de nível de serviço. É recomendável que você não as use para cargas de trabalho de produção. Alguns recursos podem não ter suporte ou talvez ter restrição de recursos.

Para saber mais, consulte os Termos de Uso Complementares das Versões Prévias do Microsoft Azure.

Código de download

Acesse o código deste tutorial no GitHub.

Pré-requisitos

Tela de fundo

Em primeiro lugar, o Chat de Interoperabilidade do Teams deve fazer parte de uma reunião do Teams no momento. Quando o usuário do Teams cria uma reunião online, uma conversa de chat é criada e associada à reunião. Para permitir que o usuário dos Serviços de Comunicação do Azure ingresse no chat e comece a enviar ou receber mensagens, um participante da reunião (um usuário do Teams) deve admiti-lo na chamada primeiro. Caso contrário, ele não tem acesso ao chat.

Depois que o usuário dos Serviços de Comunicação do Azure for admitido na chamada, ele pode começar a conversar com outros participantes na chamada. Neste tutorial, você aprenderá como funciona o recurso para enviar e receber imagens embutidas no Chat de Interoperabilidade.

Visão geral

Como você precisa ingressar em uma reunião do Teams primeiro, precisamos usar a composição do ChatWithChat da Biblioteca de interface do usuário.

Vamos seguir o exemplo básico da página do storybook para criar uma composição do ChatWithChat.

No código de exemplo, ele precisa de CallWithChatExampleProps, que é definido como o seguinte snippet 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;
};

Nenhuma configuração específica é necessária para habilitar o recebimento de imagens embutidas. Mas para enviar imagens embutidas, a função richTextEditor deve ser habilitada por meio de CallWithChatExampleProps. Aqui está um snippet de código sobre como habilitar isso:

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

Para iniciar a composição para o chat da reunião, você precisa passar TeamsMeetingLinkLocator, que é semelhante a:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Nenhuma outra configuração é necessária.

Executar o código

Vamos executar npm run start. Em seguida, você pode acessar o aplicativo de exemplo por meio de localhost:3000.

Captura de tela que mostra uma Biblioteca de interface do usuário dos Serviços de Comunicação do Azure.

Selecione o botão de chat localizado na parte inferior do painel para abrir o painel de chat. Agora, se um usuário do Teams enviar uma imagem, você deve ver algo semelhante à seguinte captura de tela.

Captura de tela que mostra a Biblioteca de interface do usuário dos Serviços de Comunicação do Azure recebendo duas imagens embutidas.

Quando o recurso para enviar imagens embutidas estiver habilitado, você deverá ver algo semelhante à captura de tela a seguir.

Captura de tela que mostra a Biblioteca de interface do usuário dos Serviços de Comunicação do Azure enviando duas imagens embutidas e editando mensagens.

Problemas conhecidos

  • A Biblioteca de interface do usuário pode não dar suporte a determinadas imagens GIF no momento. Em vez disso, o usuário pode receber uma imagem estática.
  • A Biblioteca de interface do usuário da Web não dá suporte a clipes (vídeos curtos) enviados por usuários do Teams no momento.
  • Para determinados dispositivos Android, só há suporte para colar uma única imagem quando você segura o editor de rich text e seleciona Colar. Talvez não haja suporte para a seleção no modo de exibição da área de transferência usando o teclado.

Próxima etapa

Verificar o restante da Biblioteca de interface do usuário

Talvez seja necessário também: