Partilhar via

Adicionar suporte a imagens embutidas no chat de interoperabilidade do Teams

Com o Chat de Interoperabilidade do Teams, ou Chat de Interoperabilidade, você pode permitir que os usuários dos Serviços de Comunicação do Azure recebam imagens embutidas enviadas por usuários do Teams. Quando você habilita um editor de rich text, os usuários dos Serviços de Comunicação do Azure podem enviar imagens embutidas para usuários do Teams. Para obter mais informações, consulte Casos de uso da biblioteca da interface do usuário.

O recurso nos Serviços de Comunicação do Azure para receber imagens embutidas é fornecido com o CallWithChat composto sem necessidade de configuração adicional. Para habilitar o recurso nos Serviços de Comunicação do Azure para enviar imagens inline, defina richTextEditor como true em CallWithChatCompositeOptions.

Important

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

As APIs e SDKs de visualização são fornecidos sem um contrato de nível de serviço. Recomendamos que você não os use para cargas de trabalho de produção. Alguns recursos podem não ser suportados ou os recursos podem ser limitados.

Para obter mais informações, consulte Termos de Utilização Suplementares para Pré-visualizações do Microsoft Azure.

Transferir código

Para acessar o código deste tutorial, consulte o artigo Biblioteca da interface do usuário do GitHub Azure Samples - Teams Interop Chat.

Prerequisites

  • Uma conta do Azure com uma subscrição ativa. Para obter detalhes, consulte Criar uma conta gratuitamente.
  • Visual Studio Code numa das plataformas suportadas.
  • Node.jsversões , Ative Long-Term Support (LTS) e Maintenance LTS. Use o node --version comando para verificar sua versão.
  • Um recurso ativo dos Serviços de Comunicação do Azure e uma cadeia de conexão. Para obter mais informações, consulte Criar um recurso dos Serviços de Comunicação do Azure.
  • Biblioteca da interface do usuário versão 1.15.0 ou a versão mais recente para receber imagens embutidas. Use a biblioteca da interface do usuário versão 1.19.0-beta.1 ou a versão beta mais recente para enviar imagens embutidas.
  • Uma reunião do Teams criada e o link da reunião pronto.
  • Uma familiaridade com o funcionamento do composto ChatWithChat .

Background

O Teams Interop Chat necessita fazer parte de uma reunião existente do Teams. Quando o usuário do Teams cria uma reunião online, um thread de bate-papo é criado e associado à reunião. Para permitir que o usuário final dos Serviços de Comunicação do Azure ingresse no chat e comece a enviar/receber mensagens, um participante da reunião (um usuário do Teams) precisa admiti-los à chamada primeiro. Caso contrário, eles não terão acesso ao chat.

Depois que o usuário final dos Serviços de Comunicação do Azure for admitido na chamada, ele poderá começar a conversar com outros participantes na chamada. Este artigo descreve como a partilha de imagens em linha funciona no chat de interoperabilidade do Teams.

Overview

Como tens de participar primeiro numa reunião do Teams, utiliza o ChatWithChat componente da Biblioteca de Interface do Utilizador.

Para criar um ChatWithChat composto, consulte o exemplo no tutorial do CallWithChatComposite.

A partir do código de exemplo, ele precisa de CallWithChatExampleProps, que é definido como o seguinte trecho 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 permitir o recebimento de imagens em linha. Mas para enviar imagens embutidas, a função deve ser ativada através do richTextEditorCallWithChatExampleProps. Aqui está um trecho de código sobre como habilitá-lo:

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

Para iniciar o módulo de chat da reunião, é necessário passar TeamsMeetingLinkLocator, que se apresenta da seguinte forma:

{ "meetingLink": "<TEAMS_MEETING_LINK>" }

Nenhuma outra configuração é necessária.

Executar o código

Vamos correr npm run start. Em seguida, você pode acessar o aplicativo de exemplo via localhost:3000.

Captura de ecrã que mostra a Biblioteca de IU 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ê verá algo como a captura de tela a seguir.

Captura de ecrã que mostra a Biblioteca de IU dos Serviços de Comunicação do Azure a receber duas imagens embutidas.

Quando o recurso para enviar imagens embutidas estiver ativado, você verá algo como a captura de tela a seguir.

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

Problemas conhecidos

  • A Biblioteca da Interface do Usuário pode não suportar determinadas imagens GIF no momento. Em vez disso, o usuário pode receber uma imagem estática.
  • A biblioteca da interface do usuário da Web não suporta clipes (vídeos curtos) enviados por usuários do Teams no momento.
  • Para determinados dispositivos Android, a colagem de uma única imagem é suportada apenas quando você mantém pressionado o editor de rich text e seleciona Colar. A seleção na vista da área de transferência utilizando o teclado poderá não ser suportada.

Próximo passo

Verifique o resto da biblioteca da interface do usuário

  • Last updated on