Kom igång med exemplet med gruppsamtal

  • Artikel
  • 11 minuter för att läsa

Exemplet Azure Communication Services grupp anropar Hero visar hur Communication Services Anropa webb-SDK kan användas för att skapa en gruppsamtalsupplevelse.

I den här exempelsna snabbstarten lär vi dig hur exemplet fungerar innan vi kör exemplet på den lokala datorn. Sedan distribuerar vi exemplet till Azure med dina egna Azure Communication Services resurser.

Ladda ned kod

Hitta projektet för det här exemplet på GitHub. En version av exemplet som innehåller funktioner som för närvarande finns i offentlig förhandsversion, till exempel Teams Interop och Call Recording, finns på en separat gren.

Översikt

Exemplet har både ett program på klientsidan och ett program på serversidan. Programmet på klientsidan är ett React/Redux-webbprogram som använder Microsofts Fluent UI-ramverk. Det här programmet skickar begäranden ASP.NET Core ett program på serversidan som hjälper programmet på klientsidan att ansluta till Azure.

Så här ser exemplet ut:

Skärmbild som visar landningssidan för exempelprogrammet.

När du trycker på knappen "Starta ett anrop" hämtar webbprogrammet en användaråtkomsttoken från programmet på serversidan. Denna token används sedan för att ansluta klientappen till Azure Communication Services. När token har hämtats uppmanas du att ange den kamera och mikrofon som du vill använda. Du kommer att kunna inaktivera/aktivera dina enheter med växlingskontroller:

Skärmbild som visar församtalsskärmen i exempelprogrammet.

När du har konfigurerat ditt visningsnamn och dina enheter kan du ansluta till samtalssessionen. Sedan visas huvudanropsarbetsytan där den grundläggande anropsupplevelsen finns.

Skärmbild som visar huvudskärmen i exempelprogrammet.

Komponenter på huvudanropsskärmen:

  • Media Gallery: Huvudsteget där deltagarna visas. Om en deltagare har kameran aktiverad visas deras videoflöde här. Varje deltagare har en enskild panel som visar deras visningsnamn och videoström (när det finns en)
  • Rubrik: Det är här som de primära anropskontrollerna finns för att växla inställningar och deltagares sidofält, aktivera och blanda video, dela skärm och lämna anropet.
  • Sidofält: Här visas information om deltagare och inställningar när du använder kontrollerna i rubriken. Komponenten kan stängas med hjälp av "X" i det övre högra hörnet. Deltagarnas sidofält visar en lista över deltagare och en länk för att bjuda in fler användare att chatta. Inställningar sidofältet kan du konfigurera inställningar för mikrofon och kamera.

Anteckning

Baserat på begränsningar i SDK för webbsamtal återges endast en fjärrvideoström. Mer information finns i Anropa SDK Stream-stöd.

Nedan hittar du mer information om förutsättningar och steg för att konfigurera exemplet.

Förutsättningar

Distribuera tjänsten lokalt & klientprogram

Exemplet på gruppsamtal är i stort sett två program: ClientApp och Service.NET appen.

När vi vill distribuera lokalt måste vi starta båda programmen. När serverappen besöks från webbläsaren används den lokalt distribuerade ClientApp för användarupplevelsen.

Du kan testa exemplet lokalt genom att öppna flera webbläsarsessioner med URL:en för anropet för att simulera ett anrop till flera användare.

Innan du kör exemplet för första gången

  1. Öppna en instans av PowerShell, Windows-terminal, kommandotolk eller motsvarande och navigera till den katalog som du vill klona exemplet till.
  2. git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git
  3. Hämta Connection String från Azure Portal. Mer information om anslutningssträngar finns i Skapa en Azure Communication Services resurser.
  4. När du har fått Connection String , lägger du till anslutningssträngen i filen Calling/appsetting.json som finns under mappen Service .NET. Ange anslutningssträngen i variabeln : ResourceConnectionString .

Lokal körning

  1. Gå till Mappen Anropa och öppna Calling.csproj lösningen i Visual Studio.
  2. Kör Calling projektet. Webbläsaren öppnas på localhost:5001 .

Publicera exemplet till Azure

  1. Högerklicka på projektet Calling och välj Publicera.
  2. Skapa en ny publiceringsprofil och välj din Azure-prenumeration.
  3. Innan du publicerar lägger du till anslutningssträngen med och fyller i som nyckel och anger anslutningssträngen (kopierad från Edit App Service Settings ResourceConnectionString appsettings.json) som värde.

Rensa resurser

Om du vill rensa och ta bort en Communication Services prenumeration kan du ta bort resursen eller resursgruppen. När du tar bort resursgruppen tas även alla andra resurser som är associerade med den bort. Läs mer om att rensa resurser.

Nästa steg

Ladda ned exemplet från GitHub

Mer information finns i följande artiklar:

Mer att läsa

  • Exempel – Hitta fler exempel på översiktssidan för våra exempel.
  • Redux – tillståndshantering på klientsidan
  • FluentUI – Microsoft-baserat användargränssnittsbibliotek
  • React – Bibliotek för att skapa användargränssnitt
  • ASP.NET Core – Ramverk för att skapa webbprogram

Exemplet Azure Communication Services gruppsamtal till Hero för iOS visar hur Communication Services Calling iOS SDK kan användas för att skapa en gruppsamtalsupplevelse som innehåller röst och video. I den här exempel snabbstarten lär du dig att konfigurera och köra exemplet. En översikt över exemplet tillhandahålls för kontexten.

Ladda ned kod

Leta reda på projektet för det här exemplet GitHub. En version av exemplet med Teams Interop finns på en separat gren.

Översikt

Exemplet är ett inbyggt iOS-program som använder Azure Communication Services iOS-SDK:er för att skapa en samtalsupplevelse som har både röst- och videosamtal. Programmet använder en komponent på serversidan för att etablera åtkomsttoken som sedan används för att initiera Azure Communication Services SDK. Om du vill konfigurera den här komponenten på serversidan kan du följa självstudien Betrodd tjänst Azure Functions tjänst.

Så här ser exemplet ut:

Skärmbild som visar landningssidan för exempelprogrammet.

När du trycker på knappen "Starta nytt anrop" skapar iOS-programmet ett nytt anrop och ansluter det. Med programmet kan du koppla ett befintligt Azure Communication Services anrop genom att ange det befintliga anrops-ID:t.

När du har kopplat ett anrop uppmanas du att ge programmet behörighet att komma åt kameran och mikrofonen. Du uppmanas också att ange ett visningsnamn.

Skärmbild som visar förinropsskärmen för exempelprogrammet.

När du har konfigurerat ditt visningsnamn och dina enheter kan du ansluta till anropet. Du ser huvudanropsarbetsytan där den grundläggande samtalsupplevelsen finns.

Skärmbild som visar huvudskärmen i exempelprogrammet.

Komponenter på huvudskärmen för anrop:

  • Media Gallery: Huvudsteget där deltagarna visas. Om en deltagare har kameran aktiverad visas deras videoflöde här. Varje deltagare har en enskild panel som visar deras visningsnamn och videoström (när det finns en). Galleriet stöder flera deltagare och uppdateras när deltagarna läggs till eller tas bort i anropet.
  • Åtgärdsfält: Det är här som de primära anropskontrollerna finns. Med de här kontrollerna kan du aktivera/inaktivera videon och mikrofonen, dela skärmen och lämna anropet.

Nedan hittar du mer information om krav och steg för att konfigurera exemplet.

Förutsättningar

Köra exempel lokalt

Exemplet för gruppanrop kan köras lokalt med XCode. Utvecklare kan antingen använda sin fysiska enhet eller en emulator för att testa programmet.

Innan du kör exemplet för första gången

  1. Installera beroenden genom att köra pod install .
  2. Öppna AzureCalling.xcworkspace i XCode.
  3. Uppdatera AppSettings.plist . Ange värdet för nyckeln communicationTokenFetchUrl som URL för autentiseringsslutpunkten.

Kör exempel

Skapa och kör exemplet i XCode.

(Valfritt) Skydda en autentiseringsslutpunkt

I exempelsyfte använder det här exemplet som standard en offentligt tillgänglig slutpunkt för att hämta en Azure Communication Services åtkomsttoken. För produktionsscenarier rekommenderar vi att du använder din egen skyddade slutpunkt för att etablera dina egna token.

Med ytterligare konfiguration stöder det här exemplet anslutning till en Azure Active Directory-skyddad slutpunkt (Azure AD) så att användarinloggning krävs för att appen ska kunna hämta en Azure Communication Services-åtkomsttoken. Se stegen nedan:

  1. Aktivera Azure Active Directory autentisering i din app.
  2. Gå till översiktssidan för din registrerade app under Azure Active Directory appregistreringar. Anteckna , Application (client) ID Directory (tenant) ID , Application ID URI

Azure Active Directory konfiguration på Azure Portal.

  1. Öppna AppSettings.plist i Xcode och lägg till följande nyckelvärden:
    • communicationTokenFetchUrl: Den URL som ska Azure Communication Services token
    • isAADAuthEnabled: Ett booleskt värde som anger om Azure Communication Services tokenautentisering krävs eller inte
    • aadClientId: Ditt program-ID (klient)
    • aadTenantId: Ditt katalog-ID (klient)-ID
    • aadRedirectURI: Omdirigerings-URI:en ska ha det här formatet: msauth.<app_bundle_id>://auth
    • aadScopes: En matris med behörighetsomfång som begärs från användare för auktorisering. Lägg <Application ID URI>/user_impersonation till i matrisen för att bevilja åtkomst till autentiseringsslutpunkten

Rensa resurser

Om du vill rensa och ta bort en Communication Services prenumeration kan du ta bort resursen eller resursgruppen. När du tar bort resursgruppen tas även alla andra resurser som är associerade med den bort. Läs mer om att rensa resurser.

Nästa steg

Ladda ned exemplet från GitHub

Mer information finns i följande artiklar:

Mer att läsa

Exemplet Azure Communication Services group calling hero för Android visar hur Communication Services Calling Android SDK kan användas för att skapa en gruppsamtalsupplevelse som innehåller röst och video. I den här exempel snabbstarten lär du dig att konfigurera och köra exemplet. En översikt över exemplet tillhandahålls för kontexten.

Ladda ned kod

Leta reda på projektet för det här exemplet GitHub. En version av exemplet med Teams Interop finns på en separat gren.

Översikt

Exemplet är ett ursprungligt Android-program som använder android-AZURE COMMUNICATION SERVICES för att skapa en samtalsupplevelse som har både röst- och videosamtal. Programmet använder en komponent på serversidan för att etablera åtkomsttoken som sedan används för att initiera Azure Communication Services SDK. Om du vill konfigurera den här komponenten på serversidan kan du följa självstudien Betrodd tjänst Azure Functions tjänst.

Så här ser exemplet ut:

Skärmbild som visar landningssidan för exempelprogrammet.

När du trycker på knappen "Starta nytt anrop" skapar Android-programmet ett nytt anrop och ansluter det. Med programmet kan du också koppla ett befintligt Azure Communication Services anrop genom att ange det befintliga anrops-ID:t.

När du har kopplat ett anrop uppmanas du att ge programmet behörighet att komma åt kameran och mikrofonen. Du uppmanas också att ange ett visningsnamn.

Skärmbild som visar förinropsskärmen för exempelprogrammet.

När du har konfigurerat ditt visningsnamn och dina enheter kan du ansluta till anropet. Du ser huvudanropsarbetsytan där den grundläggande samtalsupplevelsen finns.

Skärmbild som visar huvudskärmen i exempelprogrammet.

Komponenter på huvudskärmen för anrop:

  • Media Gallery: Huvudsteget där deltagarna visas. Om en deltagare har kameran aktiverad visas deras videoflöde här. Varje deltagare har en enskild panel som visar deras visningsnamn och videoström (när det finns en). Galleriet stöder flera deltagare och uppdateras när deltagarna läggs till eller tas bort i anropet.
  • Åtgärdsfält: Det är här som de primära anropskontrollerna finns. Med de här kontrollerna kan du aktivera/inaktivera videon och mikrofonen, dela skärmen och lämna anropet.

Nedan hittar du mer information om krav och steg för att konfigurera exemplet.

Förutsättningar

Köra exempel lokalt

Exemplet för gruppsamtal kan köras lokalt med hjälp av Android Studio. Utvecklare kan antingen använda sin fysiska enhet eller en emulator för att testa programmet.

Innan du kör exemplet för första gången

  1. Öppna Android Studio och välj Open an Existing Project
  2. Öppna mappen AzureCalling i den nedladdade versionen för exemplet.
  3. Expandera app/tillgångar för att uppdatera appSettings.properties . Ange värdet för nyckeln till communicationTokenFetchUrl URL:en för din autentiseringsslutpunkt som en förutsättning.

Kör exempel

Skapa och kör exemplet i Android Studio.

(Valfritt) Skydda en autentiseringsslutpunkt

I demonstrationssyfte använder det här exemplet en offentligt tillgänglig slutpunkt som standard för att hämta en Azure Communication Services token. För produktionsscenarier rekommenderar vi att du använder din egen skyddade slutpunkt för att etablera dina egna token.

Med ytterligare konfiguration stöder det här exemplet anslutning till en Azure Active Directory-skyddad slutpunkt (Azure AD) så att användarinloggning krävs för att appen ska kunna hämta en Azure Communication Services-token. Se stegen nedan:

  1. Aktivera Azure Active Directory autentisering i din app.

  2. Gå till översiktssidan för din registrerade app under Azure Active Directory appregistreringar. Anteckna , Package name Signature hash , MSAL Configutaion

Azure Active Directory konfiguration på Azure Portal.

  1. Redigera AzureCalling/app/src/main/res/raw/auth_config_single_account.json och ange för att aktivera isAADAuthEnabled Azure Active Directory

  2. Redigera AndroidManifest.xml och ställ in på android:path keystore signatur-hash. (Valfritt. Det aktuella värdet använder hash från paketerat debug.keystore. Om ett annat nyckellager används måste detta uppdateras.)

    <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. Kopiera MSAL Android-konfigurationen från Azure Portal klistra in på AzureCalling/app/src/main/res/raw/auth_config_single_account.json . Inkludera "account_mode" : "SINGLE"

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

  4. Redigera AzureCalling/app/src/main/res/raw/auth_config_single_account.json och ange att värdet för nyckeln ska vara communicationTokenFetchUrl URL:en för din säkra autentiseringsslutpunkt.

  5. Redigera AzureCalling/app/src/main/res/raw/auth_config_single_account.json och ange värdet för nyckeln från aadScopes Azure Active Directory Expose an API omfång

Rensa resurser

Om du vill rensa och ta bort en Communication Services prenumeration kan du ta bort resursen eller resursgruppen. När du tar bort resursgruppen tas även alla andra resurser som är associerade med den bort. Läs mer om att rensa resurser.

Nästa steg

Ladda ned exemplet från GitHub

Mer information finns i följande artiklar:

Mer att läsa