Visão geral da biblioteca da interface do usuário

A Biblioteca da Interface do Usuário facilita a criação de experiências de usuário de comunicações modernas usando os Serviços de Comunicação do Azure. Ele oferece uma biblioteca de componentes de interface do usuário prontos para produção que você pode inserir em seus aplicativos:

Nota

Para obter documentação detalhada sobre a Biblioteca da Interface do Usuário da Web, visite o Storybook da Biblioteca da Interface do Usuário da Web. Lá você encontrará documentação conceitual adicional, guias de início rápido e exemplos.

  • Compósitos. Estes componentes são soluções chave-na-mão que implementam cenários de comunicação comuns. Você pode adicionar rapidamente experiências de chamada de vídeo ou bate-papo (atualmente disponível apenas na Biblioteca da Interface do Usuário da Web) aos seus aplicativos. Os compósitos são componentes de código aberto de ordem superior criados usando componentes da interface do usuário.

  • Componentes da interface do usuário. Esses componentes são blocos de construção de código aberto que permitem criar uma experiência de comunicação personalizada. Os componentes são oferecidos para recursos de chamada e bate-papo que podem ser combinados para criar experiências.

Todas essas bibliotecas de cliente de interface do usuário usam a linguagem de design e os ativos Fluent da Microsoft. A interface do usuário Fluent fornece uma camada fundamental para a biblioteca da interface do usuário e é usada ativamente em todos os produtos da Microsoft.

Em conjunto com os componentes da interface do usuário, a Biblioteca da Interface do Usuário expõe uma biblioteca de cliente com monitoração de estado para chamadas e bate-papo. Este cliente é agnóstico a qualquer estrutura de gestão de estado específica e pode ser integrado com gestores de estado comuns como Redux ou React Context. Essa biblioteca de cliente com monitoração de estado pode ser usada com os componentes da interface do usuário para passar props e métodos para os componentes da interface do usuário renderizarem dados. Para obter mais informações, consulte Visão geral do cliente com monitoração de estado.

Nota

Os mesmos componentes e compósitos oferecidos na Biblioteca da Interface do Usuário estão disponíveis no Design Kit para Figma, para que você possa projetar e prototipar rapidamente suas experiências de chamada e bate-papo.

Visão geral dos compósitos

Compósitos são componentes de nível superior compostos por componentes de interface do usuário que fornecem soluções turn-key para cenários de comunicação comuns usando os Serviços de Comunicação do Azure. Os desenvolvedores podem facilmente instanciar o Composto usando um token de acesso dos Serviços de Comunicação do Azure e a configuração necessária atribuída para chamada ou bate-papo.

Composto Casos de Utilização
CallwithChatComposite Experimente combinar recursos de chamada e bate-papo para permitir que os usuários iniciem ou participem de uma chamada e thread de bate-papo. Na experiência, o usuário tem a capacidade de se comunicar usando voz e vídeo, e acesso a um rico tópico de bate-papo onde as mensagens podem ser trocadas entre os participantes. Inclui suporte para Teams Interop.
CallComposite Experiência de chamada que permite aos utilizadores iniciar ou participar numa chamada. Dentro da experiência, os usuários podem configurar seus dispositivos, participar da chamada com vídeo e ver outros participantes, incluindo aqueles participantes com ativação de vídeo. Para o Teams Interop, está incluída a funcionalidade de lobby para o usuário aguardar para ser admitido.
ChatComposite Experiência de bate-papo onde o usuário pode enviar e receber mensagens. Eventos de thread como digitação, leituras, participantes entrando e saindo são exibidos para o usuário como parte do thread de bate-papo.

Visão geral do componente da interface do usuário

Os componentes puros da interface do usuário podem ser usados para os desenvolvedores, para compor experiências de comunicação, desde a costura de blocos de vídeo em uma grade para mostrar participantes remotos até a organização de componentes para atender às especificações de seus aplicativos. Os componentes da interface do usuário suportam a personalização para dar aos componentes a sensação e a aparência certas para corresponder a uma marca e estilo de aplicativos.

Área Componente Description
Telefonar Layout da grade Componente de grade para organizar blocos de vídeo em uma grade NxN
Mosaico de vídeo Componente que exibe fluxo de vídeo quando disponível e um componente estático padrão quando não
Barra de controlo Contêiner para organizar DefaultButtons para se conectar a ações de chamada específicas, como silenciar ou compartilhar tela
Galeria de Vídeos Componente de galeria de vídeo chave-na-mão, que muda dinamicamente à medida que os participantes são adicionados
Teclado de discagem Componente para suportar entrada de número de telefone e tons DTMF
Chat Histórico de mensagens Contêiner que processa mensagens de bate-papo, mensagens do sistema e mensagens personalizadas
Caixa de Envio Componente de entrada de texto com um botão de envio discreto
Caixa de Envio Rich Text Componente de entrada de rich text com opções de formatação e um botão de envio discreto
Indicador de status da mensagem Componente de confirmação de leitura de vários estados para mostrar o estado da mensagem enviada
Indicador de digitação Componente de texto para renderizar os participantes que estão digitando ativamente em um thread
Comum Item do Participante Componente comum para renderizar um participante de chamada ou bate-papo, incluindo avatar e nome de exibição
Lista de Participantes Componente comum para renderizar uma chamada ou lista de participantes de bate-papo, incluindo avatar e nome de exibição

Instalando a biblioteca da interface do usuário da Web

Os clientes com estado são encontrados como parte do @azure/communication-react pacote.

npm i --save @azure/communication-react

Qual artefato da interface do usuário é melhor para meu projeto?

Compreender estes requisitos ajuda-o a escolher a biblioteca de cliente certa:

  • Quanta personalização você deseja? As bibliotecas de cliente principal do Azure Communication não têm uma experiência do usuário e são projetadas para que você possa criar a experiência do usuário que quiser. Os componentes da biblioteca da interface do usuário fornecem ativos da interface do usuário ao custo de personalização reduzida.
  • Quais plataformas você está segmentando? Plataformas diferentes têm capacidades diferentes.

Os detalhes sobre a disponibilidade de recursos na Biblioteca da Interface do Usuário estão disponíveis aqui, mas as principais compensações são resumidas na tabela a seguir.

Biblioteca de cliente / SDK Complexidade da implementação Capacidade de personalização Telefonar Chat Interoperabilidade de Equipas
Componentes Compósitos Baixo Baixo
Componentes de base Médio Médio
Bibliotecas de cliente principais Alto Alto

Os compósitos são soluções chave-na-mão que implementam cenários de comunicação comuns. Você pode adicionar experiências de chamada de vídeo aos seus aplicativos. Os compósitos são componentes de código aberto de ordem superior que os desenvolvedores podem aproveitar para reduzir o tempo de desenvolvimento e a complexidade da engenharia.

Visão geral dos compósitos

Composto Casos de Utilização
CallComposite Experiência de chamada que permite aos utilizadores iniciar ou participar numa chamada. Dentro da experiência, os usuários podem configurar seus dispositivos, participar da chamada com vídeo e ver outros participantes, incluindo aqueles com vídeo ativado. Para a interoperabilidade do Teams, CallComposite inclui a funcionalidade de lobby para que os usuários possam esperar para serem admitidos.
ChatComposite O ChatComposite traz uma experiência de mensagens de texto em tempo real para os usuários. Especificamente, os usuários podem enviar e receber uma mensagem de bate-papo com eventos de indicadores de digitação e confirmação de leitura. Além disso, os usuários também podem receber mensagens do sistema, como participantes adicionados ou removidos e alterações no título do bate-papo.

Cenários compósitos para chamadas

Participar numa chamada de vídeo/áudio

Os usuários podem participar de uma chamada usando a URL da reunião do Teams ou podem configurar uma Chamada dos Serviços de Comunicação do Azure. Essa abordagem oferece uma experiência mais simples, assim como o aplicativo Teams.

A animação Gif mostra a experiência pré-reunião e a experiência de ingresso no Android.

Experiência pré-chamada

Como participante da chamada, você pode fornecer um nome e configurar uma configuração padrão para dispositivos de áudio e vídeo. Então você está pronto para entrar na chamada.

A captura de tela mostra a experiência pré-reunião, uma página com uma mensagem para o participante.

Experiência de chamada

O composto de chamada fornece uma experiência de ponta a ponta, otimiza o tempo de desenvolvimento e se concentra no layout limpo.

A captura de tela mostra a experiência da reunião, com ícones ou vídeos dos participantes.

A experiência de chamada fornece todos esses recursos em um componente composto, fornecendo um caminho claro sem código complexo, o que leva a um tempo de desenvolvimento mais rápido.

Qualidade e segurança

Os compósitos móveis para chamadas são inicializados usando tokens de acesso dos Serviços de Comunicação do Azure.

Mais detalhes

Se precisar de mais detalhes sobre compósitos móveis para chamadas, consulte Casos de uso.

Cenários compósitos para chat

Importante

Esta funcionalidade dos Serviços de Comunicação do Azure está atualmente em pré-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 podem ter recursos restritos.

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

Experiência de bate-papo

O ChatComposite oferece experiências de mensagens de texto em tempo real. Com a flexibilidade e escalabilidade em mente, o ChatComposite pode se adaptar a diferentes layouts ou visualizações de seus aplicativos sem complexidade. Você também pode optar por não exibir a ChatComposite visualização e receber notificações apenas para atender às diferentes necessidades da sua empresa.

iOS Android
A animação Gif mostra a experiência de bate-papo no iOS. A animação Gif mostra a experiência de bate-papo no Android.

Qualidade e segurança

Semelhante ao CallComposite, o ChatComposite também utiliza tokens de acesso dos Serviços de Comunicação do Azure. Para garantir que apenas usuários com permissão apropriada possam acessar o bate-papo, seus tokens de usuário precisam ser adicionados a um tópico de bate-papo válido antes de iniciar a experiência de bate-papo.

Mais detalhes

Se precisar de mais detalhes sobre compósitos móveis para bate-papo, consulte Casos de uso.

Qual artefato da interface do usuário é melhor para meu projeto?

Estes requisitos ajudam-no a escolher a biblioteca de cliente certa:

  • Quanta personalização você deseja? As bibliotecas de cliente principais dos Serviços de Comunicação do Azure não têm uma experiência do usuário e são projetadas para que você possa criar a experiência do usuário que quiser. Os componentes da biblioteca da interface do usuário fornecem ativos da interface do usuário ao custo de personalização reduzida.

  • Quais plataformas você está segmentando? Plataformas diferentes têm capacidades diferentes.

Aqui estão algumas compensações importantes:

Biblioteca de cliente / SDK Complexidade da implementação Capacidade de personalização Telefonar Chat Interoperabilidade das equipas
Componentes Compósitos Baixo Baixo
Bibliotecas de cliente principais Alto Alto

Para obter mais informações sobre a disponibilidade de recursos na Biblioteca da Interface do Usuário, consulte Casos de uso da Biblioteca da Interface do Usuário.

Problemas conhecidos