Casos de uso da biblioteca da interface do usuário

Use componentes e composição na Biblioteca de Interface do Usuário dos Serviços de Comunicação do Azure para criar experiências de chamada e chat em seus aplicativos.

Em uma composição, os recursos de chamada e chat são integrados diretamente e expostos quando você integra a composição a um aplicativo. Em um componente de interface do usuário, os recursos de chamada e chat são expostos por meio de uma combinação de funcionalidade de interface do usuário e bibliotecas com estado subjacentes. Para aproveitar ao máximo esses recursos, é recomendável usar os componentes da interface do usuário com a chamada com estado e as bibliotecas de cliente de chat.

Obtenha mais documentação conceitual, guias de início rápido e exemplos no storybook da Biblioteca de Interface do Usuário.

Casos de uso de chamada

Casos de uso de chat

*O suporte a envio de mensagens em rich text e anexos de arquivo e imagem em linha estão atualmente em versão preliminar pública. 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.

**O nome de exibição do evento de digitação do usuário do Teams pode não ser exibido corretamente.

Identidades com suporte

Para inicializar uma composição e se autenticar no serviço, um usuário precisa ter uma identidade dos Serviços de Comunicação do Azure. Para obter mais informações, confira Autenticar-se nos Serviços de Comunicação do Azure e Guia de início rápido: criar e gerenciar tokens de acesso.

Interoperabilidade do Teams

Para cenários de interoperabilidade do Teams, você pode usar composição da Biblioteca de Interface do Usuário para adicionar um usuário a uma reunião do Teams por meio dos Serviços de Comunicação do Azure. Para habilitar a interoperabilidade do Teams, use os recursos padrão na composição de chamada ou na composição de chat. Você também pode usar componentes de interface do usuário para criar uma experiência personalizada.

Ao adicionar chamadas e chat a um aplicativo, lembre-se de que o cliente de chat não pode ser inicializado até que o participante seja admitido na chamada. Depois que o participante for admitido, você poderá inicializar o cliente de chat para ingressar no thread de chat da reunião. O padrão é demonstrado na figura a seguir.

Se você usar componentes de interface do usuário para fornecer experiências de interoperabilidade do Teams, comece usando exemplos da Biblioteca de Interface do Usuário para criar partes-chave da experiência:

• Exemplo de lobby: um lobby de exemplo em que um participante pode esperar para ser admitido em uma chamada.
• Faixa de conformidade: uma faixa de exemplo que mostra o usuário se a chamada está sendo gravada.
• Tema do Teams: um tema de exemplo que faz com que os elementos da Biblioteca de Interface do Usuário se pareçam com o Microsoft Teams.
• Compartilhamento de imagem*: um exemplo que mostra como um usuário dos Serviços de Comunicação do Azure pode receber imagens enviadas pelo usuário do Teams.
• Compartilhamento de arquivos*: um exemplo que mostra como um usuário dos Serviços de Comunicação do Azure pode receber anexos de arquivo enviados pelo usuário do Teams.

Personalização

Use os padrões da biblioteca de interface do usuário para modificar componentes para corresponder à aparência do seu aplicativo. A personalização é uma diferença fundamental entre compostos e componentes de interface do usuário nos Serviços de Comunicação do Azure. Os compostos têm menos opções de personalização para uma experiência de integração mais simples.

A tabela a seguir compara composição e componentes de interface do usuário para casos de uso de personalização.

Observabilidade

A arquitetura de gerenciamento de estado da Biblioteca de Interface do Usuário é desacoplada, para que você possa acessar diretamente clientes de chat e de chamada com estado. Conecte-se ao cliente com estado para ler o estado, manipular eventos e substituir o comportamento para passar para os componentes da interface do usuário.

A tabela a seguir compara composição e componentes de interface do usuário para casos de uso de observabilidade.

Arquitetura recomendada

Inicialize um composto e componente de base usando um token de acesso dos Serviços de Comunicação do Azure. É importante obter tokens de acesso dos Serviços de Comunicação do Azure por meio de um serviço confiável que você gerencia. Para obter mais informações, confira Guia de início rápido: criar e gerenciar tokens de acesso e o tutorial de serviço confiável.

As bibliotecas de clientes de chamada e chat precisam ter o contexto da chamada em que ingressam. Dissemine o contexto para os clientes usando seu próprio serviço confiável. Por exemplo, use tokens de acesso do usuário.

A tabela a seguir resume as funções de inicialização e gerenciamento de recursos necessárias para adicionar contexto a uma biblioteca de clientes.

Suporte a plataforma

*Há suporte para a versão atual do Chrome e as duas versões anteriores.

**Há suporte para o Safari versão 13.1 e versões posteriores. Ainda não há suporte para vídeo de saída para o Safari no macOS, mas há suporte no iOS. Só há suporte para o compartilhamento de tela de saída no iOS desktop.

Acessibilidade

A acessibilidade por padrão é um princípio nos produtos da Microsoft. A biblioteca de interface do usuário segue esse princípio e todos os componentes de interface do usuário são totalmente acessíveis.

Localização

A localização é fundamental para criar produtos para usuários em todo o mundo que falam idiomas diferentes. A Biblioteca de Interface do Usuário fornece suporte padrão para alguns idiomas e recursos. Esse suporte inclui idiomas da direita para a esquerda. Você pode fornecer seus próprios arquivos de localização para usar com a Biblioteca de interface do usuário.

Problemas conhecidos

A Biblioteca de Interface do Usuário não dá suporte à atualização do tipo de mensagem ao editar mensagens existentes no momento. Adicionar formatação de rich text a uma mensagem existente adiciona estilo HTML ao conteúdo de texto. Como o tipo de mensagem não é alterado, o resultado pode ser o conteúdo HTML que aparece como texto sem formatação no thread da mensagem.

Use CallComposite e ChatComposite na Biblioteca de Interface do Usuário dos Serviços de Comunicação do Azure para criar experiências de chamada em seus aplicativos iOS e Android. Usando algumas linhas de código, você pode integrar facilmente ao aplicativo uma experiência de chamada e chat completa. As composição nos Serviços de Comunicação do Azure gerenciam todo o ciclo de vida da chamada e do chat, desde a configuração até o término da chamada e do chat.

Chamando casos de uso

Use a composição de chamada nos Serviços de Comunicação do Azure para criar esses casos de uso.

Integração de chamada

Esta seção discute a integração de chamadas.

Interoperabilidade do Teams

Para cenários de interoperabilidade do Teams, você pode usar composição da Biblioteca de Interface do Usuário para adicionar um usuário a uma reunião do Teams por meio dos Serviços de Comunicação do Azure. Para habilitar a interoperabilidade do Teams, use a composição de chamada. A composição gerencia todo o ciclo de vida de ingresso em uma chamada de interoperabilidade do Teams.

A figura a seguir mostra um exemplo da experiência do usuário antes de um chamador ser adicionado a uma reunião do Teams.

Integração de salas

Os Serviços de Comunicação do Azure fornecem um conceito de uma sala para desenvolvedores que estão criando conversas estruturadas, como compromissos virtuais ou eventos virtuais. Atualmente, as salas permitem chamadas de voz e vídeo.

Uma sala é um contêiner que gerencia a atividade entre usuários dos Serviços de Comunicação do Azure. Uma sala oferece aos desenvolvedores de aplicativos um melhor controle sobre quem pode ingressar em uma chamada, quando eles se encontram e como eles colaboram. Para saber mais sobre salas, consulte a documentação conceitual.

Um usuário é convidado para uma sala usando a API de Salas em uma das três seguintes funções:

• Apresentador (padrão)
• Participante
• Consumidor

A distinção entre cada função está nos recursos que elas possuem durante uma chamada de sala quando CallComposite é usada. Os recursos específicos associados a cada função são descritos na visão geral das salas virtuais.

Suporte a chamadas individuais e notificações por push

A Biblioteca de Interface do Usuário dá suporte a chamadas VoIP um-para-um para discar usuários por identificador de comunicação. Para receber uma chamada de entrada, a Biblioteca de Interface do Usuário também dá suporte ao registro para notificações por PUSH. Para saber mais sobre a integração para plataformas Android e iOS e o uso da API, consulte Fazer uma chamada um-para-um e receber notificações por PUSH.

Recursos de chamada

Vários recursos estão disponíveis para chamadas.

Acessibilidade

A acessibilidade é o foco fundamental das bibliotecas de chamadas. Use um leitor de tela para fazer anúncios importantes sobre o status da chamada e para ajudar a garantir que os usuários com deficiência visual possam participar efetivamente quando usarem o aplicativo.

Legendas ocultas

As legendas fechadas permitem uma ampla variedade de cenários, incluindo interoperabilidade com o Teams, chamadas de grupo dos Serviços de Comunicação do Azure, chamadas de sala e chamadas um a um. Esse recurso garante que os usuários possam acompanhar as conversas em vários ambientes de chamada, aumentando a acessibilidade e a experiência do usuário.

Os usuários precisam selecionar manualmente o idioma para legendas usando a Biblioteca de Interface do Usuário pronta para uso porque o sistema não detecta automaticamente o idioma falado.

Para obter mais informações sobre legendas fechadas, consulte a documentação para examinar explicações e diretrizes de uso. Se você quiser configurar legendas fechadas diretamente na Biblioteca de Interface do Usuário, siga o tutorial para facilitar a configuração.

Eventos

Os desenvolvedores agora podem assinar eventos dentro da propriedade CallComposite. Com esse recurso, eles podem anexar ouvintes a eventos específicos em todo o ciclo de vida de chamadas. Esse aprimoramento oferece maior controle e oportunidades de personalização. Os desenvolvedores podem disparar ações personalizadas com base em eventos como ingresso de participante ou participantes que deixaram a chamada. Eles também podem usar eventos para registrar interações em log, atualizar dinamicamente interfaces do usuário ou aprimorar a funcionalidade geral.

Para obter mais informações, consulte Manipular eventos na Biblioteca de Interface do Usuário.

Localização

A localização é fundamental para criar produtos para usuários em todo o mundo que falam idiomas diferentes. A Biblioteca de IU dá suporte a 12 idiomas: inglês, espanhol, francês, alemão, italiano, japonês, coreano, holandês, português, russo, turco e chinês. Ela também dá suporte a idiomas da direita para a esquerda. Para obter mais informações, consulte Adicionar localização ao seu aplicativo.

Modo multitarefa e imagem em imagem

A Biblioteca de Interface do Usuário dá suporte ao modo de imagem em imagem para a tela de chamada. Durante uma chamada, os usuários podem selecionar o botão Voltar na tela de chamada para habilitar a multitarefa para levá-los de volta à tela anterior. Se o modo de imagem na imagem estiver habilitado, uma imagem do sistema na imagem será exibida para a chamada. Para saber mais sobre multitarefa e o modo de imagem em imagem para as plataformas Android e iOS e o uso da API, consulte Ativar imagem em imagem usando a Biblioteca de Interface do Usuário.

Orientação da tela

A Biblioteca de Interface do Usuário dá suporte à configuração de orientação de tela para cada uma das telas separadamente antes do início da experiência de biblioteca. Os desenvolvedores de aplicativos podem configurar uma orientação fixa para a experiência de chamada, o que alinharia sua orientação de aplicativo. Para saber mais sobre a lista de orientação com suporte para as plataformas Android e iOS e o uso da API, consulte Definir orientação de tela usando a Biblioteca de Interface do Usuário.

Tamanho da tela

Adapte a composição de chamada dos Serviços de Comunicação do Azure para adaptar-se aos tamanhos de tela de cinco polegadas ao tamanho do tablet. Use o modo dividido e o modo tablet na composição de chamada para obter o layout dinâmico de lista de participantes, aumentar a clareza da exibição e se concentrar na conversa.

Modo de divisão	Modo tablet

Exibir a injeção de dados

Use a Biblioteca de Interface do Usuário para plataformas nativas móveis para dar aos participantes locais e remotos a opção de personalizar como eles aparecem como usuários em uma chamada. Um participante local pode escolher um avatar local, um nome de exibição personalizado e o título e o subtítulo da navegação na tela de instalação quando uma chamada começa. Um usuário remoto pode criar um avatar personalizado ao ingressar na reunião. Para obter mais informações, consulte Injetar um modelo de dados personalizado na Biblioteca de Interface do Usuário.

Ver conteúdo compartilhado

Por meio da Biblioteca de Interface do Usuário para plataformas nativas móveis, os participantes de chamadas podem exibir conteúdo compartilhado quando outros participantes compartilham suas telas durante uma chamada do Teams. Um participante remoto pode usar gestos de ampliação e pinçagem para ampliar ou reduzir o conteúdo compartilhado na chamada.

Integrações de sistemas operacionais

Integre-se ao sistema operacional.

Suporte ao CallKit

A Biblioteca de Interface do Usuário dá suporte à integração do CallKit para lidar com a interação com o CallKit para chamadas. Para saber mais sobre a integração da plataforma iOS e o uso da API, consulte Integrar o CallKit à Biblioteca de Interface do Usuário.

Suporte ao TelecomManager

Agora, a Biblioteca de Interface do Usuário dá suporte à integração com o TelecomManager e permite o tratamento de funções de retenção e retomada de chamadas. Para saber mais sobre a integração da plataforma Android e o uso da API, consulte Integrar o TelecomManager à Biblioteca de Interface do Usuário.

Personalizar a experiência da chamada

Você pode personalizar sua experiência de chamada.

Modo somente áudio

O modo somente áudio na Biblioteca de Interface do Usuário permite que os participantes participem de chamadas usando apenas o áudio, sem compartilhar ou receber vídeo. Esse recurso é usado para conservar a largura de banda e maximizar a privacidade. Quando ativado, o modo somente áudio desabilita automaticamente as funcionalidades de vídeo para enviar e receber fluxos. A interface é ajustada para refletir essa mudança, removendo controles relacionados ao vídeo. Habilite esse modo por meio da configuração do CallComposite. Para obter mais informações, consulte o início rápido somente áudio.

Desabilitar o prompt de encerramento de chamada

Quando você desenvolve aplicativos que integram recursos de chamada, é crucial garantir uma experiência de usuário perfeita e intuitiva. Uma área em que você pode simplificar a experiência do usuário é durante o processo de encerramento de chamada. Especificamente, os desenvolvedores podem achar benéfico desabilitar o prompt de confirmação de chamada à esquerda que aparece quando um usuário deseja encerrar uma chamada. Esse recurso, embora útil na prevenção de encerramento acidental de chamadas, às vezes pode dificultar a experiência do usuário, especialmente em ambientes em que a velocidade e a eficiência são cruciais. Para obter mais informações, consulte Desabilitar a confirmação da chamada.

Ambientes de comunicação em ritmo acelerado: em configurações como pregões, call centers de emergência ou centros de atendimento ao cliente, as decisões e ações devem ser executadas rapidamente. A etapa extra de confirmação da terminação de chamada pode impedir a eficiência do fluxo de trabalho.

Personalização da barra de botões

A funcionalidade permite que os desenvolvedores adicionem novas ações ao menu contextual ou removam botões atuais na barra de botões. Eles podem fornecer a flexibilidade para introduzir ações personalizadas e adaptar a interface do usuário de acordo com as necessidades específicas do aplicativo.

• Adicionar botões personalizados: os desenvolvedores podem introduzir novos botões na barra de botões contextual para disparar ações personalizadas.
• Remova os botões existentes: os desenvolvedores podem remover botões padrão desnecessários para simplificar a interface, como câmera, microfone ou seleção de áudio.

Considere as seguintes restrições durante a implementação deste recurso:

• Ícones e rótulos: os ícones são adicionados somente para novas ações. Os ícones da barra de botões mantêm os ícones predefinidos e os rótulos devem ser concisos para se ajustarem à dimensão do menu.
• Considerações de acessibilidade: os desenvolvedores devem garantir que todos os botões personalizados estejam acessíveis, incluindo a rotulagem apropriada para leitores de tela.

Remover botões	Adicionar ações personalizadas

Casos de uso

• Ações personalizadas na chamada: um aplicativo de negócios pode adicionar um botão Relatar Problema personalizado, que permite que os usuários relatem diretamente problemas técnicos durante uma chamada.
• Identidade visual e experiência do usuário: um aplicativo empresarial pode remover botões irrelevantes para seu caso de uso e adicionar botões de marca que aprimoram a experiência do usuário.

Para garantir uma experiência de chamada consistente, recomendamos que você integre ícones de interface do usuário do Fluent ao seu projeto. Eles estão disponíveis no repositório GitHub da interface do usuário fluente. Ao fazer isso, seus ícones personalizados correspondem ao design da propriedade CallComposite e criam uma aparência coesa e profissional.

Práticas recomendadas

• Design limpo: evite a superlotação da barra de menus contextual. Adicione apenas botões essenciais para a experiência do usuário.
• Teste de usuário: realize testes de usuário para garantir que as personalizações atendam às necessidades do usuário e não os confundam ou sobrecarreguem.
• Mecanismo de comentários: a adição de botões como Relatar Problema garante que um sistema de back-end robusto esteja disponível para lidar com os comentários coletados. Reutilize o mecanismo que a Biblioteca de Interface do Usuário fornece por padrão.

Para obter mais informações, confira Personalizar botões.

Ignorar a tela de configuração

A Biblioteca de Interface do Usuário fornece a capacidade de ingressar em uma chamada ignorando a tela de instalação da experiência de junção de chamada. Por padrão, você passa por uma tela de configuração para ingressar em uma chamada. Aqui, você define a configuração de chamada, como a câmera ativar ou desativar, ativar ou desativar o microfone e a seleção do dispositivo de áudio antes de ingressar em uma chamada. Essa tela requer a interação do usuário para ingressar em uma chamada, o que pode ser desnecessário para alguns usuários. Portanto, fornecemos a capacidade de ingressar em uma chamada ignorando a tela de configuração e fornecendo as APIs de configuração de chamada. Para obter mais informações, consulte Ignorar o recurso de tela de instalação.

Temas e cores

Use a composição de chamada da Biblioteca de Interface do Usuário para iOS e Android para criar um tema personalizado da experiência de um chamador. Você tem a flexibilidade de personalizar as cores primárias para que possa adaptar o esquema de cores para atender às suas necessidades específicas de identidade visual. Ajustando as cores primárias, você pode garantir que a interface se integre à identidade visual da sua marca. Você pode aprimorar a experiência do usuário enquanto mantém a consistência em seus aplicativos. Para obter mais informações, consulte Criar seu tema.

Android	iOS

Título e subtítulo

Use a Biblioteca de Interface do Usuário para inserir cadeias de caracteres personalizadas, o que facilita a adaptação da interface de chamada para atender às suas necessidades específicas. Você pode personalizar o título e o subtítulo de uma chamada, durante a fase de instalação e enquanto a chamada está em andamento.

Por exemplo, em um ambiente corporativo, você pode definir o título para refletir a agenda da reunião e o subtítulo para indicar um anúncio. Para o suporte ao cliente, os agentes podem usar títulos para exibir a natureza do inquérito para aprimorar a clareza e a comunicação.

Durante chamadas com discussões sensíveis ao tempo, você também pode usar o subtítulo para exibir a duração da chamada para garantir que todos os participantes estejam cientes das restrições de tempo.

Para obter mais informações, consulte Configurar o título e o subtítulo.

Casos de uso de chat

Flexibilidade

A propriedade ChatComposite foi projetada para se ajustar a layouts e exibições diferentes em seu aplicativo. Por exemplo, você pode optar por colocar o Chat em um modo de exibição de navegação, modo de exibição modal ou algum outro modo de exibição. A propriedade ChatComposite se ajusta e garante que o usuário tenha uma experiência perfeita.

Modo de exibição de navegação	Exibição modal

Identidades com suporte

Para inicializar uma composição e se autenticar no serviço, um usuário precisa ter uma identidade dos Serviços de Comunicação do Azure. Para obter mais informações, confira Autenticar-se nos Serviços de Comunicação do Azure e Guia de início rápido: criar e gerenciar tokens de acesso.

Arquitetura recomendada

Inicialize uma composição usando um token de acesso dos Serviços de Comunicação do Azure. É importante obter tokens de acesso dos Serviços de Comunicação do Azure por meio de um serviço confiável que você gerencia. Para obter mais informações, confira Guia de início rápido: criar e gerenciar tokens de acesso e o tutorial de serviço confiável.

As bibliotecas de clientes de chamada e chat precisam ter o contexto da chamada em que ingressam. Dissemine o contexto para os clientes usando seu próprio serviço confiável. Por exemplo, use tokens de acesso do usuário. A tabela a seguir resume as funções de inicialização e gerenciamento de recursos necessárias para adicionar contexto a uma biblioteca de clientes.

Suporte a plataforma

Guia de Solução de Problemas

Quando ocorre uma solução de problemas para chamadas de voz ou vídeo, você pode ser solicitado a fornecer uma ID de chamada. Essa ID é usada para identificar chamadas dos Serviços de Comunicação do Azure.

Para recuperar essa ID de chamada, use a barra de ações na parte inferior da tela de chamada. Selecione o botão de reticências para ver Compartilhar informações de diagnóstico. Use essa opção para compartilhar as informações de diagnóstico necessárias para acompanhar quaisquer problemas da equipe de suporte.

Para obter acesso programático à ID da chamada, consulte Obter informações de depuração programaticamente.

Para obter mais informações sobre solução de problemas, consulte Solução de problemas nos Serviços de Comunicação do Azure.

Tela de chamada	Menu informações de diagnóstico	ID da chamada de compartilhamento