Aan de slag met het hero-voorbeeld voor groepsgesprekken

  • Artikel
  • 12 minuten om te lezen

Het Azure Communication Services Hero-voorbeeld van groepsroepen laat zien hoe de Communication Services Calling Web SDK kan worden gebruikt om een ervaring voor groepsroepen te bouwen.

In deze quickstart over hero-voorbeelden komt u te weten hoe het voorbeeld werkt voordat u het op uw lokale computer gaat uitvoeren. Vervolgens gaat u het voorbeeld in Azure implementeren met behulp van uw eigen Azure Communication Services-resources.

Code downloaden

Zoek het project voor dit voorbeeld op GitHub. Een versie van het voorbeeld met functies die momenteel in openbare preview zijn, zoals Teams Interop en Call Recording, vindt u in een afzonderlijke vertakking.

Overzicht

Het voorbeeld heeft zowel een toepassing aan de clientzijde als een toepassing aan de serverzijde. De toepassing aan de clientzijde is een React/Redux-webtoepassing die gebruikmaakt van het Fluent UI-framework van Microsoft. Met deze toepassing worden aanvragen verzonden naar een ASP.NET Core-toepassing aan de serverzijde zodat de toepassing aan de clientzijde kan worden verbonden met Azure.

Het voorbeeld ziet er als volgt uit:

Schermopname van de landingspagina van de voorbeeldtoepassing.

Wanneer de knop Een gesprek starten kiest, wordt door de webtoepassing een toegangstoken voor gebruikers opgehaald bij de toepassing op de server. Vervolgens wordt dit token gebruikt om de client-app met Azure Communication Services te verbinden. Zodra het token is opgehaald, wordt u gevraagd om de camera en de microfoon die u wilt gebruiken, op te geven. Met behulp van de wisselknoppen kunt u uw apparaten in-/uitschakelen:

Schermopname van het scherm voorafgaand aan het gesprek van de voorbeeldtoepassing.

Zodra u uw weergavenaam en apparaten hebt geconfigureerd, kunt u deelnemen aan de gesprekssessie. Vervolgens ziet u het hoofdgespreksvas waar de belangrijkste oproepervaring zich voordeed.

Schermopname van het hoofdscherm van de voorbeeldtoepassing.

Onderdelen van het hoofdgespreksscherm:

  • Mediagalerie: Het hoofdgebied waarin de deelnemers worden weergegeven. Als deelnemers hun camera hebben ingeschakeld, wordt hier hun videofeed weergegeven. Elke deelnemer beschikt over een afzonderlijke tegel waarop hun weergavenaam en videostream (indien beschikbaar) worden weergegeven
  • Header: Dit is het deel met de primaire besturingselementen voor het gesprek waarmee u tussen de instellingen en de zijbalk met deelnemers kunt wisselen, beeld en geluid kunt in- en uitschakelen, het scherm kunt delen en het gesprek kunt verlaten.
  • Zijbalk: Hier worden informatie over de deelnemers en de instellingen weergegeven wanneer u tussen de besturingselementen in de header wisselt. U kunt het onderdeel verwijderen door op X te klikken in de rechterbovenhoek. In de zijbalk met deelnemers ziet u een lijst met alle deelnemers en een koppeling om meer gebruikers voor het gesprek uit te nodigen. In de zijbalk met instellingen kunt u de microfoon- en camera-instellingen configureren.

Notitie

Op basis van de beperkingen van de weboproep-SDK wordt slechts één externe videostream weergegeven. Zie Ondersteuning voor SDK Stream aanroepen voor meer informatie.

Hieronder vindt u meer informatie over de vereisten en stappen voor het instellen van het voorbeeld.

Vereisten

De service en clienttoepassingen lokaal implementeren

Het voorbeeld voor groepsgesprekken bestaat in feite uit twee toepassingen: ClientApp en de Service.NET-app.

Als u het voorbeeld lokaal wilt implementeren, moeten beide toepassingen worden gestart. Wanneer u de server-app opent vanuit de browser, wordt de lokaal geïmplementeerde ClientApp gebruikt voor de gebruikerservaring.

U kunt het voorbeeld lokaal testen door meerdere browsersessies te openen met de URL van uw gesprek om een gesprek met meerdere gebruikers te simuleren.

Voordat u het voorbeeld voor de eerste keer uitvoert

  1. Open een instantie van PowerShell, Windows Terminal, de opdrachtprompt of een vergelijkbare service en ga naar de map waarnaar u het voorbeeld wilt klonen.
  2. git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git
  3. Haal de Connection String op uit Azure Portal. Zie Een Azure Communication Services maken voor meer informatie over verbindingsreeksen.
  4. Zodra u de Connection String hebt opgehaald, voegt u de verbindingsreeks toe aan het bestand Calling/appsetting.json. U vindt dit bestand in de Service .NET-map. Voer in de variabele uw verbindingsreeks in: ResourceConnectionString.

Lokaal uitvoeren

  1. Ga naar de map Aanroepen en open Calling.csproj de oplossing in Visual Studio.
  2. Voer project Calling uit. De browser wordt geopend op localhost:5001 .

Het voorbeeld naar Azure publiceren

  1. Klik met de rechtermuisknop op het Calling-project en selecteer Publiceren.
  2. Maak een nieuw publicatieprofiel en selecteer uw Azure-abonnement.
  3. Voeg vóór publicatie uw verbindingsreeks toe met Edit App Service Settings, vul ResourceConnectionString in als de sleutel en geef uw verbindingsreeks (gekopieerd uit appsettings.json) als de waarde op.

Resources opschonen

Als u een Communication Services-abonnement wilt opschonen en verwijderen, kunt u de resource of resourcegroep verwijderen. Als u de resourcegroep verwijdert, worden ook alle bijbehorende resources verwijderd. Meer informatie over het opschonen van resources.

Volgende stappen

Het voorbeeld downloaden uit GitHub

Raadpleeg voor meer informatie de volgende artikelen:

Meer artikelen

  • Voorbeelden : meer voorbeelden en voorbeelden vindt u op onze overzichtspagina met voorbeelden.
  • Redux: statusbeheer op de client
  • FluentUI: door Microsoft ondersteunde bibliotheek voor de gebruikersinterface
  • React: bibliotheek voor het ontwikkelen van gebruikersinterfaces
  • ASP.NET Core: een framework voor het bouwen van webtoepassingen

In het Azure Communication Services Group Calling Hero-voorbeeld voor iOS ziet u hoe de Communication Services Calling iOS SDK kan worden gebruikt voor het bouwen van een groepsuitroepervaring die spraak en video bevat. In deze voorbeeld quickstart leert u hoe u het voorbeeld kunt instellen en uitvoeren. Er wordt een overzicht van het voorbeeld gegeven voor context.

Code downloaden

Zoek het project voor dit voorbeeld op GitHub. Een versie van het voorbeeld met Teams Interop vindt u op een afzonderlijke vertakking.

Overzicht

Het voorbeeld is een systeemeigen iOS-toepassing die gebruikmaakt van de Azure Communication Services iOS SDK's voor het bouwen van een aanroepervaring die zowel spraak- als video-oproepen bevat. De toepassing maakt gebruik van een serveronderdeel voor het inrichten van toegangstokens die vervolgens worden gebruikt om de SDK Azure Communication Services initialiseren. Als u dit onderdeel aan de serverzijde wilt configureren, kunt u de zelfstudie Vertrouwde service met Azure Functions volgen.

Het voorbeeld ziet er als volgt uit:

Schermopname van de landingspagina van de voorbeeldtoepassing.

Wanneer u op de knop Nieuwe aanroep starten drukt, maakt de iOS-toepassing een nieuwe aanroep en voegt deze toe. Met de toepassing kunt u een bestaande Azure Communication Services aanroepen door de id van de bestaande aanroep op te geven.

Nadat u een oproep hebt ingediend, wordt u gevraagd om de toepassing toestemming te geven voor toegang tot uw camera en microfoon. U wordt ook gevraagd om een weergavenaam op te geven.

Schermopname van het scherm voorafgaand aan het gesprek van de voorbeeldtoepassing.

Zodra u uw weergavenaam en apparaten hebt geconfigureerd, kunt u deelnemen aan de aanroep. U ziet het hoofdgespreksvas waar de belangrijkste oproepervaring zich voordeed.

Schermopname van het hoofdscherm van de voorbeeldtoepassing.

Onderdelen van het hoofdgespreksscherm:

  • Mediagalerie: Het hoofdgebied waarin de deelnemers worden weergegeven. Als deelnemers hun camera hebben ingeschakeld, wordt hier hun videofeed weergegeven. Elke deelnemer heeft een afzonderlijke tegel waarin de weergavenaam en videostream worden weergegeven (wanneer er een is). De galerie ondersteunt meerdere deelnemers en wordt bijgewerkt wanneer deelnemers aan de oproep worden toegevoegd of verwijderd.
  • Actiebalk: hier bevinden zich de primaire besturingselementen voor aanroepen. Met deze besturingselementen kunt u uw video en microfoon in-/uitschakelen, uw scherm delen en de aanroep verlaten.

Hieronder vindt u meer informatie over de vereisten en stappen voor het instellen van het voorbeeld.

Vereisten

Voorbeeld lokaal uitvoeren

Het voorbeeld van groeps-aanroepen kan lokaal worden uitgevoerd met behulp van XCode. Ontwikkelaars kunnen hun fysieke apparaat of een emulator gebruiken om de toepassing te testen.

Voordat u het voorbeeld voor de eerste keer uitvoert

  1. Installeer afhankelijkheden door uit te pod install gaan.
  2. Open AzureCalling.xcworkspace in XCode.
  3. Werk AppSettings.plist bij. Stel de waarde voor de communicationTokenFetchUrl sleutel in op de URL voor uw verificatie-eindpunt.

Voorbeeld uitvoeren

Bouw het voorbeeld en voer het uit in XCode.

(Optioneel) Een verificatie-eindpunt beveiligen

Voor demonstratiedoeleinden wordt in dit voorbeeld standaard een openbaar toegankelijk eindpunt gebruikt om een Azure Communication Services op te halen. Voor productiescenario's raden we u aan uw eigen beveiligde eindpunt te gebruiken om uw eigen tokens in terichten.

Met aanvullende configuratie biedt dit voorbeeld ondersteuning voor het maken van verbinding met een Azure Active Directory-eindpunt (Azure AD), zodat de gebruiker zich moet aanmelden om een Azure Communication Services-toegang token op te halen. Zie de onderstaande stappen:

  1. Schakel Azure Active Directory verificatie in uw app in.
  2. Ga naar de overzichtspagina van uw geregistreerde app Azure Active Directory App-registraties. Noteer de Application (client) ID Directory (tenant) ID , , Application ID URI

Azure Active Directory configuratie op Azure Portal.

  1. Open AppSettings.plist in Xcode en voeg de volgende sleutelwaarden toe:
    • communicationTokenFetchUrl: De URL voor het aanvragen van Azure Communication Services token
    • isAADAuthEnabled: Een Booleaanse waarde om aan te geven of Azure Communication Services tokenverificatie al dan niet is vereist
    • aadClientId: Uw toepassings-id (client-id)
    • aadTenantId: Uw directory-id (tenant-id)
    • aadRedirectURI: De omleidings-URI moet de volgende indeling hebben: msauth.<app_bundle_id>://auth
    • aadScopes: Een matrix met machtigingsbereiken die zijn aangevraagd bij gebruikers voor autorisatie. Toevoegen <Application ID URI>/user_impersonation aan de matrix om toegang te verlenen tot het verificatie-eindpunt

Resources opschonen

Als u een Communication Services-abonnement wilt opschonen en verwijderen, kunt u de resource of resourcegroep verwijderen. Als u de resourcegroep verwijdert, worden ook alle bijbehorende resources verwijderd. Meer informatie over het opschonen van resources.

Volgende stappen

Het voorbeeld downloaden uit GitHub

Raadpleeg voor meer informatie de volgende artikelen:

Meer artikelen

In het Azure Communication Services Group Calling Hero-voorbeeld voor Android ziet u hoe de Communication Services Calling Android SDK kan worden gebruikt om een groepsroepervaring te bouwen die spraak en video bevat. In deze voorbeeld quickstart leert u hoe u het voorbeeld kunt instellen en uitvoeren. Er wordt een overzicht van het voorbeeld gegeven voor context.

Code downloaden

Zoek het project voor dit voorbeeld op GitHub. Een versie van het voorbeeld met Teams Interop vindt u op een afzonderlijke vertakking.

Overzicht

Het voorbeeld is een systeemeigen Android-toepassing die gebruikmaakt van de Azure Communication Services Android SDK's voor het bouwen van een aanroepervaring die zowel spraak- als video-oproepen bevat. De toepassing maakt gebruik van een serveronderdeel voor het inrichten van toegangstokens die vervolgens worden gebruikt om de SDK Azure Communication Services initialiseren. Als u dit onderdeel aan de serverzijde wilt configureren, kunt u de zelfstudie Vertrouwde service met Azure Functions volgen.

Het voorbeeld ziet er als volgt uit:

Schermopname van de landingspagina van de voorbeeldtoepassing.

Wanneer u op de knop Nieuwe aanroep starten drukt, maakt de Android-toepassing een nieuwe aanroep en voegt deze toe. Met de toepassing kunt u ook een bestaande Azure Communication Services aanroepen door de id van de bestaande aanroep op te geven.

Nadat u een oproep hebt ingediend, wordt u gevraagd om de toepassing toestemming te geven voor toegang tot uw camera en microfoon. U wordt ook gevraagd om een weergavenaam op te geven.

Schermopname van het scherm voorafgaand aan het gesprek van de voorbeeldtoepassing.

Zodra u de weergavenaam en apparaten hebt geconfigureerd, kunt u deelnemen aan de aanroep. U ziet het hoofdgespreksvas waar de belangrijkste oproepervaring zich voordeed.

Schermopname van het hoofdscherm van de voorbeeldtoepassing.

Onderdelen van het hoofdgespreksscherm:

  • Mediagalerie: Het hoofdgebied waarin de deelnemers worden weergegeven. Als deelnemers hun camera hebben ingeschakeld, wordt hier hun videofeed weergegeven. Elke deelnemer heeft een afzonderlijke tegel waarin de weergavenaam en videostream worden weergegeven (wanneer er een is). De galerie ondersteunt meerdere deelnemers en wordt bijgewerkt wanneer deelnemers aan de oproep worden toegevoegd of verwijderd.
  • Actiebalk: hier bevinden zich de primaire besturingselementen voor aanroepen. Met deze besturingselementen kunt u uw video en microfoon in-/uitschakelen, uw scherm delen en de aanroep verlaten.

Hieronder vindt u meer informatie over de vereisten en stappen voor het instellen van het voorbeeld.

Vereisten

Voorbeeld lokaal uitvoeren

Het voorbeeld van groeps-aanroepen kan lokaal worden uitgevoerd met Android Studio. Ontwikkelaars kunnen hun fysieke apparaat of een emulator gebruiken om de toepassing te testen.

Voordat u het voorbeeld voor de eerste keer uitvoert

  1. Open Android Studio selecteer Open an Existing Project
  2. Open de AzureCalling map in de gedownloade release voor het voorbeeld.
  3. Vouw app/assets uit om bij te appSettings.properties werken. Stel de waarde voor de sleutel communicationTokenFetchUrl in als de URL voor uw verificatie-eindpunt dat is ingesteld als een vereiste.

Voorbeeld uitvoeren

Bouw het voorbeeld en voer het uit in Android Studio.

(Optioneel) Een verificatie-eindpunt beveiligen

Voor demonstratiedoeleinden wordt in dit voorbeeld standaard een openbaar toegankelijk eindpunt gebruikt om een Azure Communication Services op te halen. Voor productiescenario's raden we u aan uw eigen beveiligde eindpunt te gebruiken om uw eigen tokens in terichten.

Met aanvullende configuratie ondersteunt dit voorbeeld het maken van verbinding met een Azure Active Directory (Azure AD) beveiligd eindpunt, zodat gebruikers zich moeten aanmelden om een Azure Communication Services-token op te halen. Zie de onderstaande stappen:

  1. Schakel Azure Active Directory verificatie in uw app in.

  2. Ga naar de overzichtspagina van uw geregistreerde app Azure Active Directory App-registraties. Noteer de Package name Signature hash , , MSAL Configutaion

Azure Active Directory configuratie op Azure Portal.

  1. Bewerken AzureCalling/app/src/main/res/raw/auth_config_single_account.json en instellen om de isAADAuthEnabled Azure Active Directory

  2. Bewerk AndroidManifest.xml en stel in op android:path keystore-handtekeninghash. (Optioneel. De huidige waarde maakt gebruik van hash uit gebundelde debug.keystore. Als er een andere sleutelstore wordt gebruikt, moet dit worden bijgewerkt.)

    <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. Kopieer de MSAL Android-configuratie van Azure Portal en plak deze in AzureCalling/app/src/main/res/raw/auth_config_single_account.json . 'account_mode' opnemen: 'SINGLE'

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

  4. Bewerk AzureCalling/app/src/main/res/raw/auth_config_single_account.json en stel de waarde voor de sleutel in op de URL voor het eindpunt voor beveiligde communicationTokenFetchUrl verificatie.

  5. De AzureCalling/app/src/main/res/raw/auth_config_single_account.json waarde voor de sleutel vanuit aadScopes Azure Active Directory Expose an API scopes bewerken en instellen

Resources opschonen

Als u een Communication Services-abonnement wilt opschonen en verwijderen, kunt u de resource of resourcegroep verwijderen. Als u de resourcegroep verwijdert, worden ook alle bijbehorende resources verwijderd. Meer informatie over het opschonen van resources.

Volgende stappen

Het voorbeeld downloaden uit GitHub

Raadpleeg voor meer informatie de volgende artikelen:

Meer artikelen