Amplie a experiência de chamada

Artigo
01/10/2024

Você pode usar a experiência de compromissos virtuais pronta para uso criada por meio do Microsoft Teams Virtual Appointment Booking ou por meio da API de compromisso virtual do Microsoft Graph para permitir que os consumidores participem de uma experiência de compromisso virtual hospedada pela Microsoft de compromisso virtual. Se tiver o Microsoft Teams Premium, pode personalizar ainda mais a experiência através do tema Reunião, que lhe permite escolher imagens, logótipos e cores utilizados ao longo da experiência. Os Serviços de Comunicação do Azure podem ajudar os desenvolvedores que desejam hospedar automaticamente a solução ou personalizar a experiência.

Os Serviços de Comunicação do Azure fornecem três opções de personalização:

Personalize a interface do usuário por meio de compósitos de interface do usuário prontos para uso.
Crie seu próprio layout usando os componentes da Biblioteca da Interface do Usuário & compósitos.
Crie sua própria interface de usuário com kits de desenvolvimento de software

Pré-requisitos

Espera-se que o leitor deste artigo compreenda os seguintes tópicos:

Biblioteca de Chat, Chamadas e Interface do Usuário dos Serviços de Comunicação do Azure

Compósitos de interface de usuário prontos para uso personalizáveis

Você pode integrar compósitos de reunião prontos para uso fornecidos pela biblioteca de interface do usuário do Serviço de Comunicação do Azure. Esse composto fornece componentes React prontos para uso que podem ser integrados ao seu aplicativo Web. Você pode encontrar mais detalhes aqui sobre como usar esse composto com diferentes estruturas da web.

Primeiro, forneça detalhes sobre o usuário do aplicativo. Para fazer isso, crie Argumentos do Adaptador de Chamada de Comunicação do Azure para armazenar informações sobre ID de usuário, token de acesso, nome para exibição e URL de reunião do Teams.

const callAdapterArgs = {
        userId: new CommunicationUserIdentifier(<USER_ID>'),
        displayName: “Adele Vance”,
        credential: new AzureCommunicationTokenCredential('<TOKEN>'),
        locator: { meetingLink: '<TEAMS_MEETING_URL>'},
        endpoint: '<AZURE_COMMUNICATION_SERVICE_ENDPOINT_URL>';
}

Crie um gancho React personalizado com useAzureCommunicationCallAdapter para criar um adaptador de chamada.

const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);

Retornar o componente React CallComposite que fornece experiência de reunião.

return (
  <div>
    <CallWithChatComposite
      adapter={callAdapter}
    />
  </div>
);

Você pode personalizar ainda mais a interface do usuário com seu próprio tema para personalização e identidade visual ou otimizar o layout para desktop ou celular. Se quiser personalizar ainda mais o layout, você pode utilizar componentes de interface do usuário pré-existentes, conforme descrito na seção subsequente.

Crie seu próprio layout com componentes da interface do usuário

A biblioteca de interface do usuário dos Serviços de Comunicação do Azure dá acesso a componentes individuais para personalizar sua interface do usuário e seu comportamento. A imagem a seguir destaca os componentes individuais que estão disponíveis para uso.

O diagrama está mostrando o layout da reunião decomposto em componentes individuais de chamada da interface do usuário.

A tabela a seguir detalha os componentes individuais:

Componente	Description
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

Você também pode personalizar sua experiência de bate-papo. A imagem a seguir destaca os componentes individuais do bate-papo.

O diagrama está mostrando o layout da reunião decomposta em componentes individuais de bate-papo da interface do usuário.

A tabela a seguir fornece descrições com links para componentes individuais

Componente	Description
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
Indicador de status da mensagem	Componente indicador de status de mensagem de vários estados para mostrar o status da mensagem enviada
Indicador de digitação	Componente de texto para renderizar os participantes que estão digitando ativamente em um thread

Vamos dar uma olhada em como você pode usar o componente Barra de controle para mostrar apenas os botões da câmera e do microfone nessa ordem e controlar as ações que são executadas após a seleção desses botões.

export const AllButtonsControlBarExample: () => JSX.Element = () => {
  return (
    <FluentThemeProvider>
      <ControlBar layout={'horizontal'}>
        <CameraButton
          onClick={() => {  /*handle onClick*/ }}
        />
        <MicrophoneButton
          onClick={() => {  /*handle onClick*/ }}
        />
      </ControlBar>
    </FluentThemeProvider>
)}

Para obter mais personalização, você pode adicionar mais botões predefinidos e, você pode alterar sua cor, ícones ou ordem. Se você tiver componentes de interface do usuário existentes que gostaria de usar ou quiser ter mais controle sobre a experiência, poderá usar SDKs (kits de desenvolvimento de software) subjacentes para criar sua própria interface de usuário.

Crie sua própria interface de usuário com kits de desenvolvimento de software

Os Serviços de Comunicação do Azure fornecem SDKs de chat e chamada para criar experiências de compromisso virtual. A experiência consiste em três partes principais, autenticação, chamada e chat. Temos exemplos dedicados de QuickStarts e GitHub para cada um, mas os exemplos de código a seguir mostram como habilitar a experiência. A autenticação do usuário requer a criação ou seleção de um usuário existente dos Serviços de Comunicação do Azure e a emissão de um token. Você pode usar a cadeia de conexão para criar CommunicationIdentityClient. Recomendamos que você implemente essa lógica no back-end, pois compartilhar connectionstring com clientes não é seguro.

var client = new CommunicationIdentityClient(connectionString);

Crie um usuário dos Serviços de Comunicação do Azure associado ao seu recurso dos Serviços de Comunicação do Azure com o método CreateUserAsync.

var identityResponse = await client.CreateUserAsync();
var identity = identityResponse.Value;

Emitir token de acesso associado ao usuário dos Serviços de Comunicação do Azure com escopo de chat e chamada.

var tokenResponse = await client.GetTokenAsync(identity, scopes: new [] { CommunicationTokenScope.VoIP, CommunicationTokenScope.Chat  });
var token =  tokenResponse.Value.Token;

Agora você tem um usuário válido dos Serviços de Comunicação do Azure e um token de acesso atribuído a esse usuário. Agora você pode integrar a experiência de chamada. Esta parte é implementada no lado do cliente e, para este exemplo, vamos supor que as propriedades estão sendo propagadas para o cliente a partir do back-end. O tutorial a seguir mostra como fazê-lo. Primeiro, crie um CallClient que inicie o SDK e forneça acesso ao CallAgent e ao gerenciador de dispositivos.

const callClient = new CallClient(); 
Create CallAgent from the client and define the display name of the user.
tokenCredential = new AzureCommunicationTokenCredential(token);
callAgent = await callClient.createCallAgent(tokenCredential, {displayName: 'Adele Vance'})

Ingressar na reunião do Microsoft Teams associada ao compromisso virtual com base na URL da reunião do Teams.

var meetingLocator = new TeamsMeetingLinkLocator("<TEAMS_MEETING_URL>");
callAgent.join(meetingLocator , new JoinCallOptions());

Essas etapas permitem que você participe da reunião do Teams. Em seguida, você pode estender essas etapas com o gerenciamento de alto-falantes, microfone, câmera e fluxos de vídeo individuais. Então, opcionalmente, você também pode integrar o bate-papo na experiência de compromisso virtual.

Crie um ChatClient que inicie o SDK e lhe dê acesso a notificações e ChatThreadClient.

const chatClient = new ChatClient(
    endpointUrl,
    new AzureCommunicationTokenCredential(token)
  );

Inscreva-se para receber notificações de bate-papo em tempo real para o usuário dos Serviços de Comunicação do Azure.

await chatClient.startRealtimeNotifications();

Inscreva-se em um evento quando a mensagem for recebida.

// subscribe to new message notifications
chatClient.on("chatMessageReceived", (e) => { /*Render message*/})

Crie o ChatThreadClient para iniciar o cliente para operações relacionadas a um thread de chat específico.

chatThreadClient = await chatClient.getChatThreadClient(threadIdInput.value);

Envie uma mensagem de chat no chat da reunião do Teams associado ao compromisso virtual.

let sendMessageRequest = { content: 'Hello world!' };
let sendMessageOptions = { senderDisplayName : 'Adele Vance' };
let sendChatMessageResult = await chatThreadClient.sendMessage(sendMessageRequest, sendMessageOptions);

Com as três fases, você tem um usuário que pode participar de compromissos virtuais com áudio, vídeo, compartilhamento de tela e bate-papo. Essa abordagem oferece controle total sobre a interface do usuário e o comportamento de ações individuais.

Próximos passos

Saiba quais opções de extensibilidade você tem para compromissos virtuais.
Saiba como personalizar antes e depois da consulta
Saiba como personalizar a experiência de pré-chamada
Saiba como personalizar a experiência de chamada

Partilhar via