Estender a experiência de chamada

Artigo
06/02/2023

Você pode usar a experiência de compromissos virtuais pronta para uso criada por meio do Booking de Compromisso Virtual do Microsoft Teams ou por meio da API de Compromisso virtual do Microsoft Graph para permitir que os consumidores ingressem em uma experiência de compromisso virtual hospedada da Microsoft de Compromisso virtual. Se você tiver Microsoft Teams Premium, poderá personalizar ainda mais a experiência por meio do tema Reunião que permite escolher imagens, logotipos e cores usadas ao longo da experiência. Os Serviços de Comunicação do Azure podem ajudar os desenvolvedores que desejam auto-hospedar a solução ou personalizar a experiência.

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

Personalizar a interface do usuário por meio de composições de interface do usuário prontas para uso.
Criar seu próprio layout usando os componentes e composições da Biblioteca de Interface do Usuário.
Criar sua própria interface do usuário com kits de desenvolvimento de software

Pré-requisitos

Espera-se que o leitor deste artigo tenha uma compreensão dos seguintes tópicos:

Serviços de Comunicação do Azure Chat, Chamada e biblioteca de interface do usuário

Composição de interface do usuário pronta para uso personalizável

Você pode integrar uma composição de reunião pronta para uso fornecida pela biblioteca de interface do usuário do Serviço de Comunicação do Azure. Essa composição fornece componentes React prontos para uso que podem ser integrados ao aplicativo Web. Você pode encontrar mais detalhes aqui sobre como usar essa composição com diferentes estruturas da Web.

Primeiro, forneça detalhes sobre o usuário do aplicativo. Para fazer isso, crie Argumentos do Adaptador de Chamadas da Comunicação do Azure para armazenar informações sobre ID de usuário, token de acesso, nome de 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 de React personalizado com useAzureCommunicationCallAdapter para criar um Adaptador de Chamada.

const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);

Retorne o componente React CallComposite que forneça 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 área de trabalho ou dispositivo móvel. Se você quiser personalizar ainda mais o layout, poderá utilizar componentes de interface do usuário pré-existentes, conforme descrito na seção subsequente.

Criar seu próprio layout com componentes de interface do usuário

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

Diagrama mostrando um layout de reunião decomposto em componentes da chamada na interface do usuário.

A tabela a seguir detalha os componentes individuais:

Componente	Descrição
Layout de grade	Componente de grade para organizar blocos de vídeo em uma grade NxN
Bloco de vídeo	Componente que exibe o fluxo de vídeo quando disponível e um componente estático padrão quando não
Barra de controle	Contêiner para organizar DefaultButtons para se conectar a ações de chamada específicas, como mudo ou compartilhar tela
Galeria de vídeos	Componente de galeria de vídeos essencial que muda dinamicamente à medida que os participantes são adicionados

Você também pode personalizar sua experiência de chat. A imagem a seguir realça os componentes individuais do chat.

Diagrama mostrando um layout de reunião decomposto em componentes de chat na interface do usuário.

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

Componente	Descrição
Thread de mensagem	Contêiner que renderiza mensagens de chat, 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 status de mensagem enviada
Indicador de digitação	Componente de texto para renderizar os participantes que estão digitando ativamente em uma thread

Vamos dar uma olhada em como você pode usar o componente Barra de controle para mostrar apenas botões de câmera e microfone nesta ordem e controlar 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 personalização ainda mais, você pode adicionar mais botões predefinidos e alterar a cor, os ícones ou a ordem deles. Se você tiver componentes de interface do usuário existentes que gostaria de usar ou quiser ter mais controle sobre a experiência deles, poderá usar SDKs (kits de desenvolvimento de software) subjacentes para criar sua própria interface do usuário.

Criar sua própria interface do 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 ao QuickStarts e ao 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 criar ou selecionar um usuário dos Serviços de Comunicação do Azure existente e emitir um token. Você pode usar uma cadeia de conexão para criar CommunicationIdentityClient. Incentivamos você a implementar essa lógica no back-end, pois o compartilhamento de conexões de cadeia 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;

Emita o 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 dos Serviços de Comunicação do Azure válido e um token de acesso atribuído a esse usuário. Agora você pode integrar a experiência de chamada. Essa parte é implementada no lado do cliente e, para este exemplo, vamos supor que as propriedades estão sendo propagadas para o cliente do back-end. O tutorial mostra como executar isso. Primeiro, crie um CallClient que inicie o SDK e dê 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'})

Ingresse na reunião do Microsoft Teams associada ao compromisso virtual com base na URL de reunião do Teams.

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

Essas etapas permitem que você ingresse na 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. Em seguida, opcionalmente, você também pode integrar o chat na experiência de compromisso virtual.

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

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

Assine para receber notificações de chat 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 é recebida.

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

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

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

Envie mensagem de chat no chat de 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 todas as três fases, você tem um usuário que pode ingressar em compromissos virtuais com áudio, vídeo, compartilhamento de tela e chat. Essa abordagem dá a você o controle total sobre a interface do usuário e o comportamento de ações individuais.

Próximas etapas

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

Compartilhar via