Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Com o Chat de Interoperabilidade do Teams, ou Interop Chat, 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 aos usuários do Teams. Para obter mais informações, consulte 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.
Important
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. Talvez não haja suporte para alguns recursos, ou os recursos podem ser limitados.
Para saber mais, consulte os Termos de Uso Complementares das Versões Prévias do Microsoft Azure.
Código de download
Para acessar o código deste tutorial, confira o artigo de Exemplos do Azure no GitHub Biblioteca de IU - Chat de Interoperação do Teams.
Prerequisites
- Uma conta do Azure com uma assinatura ativa. Para obter detalhes, confira Criar uma conta gratuitamente.
- Visual Studio Code em uma das plataformas compatíveis.
-
Node.js, versões de LTS (Suporte de Longo Prazo) Ativo e LTS de Manutenção. Use o comando
node --versionpara verificar sua versão. - Um recurso e uma cadeia de conexão ativos dos Serviços de Comunicação do Azure. Para obter mais informações, confira Criar um recurso dos Serviços de Comunicação do Azure.
- A versão da Biblioteca de interface do usuário 1.15.0 ou a versão mais recente para receber imagens embutidas. Use a biblioteca de 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 como o ChatWithChat composite funciona.
Background
O Chat de Interoperabilidade do Teams deve fazer parte de uma reunião existente do Teams. Quando o usuário do Teams cria uma reunião online, uma conversa de chat é criada e associada à reunião. Para habilitar o usuário final dos Serviços de Comunicação do Azure ingressando no chat e começando a enviar/receber mensagens, um participante da reunião (um usuário do Teams) precisa admiti-los na chamada primeiro. Caso contrário, eles não têm 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 funciona o compartilhamento de imagens embutidas no chat de Interoperabilidade do Teams.
Overview
Como você precisa ingressar em uma reunião do Teams primeiro, use a composição ChatWithChat da Biblioteca de IU.
Para criar uma ChatWithChat composição, siga o exemplo no tutorial CallWithChatComposite.
No código de exemplo, é necessário 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.
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.
Quando o recurso para enviar imagens embutidas estiver habilitado, você deverá ver algo semelhante à captura de tela a seguir.
Problemas conhecidos
- A Biblioteca de interface do usuário pode não dar suporte a determinadas imagens GIF no momento. 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
Artigos relacionados
- Verificar casos de uso da Biblioteca de IU
- Adicionar o chat ao seu aplicativo
- Criar tokens de acesso para o usuário
- Saber mais sobre a arquitetura cliente e servidor
- Aprender sobre autenticação
- Adicionar o compartilhamento de arquivos com a Biblioteca de Interface do Usuário no Chat dos Serviços de Comunicação do Azure
- Adicionar compartilhamento de arquivos com a Biblioteca de interface do usuário no Chat de Interoperabilidade do Teams