Começa com a amostra do herói da chamada

  • Artigo
  • 14 minutos para ler

A amostra de herói do grupo Azure Communication Services chamando demonstra como os serviços de comunicação que chamam Web SDK podem ser usados para construir uma experiência de chamada de grupo.

Neste quickstart da amostra, vamos aprender como a amostra funciona antes de passarmos a amostra na sua máquina local. Em seguida, enviaremos a amostra para Azure usando os seus próprios recursos Azure Communication Services.

Transferir código

Encontre o projeto para esta amostra no GitHub. Uma versão da amostra que inclui funcionalidades atualmente em pré-visualização pública, tais como Teams Interop e Call Recording , pode ser encontrada num ramo separado.

Implementar no Azure

Descrição Geral

A amostra tem uma aplicação do lado do cliente e uma aplicação do lado do servidor. A aplicação do lado do cliente é uma aplicação web React/Redux que utiliza a estrutura fluente da Microsoft. Esta aplicação envia pedidos para uma aplicação ASP.NET Core do lado do servidor que ajuda a aplicação do lado do cliente a ligar-se ao Azure.

Aqui está o aspeto da amostra:

Screenshot mostrando a página de aterragem da aplicação da amostra.

Quando carrega no botão "Iniciar uma chamada", a aplicação web requer um token de acesso do utilizador a partir da aplicação do lado do servidor. Este token é então usado para ligar a app do cliente a Azure Communication Services. Assim que o token for recuperado, ser-lhe-á solicitado que especifique a câmara e o microfone que pretende utilizar. Poderá desativar/ativar os seus dispositivos com controlos de alternância:

Screenshot mostrando o ecrã pré-chamada da aplicação da amostra.

Uma vez configurar o nome e os dispositivos do ecrã, pode juntar-se à sessão de chamadas. Você verá então a tela principal de chamada onde vive a experiência de chamada principal.

Screenshot mostrando o ecrã principal da aplicação da amostra.

Componentes do ecrã principal de chamada:

  • Galeria dos Media: O palco principal onde os participantes são mostrados. Se um participante tiver a sua câmara ativada, o seu feed de vídeo é mostrado aqui. Cada participante tem um azulejo individual que mostra o seu nome de exibição e fluxo de vídeo (quando há um)
  • Cabeçalho: É aqui que se encontram os controlos de chamada primário para alternar as definições e a barra lateral do participante, ligar o vídeo e misturar,partilhar o ecrã e deixar a chamada.
  • Barra lateral: É aqui que os participantes e as definições são mostrados quando alternados utilizando os controlos do cabeçalho. O componente pode ser descartado utilizando o 'X' no canto superior direito. A barra lateral dos participantes mostrará uma lista de participantes e um link para convidar mais utilizadores a conversar. A barra lateral permite configurar as definições do microfone e da câmara.

Nota

Com base nas limitações do Web Calling SDK, apenas 4 streams de vídeo e 1 stream de partilha de ecrã são renderizados. Para mais informações consulte, chamando o Suporte de Fluxo SDK.

Abaixo encontrará mais informações sobre pré-requisitos e passos para configurar a amostra.

Pré-requisitos

Antes de executar a amostra pela primeira vez

  1. Abra uma instância de PowerShell, Terminal do Windows, Command Prompt ou equivalente e navegue para o diretório ao qual pretende clonar a amostra.

    git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git`

  2. Obtenha o Connection String do portal do Azure ou utilizando o CLI Azure.

    az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"

    Para obter mais informações sobre as cadeias de ligação, consulte Criar um Azure Communication Resources

  3. Assim que tiver a ficha Connection String, adicione o fio de ligação ao ficheiro samples/Server/appsetting.json . Insira a sua cadeia de ligação na variável: ResourceConnectionString.

  4. Obtenha o Endpoint string do portal do Azure ou utilizando o CLI Azure.

    az communication list-key --name "<acsResourceName>" --resource-group "<resourceGroup>"

    Para obter mais informações sobre as cordas Endpoint, consulte Criar um Azure Communication Resources

  5. Assim que tiver a Endpoint Stringcadeia , adicione a cadeia de ponto final ao ficheiro samples/Server/appsetting.json . Insira a sua cadeia de ponto final na variável EndpointUrl

Execução local

  1. Instalar dependências

    npm run setup

  2. Inicie a aplicação de chamadas

    npm run start

    Isto abrirá um servidor de cliente na porta 3000 que serve os ficheiros do site, e um servidor api na porta 8080 que executa funcionalidades como tokens de cunhagem para participantes de chamadas.

Resolução de problemas

  • A aplicação mostra um ecrã "não suportado" mas estou num browser suportado.

    Se a sua aplicação estiver a ser servida com um nome de anfitrião diferente do local, tem de servir o tráfego em https e não em https.

Publicar no Azure

  1. npm run setup
  2. npm run build
  3. npm run package
  4. Utilize a extensão Azure e implemente o diretório Call/dist para o seu serviço de aplicações

Limpar os recursos

Se pretender limpar e remover uma assinatura de Serviços de Comunicação, pode eliminar o grupo de recursos ou recursos. A eliminação do grupo de recursos também elimina quaisquer outros recursos que lhe sejam associados. Saiba mais sobre a limpeza de recursos.

Passos seguintes

Faça o download da amostra do GitHub

Para obter mais informações, veja os seguintes artigos:

Leitura adicional

  • Amostras - Encontre mais amostras e exemplos na página geral das nossas amostras.
  • Redux - Gestão do estado do lado do cliente
  • FluentUI - Biblioteca de UI alimentada pela Microsoft
  • React - Biblioteca para construção de interfaces de utilizador
  • ASP.NET Core - Enquadramento para a construção de aplicações web

O Azure Communication Services Group Calling Hero Sample para iOS demonstra como os serviços de comunicação que ligam o iOS SDK podem ser usados para construir uma experiência de chamada de grupo que inclui voz e vídeo. Neste arranque rápido da amostra, você aprenderá a configurar e executar a amostra. Para o contexto está prevista uma visão geral da amostra.

Transferir código

Encontre o projeto para esta amostra no GitHub.

Descrição Geral

A amostra é uma aplicação nativa do iOS que utiliza o Azure Communication Services iOS SDKs para construir uma experiência de chamada que apresenta chamadas de voz e vídeo. A aplicação utiliza um componente do lado do servidor para obter fichas de acesso que são depois usadas para inicializar o Azure Communication Services SDK. Para configurar este componente do lado do servidor, sinta-se livre para seguir o Serviço De Confiança com Funções do Azure tutorial.

Aqui está o aspeto da amostra:

Screenshot mostrando a página de aterragem da aplicação da amostra.

Quando premir o botão "Iniciar nova chamada", a aplicação iOS pede-lhe que introduza o nome de visualização para utilizar para a chamada.

Screenshot mostrando o ecrã pré-chamada da aplicação da amostra.

Depois de tocar em "Next" no ecrã "Start Call", tem a oportunidade de partilhar o ID do grupo da chamada através da folha de partilha do iOS.

Screenshot mostrando o ecrã de ID do grupo de partilha da aplicação da amostra.

A aplicação também permite que você se junte a uma chamada de Azure Communication Services existente especificando o ID da chamada existente ou o link de iD das equipas existente.

Screenshot mostrando o ecrã de chamada de junção da aplicação da amostra.

Depois de se juntar a uma chamada, será solicitado que dê permissão à aplicação para aceder à sua câmara e microfone, se não for já autorizado. Tenha em mente que, como todas as aplicações baseadas em AVFoundation, a verdadeira funcionalidade de áudio e vídeo só está disponível em hardware real.

Assim que configurar o nome do seu visor e se juntar à chamada, verá a tela principal de chamada onde vive a experiência de chamada principal.

Screenshot mostrando o ecrã principal da aplicação da amostra.

Componentes do ecrã principal de chamada:

  • Galeria dos Media: O palco principal onde os participantes são mostrados. Se um participante tiver a sua câmara ativada, o seu feed de vídeo é mostrado aqui. Cada participante tem um azulejo individual que mostra o seu nome de exibição e fluxo de vídeo (quando há um). A galeria suporta vários participantes e é atualizada quando os participantes são adicionados ou removidos à chamada.
  • Barra de Ação: É aqui que estão localizados os controlos de chamada primário. Estes controlos permitem-lhe ligar/desligar o vídeo e o microfone, partilhar o ecrã e deixar a chamada.

Abaixo encontrará mais informações sobre pré-requisitos e passos para configurar a amostra.

Pré-requisitos

Amostra de execução local

A amostra de chamada de grupo pode ser executada localmente usando o XCode. Os desenvolvedores podem usar o seu dispositivo físico ou um emulador para testar a aplicação.

Antes de executar a amostra pela primeira vez

  1. Instale as dependências em funcionamento pod install.
  2. Abra AzureCalling.xcworkspace em XCode.
  3. Criar um ficheiro de texto na raiz, chamado AppSettings.xcconfig e definir o valor:
    communicationTokenFetchUrl = <your authentication endpoint, without the https:// component>

Amostra de execução

Construa e execute a amostra no XCode, utilizando o alvo AzureCalling no simulador ou dispositivo à sua escolha.

(Opcional) Assegurar um ponto final de autenticação

Para fins de demonstração, esta amostra utiliza um ponto final acessível ao público por defeito para obter um token de acesso Azure Communication Services. Para cenários de produção, recomendamos que use o seu próprio ponto final seguro para provisões suas próprias fichas.

Com uma configuração adicional, esta amostra suporta a ligação a um ponto final protegido do Azure Ative (Azure AD) para que o login do utilizador seja necessário para que a aplicação procure um token de acesso Azure Communication Services. Veja os passos abaixo:

  1. Ativar a autenticação do Azure Ative Directory na sua aplicação.
  2. Aceda à página geral da sua aplicação registada no Azure Ative Directory App Registrations. Tome nota doApplication (client) ID, Directory (tenant) IDApplication ID URI

Configuração do Diretório Ativo Azure na portal do Azure.

  1. Crie um AppSettings.xcconfig ficheiro na raiz se ainda não estiver presente e adicione os valores:
    communicationTokenFetchUrl = <Application ID URI, without the https:// component>
aadClientId = <Application (client) ID>
aadTenantId = <Directory (tenant) ID>

Limpar os recursos

Se pretender limpar e remover uma assinatura de Serviços de Comunicação, pode eliminar o grupo de recursos ou recursos. A eliminação do grupo de recursos também elimina quaisquer outros recursos que lhe sejam associados. Saiba mais sobre a limpeza de recursos.

Passos seguintes

Faça o download da amostra do GitHub

Para obter mais informações, veja os seguintes artigos:

Leitura adicional

O Azure Communication Services Group Calling Hero Sample para Android demonstra como os serviços de comunicação que chamam o Android SDK podem ser usados para construir uma experiência de chamada de grupo que inclui voz e vídeo. Neste arranque rápido da amostra, você aprenderá a configurar e executar a amostra. Para o contexto está prevista uma visão geral da amostra.

Transferir código

Encontre o projeto para esta amostra no GitHub.

Descrição Geral

A amostra é uma aplicação nativa do Android que usa a Azure Communication Services biblioteca de clientes Android UI para construir uma experiência de chamada que apresenta chamadas de voz e vídeo. A aplicação utiliza um componente do lado do servidor para obter fichas de acesso que são depois usadas para inicializar o Azure Communication Services SDK. Para configurar este componente do lado do servidor, sinta-se livre para seguir o Serviço De Confiança com Funções do Azure tutorial.

Aqui está o aspeto da amostra:

Screenshot mostrando a página de aterragem da aplicação da amostra.

Quando premir o botão "Iniciar nova chamada", a aplicação Android pede-lhe que introduza o nome de visualização para utilizar para a chamada.

Screenshot mostrando o ecrã pré-chamada da aplicação da amostra.

Depois de tocar em "Next" na página "Iniciar uma chamada", tem a oportunidade de partilhar o "ID de chamada de grupo".

Screenshot mostrando o ecrã de ID de chamada de grupo de partilha da aplicação da amostra.

A aplicação permite-lhe aderir a uma chamada de Azure Communication Services existente, especificando o ID da chamada existente ou as equipas que encontram o link de identificação e o nome do ecrã.

Screenshot mostrando o ecrã de chamada de junção da aplicação da amostra.

Depois de se juntar a uma chamada, será solicitado que dê permissão à aplicação para aceder à sua câmara e microfone, se não for já autorizado. Você verá a tela principal de chamada onde vive a experiência de chamada principal.

Screenshot mostrando o ecrã principal da aplicação da amostra.

Componentes do ecrã principal de chamada:

  • Galeria dos Media: O palco principal onde os participantes são mostrados. Se um participante tiver a sua câmara ativada, o seu feed de vídeo é mostrado aqui. Cada participante tem um azulejo individual que mostra o seu nome de exibição e fluxo de vídeo (quando há um). A galeria suporta vários participantes e é atualizada quando os participantes são adicionados ou removidos à chamada.
  • Barra de Ação: É aqui que estão localizados os controlos de chamada primário. Estes controlos permitem-lhe ligar/desligar o vídeo e o microfone, partilhar o ecrã e deixar a chamada.

Abaixo encontrará mais informações sobre pré-requisitos e passos para configurar a amostra.

Pré-requisitos

Amostra de execução local

A amostra de chamada do grupo pode ser executada localmente usando o Android Studio. Os desenvolvedores podem usar o seu dispositivo físico ou um emulador para testar a aplicação.

Antes de executar a amostra pela primeira vez

  1. Abra o Estúdio Android e selecione Open an Existing Project
  2. Abra a AzureCalling pasta no interior do desbloqueio descarregado para a amostra.
  3. Expandir aplicativos/ativos para atualizar appSettings.properties. Desaprova o valor para a chave communicationTokenFetchUrl ser o URL para o seu Ponto final de autenticação configurado como pré-requisito.

Amostra de execução

Construa e execute a amostra no Android Studio.

(Opcional) Assegurar um ponto final de autenticação

Para fins de demonstração, esta amostra utiliza um ponto final acessível ao público por defeito para obter um Azure Communication Services token. Para cenários de produção, recomendamos que use o seu próprio ponto final seguro para provisões suas próprias fichas.

Com uma configuração adicional, esta amostra suporta a ligação a um ponto final protegido do Azure Ative (Azure AD) para que o login do utilizador seja necessário para que a aplicação procure um token Azure Communication Services. Veja os passos abaixo:

  1. Ativar a autenticação do Azure Ative Directory na sua aplicação.

  2. Aceda à página geral da sua aplicação registada no Azure Ative Directory App Registrations. Tome nota doPackage name, Signature hashMSAL Configutaion

Configuração do Diretório Ativo Azure na portal do Azure.

  1. Editar AzureCalling/app/src/main/res/raw/auth_config_single_account.json e definir isAADAuthEnabled para permitir o Azure Ative Directory

  2. Editar AndroidManifest.xml e definir android:path para keystore assinatura hash. (Opcional. O valor atual utiliza haxixe de debug.keystore. Se forem utilizadas chaves diferentes, esta deve ser atualizada.)

    <activity android:name="com.microsoft.identity.client.BrowserTabActivity">
         <intent-filter>
             <action android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.DEFAULT" />
             <category android:name="android.intent.category.BROWSABLE" />
             <data
                 android:host="com.azure.samples.communication.calling"
                 android:path="/Signature hash" <!-- do not remove /. The current hash in AndroidManifest.xml is for debug.keystore. -->
                 android:scheme="msauth" />
         </intent-filter>
     </activity>

  3. Copie a configuração do MSAL Android de portal do Azure e pasta para AzureCalling/app/src/main/res/raw/auth_config_single_account.json. Incluir "account_mode": "SINGLE"

       {
      "client_id": "",
      "authorization_user_agent": "DEFAULT",
      "redirect_uri": "",
      "account_mode" : "SINGLE",
      "authorities": [
         {
            "type": "AAD",
            "audience": {
            "type": "AzureADMyOrg",
            "tenant_id": ""
            }
         }
      ]
   }

  4. Edite AzureCalling/app/src/main/res/raw/auth_config_single_account.json e detenva o valor para a chave communicationTokenFetchUrl ser o URL para o seu ponto de finalização de autenticação seguro.

  5. Editar AzureCalling/app/src/main/res/raw/auth_config_single_account.json e definir o valor para a chave aadScopes a partir de Azure Active DirectoryExpose an API âmbitos

  6. Desaponte o valor para graphURLAzureCalling/app/assets/appSettings.properties o ponto final Graph API para obter informações do utilizador.

  7. Edite AzureCalling/app/src/main/assets/appSettings.properties e detenva o valor da chave tenant para ativar o login silencioso para que o utilizador não tenha de ser autenticado uma e outra vez durante o reinício da aplicação.

Limpar os recursos

Se pretender limpar e remover uma assinatura de Serviços de Comunicação, pode eliminar o grupo de recursos ou recursos. A eliminação do grupo de recursos também elimina quaisquer outros recursos que lhe sejam associados. Saiba mais sobre a limpeza de recursos.

Passos seguintes

Faça o download da amostra do GitHub

Para obter mais informações, veja os seguintes artigos:

Leitura adicional