Aan de slag met het voorbeeld van de aanroepende hero

Het Azure Communication Services Hero-voorbeeld voor groepsgesprekken laat zien hoe de Web-SDK voor oproepen van Communication Services kan worden gebruikt om een groepsgesprekken 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 beschikbaar zijn in de openbare preview, zoals Teams Interop en Call Recording , vindt u in een afzonderlijke vertakking.

Implementeren op Azure

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 hoofdgesprekscanvas waar de belangrijkste oproepervaring zich bevindt.

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 beperkingen van de Web Calling SDK worden slechts 4 videostreams en 1 stream voor schermdeling weergegeven. Zie voor meer informatie SDK Stream Support aanroepen.

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

Vereisten

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.

    git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git`
    
  2. Haal de Connection String gegevens op uit de Azure Portal of met behulp van de Azure CLI.

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

    Zie Een Azure Communications-resource maken voor meer informatie over verbindingsreeksen

  3. Zodra u het Connection Stringbestand hebt, voegt u de connection string toe aan het bestand samples/Server/appsetting.json. Voer in de variabele uw verbindingsreeks in: ResourceConnectionString.

  4. Haal de Endpoint string gegevens op uit de Azure Portal of met behulp van de Azure CLI.

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

    Zie Een Azure Communication-resources maken voor meer informatie over eindpunttekenreeksen

  5. Zodra u het Endpoint Stringbestand hebt, voegt u de eindpunttekenreeks toe aan het bestand samples/Server/appsetting.json . De eindpunttekenreeks invoeren in de variabele EndpointUrl

Lokaal uitvoeren

  1. Afhankelijkheden installeren

    npm run setup
    
  2. De aanroepende app starten

    npm run start
    

    Hiermee opent u een clientserver op poort 3000 die de websitebestanden dient en een API-server op poort 8080 die functionaliteit uitvoert, zoals munttokens voor oproepdeelnemers.

Problemen oplossen

  • In de app wordt een scherm 'Niet-ondersteunde browser' weergegeven, maar ik ben in een ondersteunde browser.

    Als uw app wordt geleverd via een andere hostnaam dan localhost, moet u verkeer via https en niet http verwerken.

Publiceren naar Azure

  1. npm run setup
  2. npm run build
  3. npm run package
  4. Gebruik de Azure-extensie en implementeer de map Aanroepen/dist in uw app-service

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

Raadpleeg voor meer informatie de volgende artikelen:

Meer artikelen

  • Voorbeelden : zoek meer voorbeelden en voorbeelden 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

Het Azure Communication Services Hero-voorbeeld voor groepsgesprekken voor iOS laat zien hoe de Communication Services Calling iOS SDK kan worden gebruikt om een groepsgesprekken te bouwen die spraak en video bevat. In deze voorbeeld quickstart leert u hoe u het voorbeeld instelt en uitvoert. Er wordt een overzicht gegeven van het voorbeeld voor context.

Code downloaden

Zoek het project voor dit voorbeeld op GitHub.

Overzicht

Het voorbeeld is een systeemeigen iOS-toepassing die gebruikmaakt van de Azure Communication Services iOS SDK's om een belervaring te bouwen die zowel spraak- als videogesprekken bevat. De toepassing maakt gebruik van een serveronderdeel om toegangstokens in te richten die vervolgens worden gebruikt om de Azure Communication Services SDK te initialiseren. Als u dit onderdeel aan de serverzijde wilt configureren, kunt u de vertrouwde service volgen met Azure Functions zelfstudie.

Het voorbeeld ziet er als volgt uit:

Schermopname van de landingspagina van de voorbeeldtoepassing.

Wanneer u op de knop Nieuwe oproep starten drukt, wordt u in de iOS-toepassing gevraagd uw weergavenaam in te voeren die u wilt gebruiken voor het gesprek.

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

Nadat u op 'Volgende' in het scherm Gesprek starten hebt getikt, kunt u de groeps-id van de oproep delen via het iOS-deelblad.

Schermopname van het scherm Groeps-id delen van de voorbeeldtoepassing.

Met de toepassing kunt u ook deelnemen aan een bestaande Azure Communication Services oproep door de id of de koppeling naar de teams-id van de bestaande oproep op te geven.

Schermopname van het scherm Join-oproep van de voorbeeldtoepassing.

Nadat u deelneemt aan een gesprek, wordt u gevraagd de toepassing toestemming te geven om toegang te krijgen tot uw camera en microfoon, indien dit nog niet is geautoriseerd. Houd er rekening mee dat, net als alle AVFoundation-apps, echte audio- en videofunctionaliteit alleen beschikbaar is op echte hardware.

Zodra u uw weergavenaam hebt geconfigureerd en deelneemt aan het gesprek, ziet u het hoofdgesprekscanvas waarin de belangrijkste oproepervaring zich bevindt.

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 met de weergavenaam en videostream (wanneer er een is). De galerie ondersteunt meerdere deelnemers en wordt bijgewerkt wanneer deelnemers aan het gesprek worden toegevoegd of verwijderd.
  • Actiebalk: hier bevinden zich de primaire oproepbesturingselementen. Met deze besturingselementen kunt u uw video en microfoon in-/uitschakelen, uw scherm delen en het gesprek verlaten.

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

Vereisten

Voorbeeld lokaal uitvoeren

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

Voordat u het voorbeeld voor de eerste keer uitvoert

  1. Installeer afhankelijkheden door uit te voeren pod install.
  2. Openen AzureCalling.xcworkspace in XCode.
  3. Maak een tekstbestand in de hoofdmap en AppSettings.xcconfig stel de waarde in:
    communicationTokenFetchUrl = <your authentication endpoint, without the https:// component>
    

Voorbeeld uitvoeren

Bouw en voer het voorbeeld uit in XCode met behulp van het AzureCalling-doel op de simulator of het apparaat van uw keuze.

(Optioneel) Een verificatie-eindpunt beveiligen

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

Met aanvullende configuratie biedt dit voorbeeld ondersteuning voor het maken van verbinding met een met Azure Active Directory (Azure AD) beveiligd eindpunt, zodat gebruikersaanmelding is vereist voor de app om een Azure Communication Services toegangstoken op te halen. Zie de onderstaande stappen:

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

Azure Active Directory-configuratie op Azure Portal.

  1. Maak een AppSettings.xcconfig bestand in de hoofdmap als dit nog niet aanwezig is en voeg de waarden toe:
    communicationTokenFetchUrl = <Application ID URI, without the https:// component>
    aadClientId = <Application (client) ID>
    aadTenantId = <Directory (tenant) ID>
    

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

Raadpleeg voor meer informatie de volgende artikelen:

Meer artikelen

Het Azure Communication Services Hero-voorbeeld voor groepsgesprekken voor Android laat zien hoe de Communication Services Calling Android SDK kan worden gebruikt om een groepsgesprekken te bouwen die spraak en video bevat. In deze quickstart leert u hoe u het voorbeeld instelt en uitvoert. Er wordt een overzicht van het voorbeeld gegeven voor context.

Code downloaden

Zoek het project voor dit voorbeeld op GitHub.

Overzicht

Het voorbeeld is een systeemeigen Android-toepassing die gebruikmaakt van de Azure Communication Services Android UI-clientbibliotheek om een belervaring te bouwen die zowel spraak- als videogesprekken bevat. De toepassing maakt gebruik van een onderdeel aan de serverzijde om toegangstokens in te richten die vervolgens worden gebruikt om de Azure Communication Services SDK te initialiseren. Als u dit onderdeel aan de serverzijde wilt configureren, kunt u de vertrouwde service volgen met Azure Functions zelfstudie.

Het voorbeeld ziet er als volgt uit:

Schermopname van de landingspagina van de voorbeeldtoepassing.

Wanneer u op de knop Nieuwe oproep starten drukt, wordt u in de Android-toepassing gevraagd uw weergavenaam in te voeren die u voor de oproep wilt gebruiken.

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

Nadat u op 'Volgende' op de pagina 'Een oproep starten' hebt getikt, hebt u de mogelijkheid om de 'Groepsoproep-id' te delen.

Schermopname van het scherm Groepsoproep-id delen van de voorbeeldtoepassing.

Met de toepassing kunt u deelnemen aan een bestaande Azure Communication Services-oproep door de koppeling naar de id en weergavenaam van de bestaande oproep op te geven.

Schermopname van het scherm Join-oproep van de voorbeeldtoepassing.

Nadat u deelneemt aan een gesprek, wordt u gevraagd de toepassing toestemming te geven om toegang te krijgen tot uw camera en microfoon, indien nog niet geautoriseerd. U ziet het hoofdgesprekscanvas waar de kernoproepervaring zich bevindt.

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 met de weergavenaam en videostream (wanneer er een is). De galerie ondersteunt meerdere deelnemers en wordt bijgewerkt wanneer deelnemers aan het gesprek worden toegevoegd of verwijderd.
  • Actiebalk: hier bevinden zich de primaire oproepbesturingselementen. Met deze besturingselementen kunt u uw video en microfoon in-/uitschakelen, uw scherm delen en het gesprek verlaten.

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

Vereisten

Voorbeeld lokaal uitvoeren

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

Voordat u het voorbeeld voor de eerste keer uitvoert

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

Voorbeeld uitvoeren

Bouw en voer het voorbeeld uit in Android Studio.

(Optioneel) Een verificatie-eindpunt beveiligen

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

Met aanvullende configuratie biedt dit voorbeeld ondersteuning voor het maken van verbinding met een met Azure Active Directory beveiligd eindpunt (Azure AD), zodat gebruikersaanmelding is vereist voor de app om een Azure Communication Services token op te halen. Zie de onderstaande stappen:

  1. Azure Active Directory-verificatie inschakelen in uw app.

  2. Ga naar de overzichtspagina van uw geregistreerde app onder Azure Active Directory-app-registraties. Noteer het Package name, Signature hashMSAL Configutaion

Azure Active Directory-configuratie op Azure Portal.

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

  2. Bewerken AndroidManifest.xml en instellen android:path op hash van sleutelarchiefhandtekening. (Optioneel. De huidige waarde maakt gebruik van hash uit gebundelde debug.keystore. Als er een ander sleutelarchief 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. Include "account_mode": "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 communicationTokenFetchUrl in op de URL voor uw beveiligde verificatie-eindpunt.

  5. De waarde voor de sleutel bewerken en instellen vanuit Azure Active DirectoryExpose an API bereiken AzureCalling/app/src/main/res/raw/auth_config_single_account.jsonaadScopes

  6. Stel de waarde voor graphURL in AzureCalling/app/assets/appSettings.properties als het Graph API-eindpunt om gebruikersgegevens op te halen.

  7. Bewerk AzureCalling/app/src/main/assets/appSettings.properties en stel de waarde voor de sleutel tenant in om stille aanmelding in te schakelen, zodat de gebruiker niet opnieuw en opnieuw hoeft te worden geverifieerd tijdens het opnieuw opstarten van de toepassing.

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

Raadpleeg voor meer informatie de volgende artikelen:

Meer artikelen