Erste Schritte mit dem Hero-Beispiel für Gruppenanrufe

Das Hero-Beispiel für Gruppenanrufe von Azure Communication Services veranschaulicht, wie das Communication Services Calling Web-SDK für Anrufe verwendet werden kann, um eine Benutzeroberfläche für Gruppenanrufe zu erstellen.

In dieser Beispiel-Schnellstartanleitung wird beschrieben, wie das Beispiel funktioniert, bevor wir es auf Ihrem lokalen Computer ausführen. Anschließend stellen wir das Beispiel in Azure bereit, indem wir Ihre eigenen Azure Communication Services-Ressourcen verwenden.

Code herunterladen

Suchen Sie das Projekt für dieses Beispiel auf GitHub. Eine Version des Beispiels, die Funktionen enthält und sich derzeit in der öffentlichen Vorschauversion, wie z. B. Teams Interop und Anrufaufzeichnung befindet, finden Sie in einer separaten Verzweigung.

Übersicht

Das Beispiel verfügt sowohl über eine clientseitige als auch eine serverseitige Anwendung. Die clientseitige Anwendung ist eine React/Redux-Webanwendung, für die das Fluent-UI-Framework von Microsoft verwendet wird. Diese Anwendung sendet Anforderungen an eine serverseitige ASP.NET Core-Anwendung, die für die clientseitige Anwendung die Verbindungsherstellung mit Azure ermöglicht.

Das Beispiel sieht wie folgt aus:

Screenshot: Landing Page der Beispielanwendung

Wenn Sie auf die Schaltfläche „Start a call“ (Anruf starten) klicken, ruft die Webanwendung ein Benutzerzugriffstoken aus der serverseitigen Anwendung ab. Dieses Token wird dann verwendet, um die Client-App mit Azure Communication Services zu verbinden. Nach dem Abrufen des Tokens werden Sie aufgefordert, die gewünschte Kamera und das Mikrofon anzugeben. Sie können Ihre Geräte mit den entsprechenden Umschaltern deaktivieren und aktivieren:

Screenshot: Bildschirm zur Vorbereitung von Anrufen in der Beispielanwendung

Nachdem Sie Ihren Anzeigenamen und Ihre Geräte konfiguriert haben, können Sie der Anrufsitzung beitreten. Anschließend wird der Hauptbereich für Anrufe angezeigt, der die zentrale Anrufbenutzeroberfläche enthält.

Screenshot: Hauptbildschirm der Beispielanwendung

Komponenten des Hauptbildschirms für Anrufe:

  • Medienkatalog: Der Hauptbereich, in dem die Teilnehmer angezeigt werden. Wenn ein Teilnehmer seine Kamera aktiviert hat, wird der Videofeed hier angezeigt. Jeder Teilnehmer verfügt über eine individuelle Kachel, auf der sein Anzeigename und der Videostream (falls vorhanden) angezeigt werden.
  • Header: Hier befinden sich die wichtigsten Anrufsteuerelemente zum Umschalten der Seitenleiste für Einstellungen und Teilnehmer, Aktivieren/Deaktivieren von Videos und der Mischung, Freigeben des Bildschirms und Beenden des Anrufs.
  • Seitenleiste: Hier werden die Informationen zu den Teilnehmern und Einstellungen angezeigt, wenn der entsprechende Umschalter im Headerbereich verwendet wird. Die Komponente kann mit dem „X“ oben rechts geschlossen werden. In der Seitenleiste für die Teilnehmer werden eine Liste mit Teilnehmern und ein Link zum Einladen von weiteren Benutzern zum Chatten angezeigt. In der Seitenleiste für die Einstellungen können Sie die Mikrofon- und Kameraeinstellungen konfigurieren.

Hinweis

Basierend auf den Einschränkungen des Web Calling SDK wird nur ein Remotevideostream gerendert. Weitere Informationen finden Sie unter Support für den Calling SDK-Datenstrom.

Unten sind weitere Informationen zu den Voraussetzungen und Schritten zum Einrichten des Beispiels angegeben.

Voraussetzungen

Lokales Bereitstellen der Dienst- und der Clientanwendung

Das Beispiel für Gruppenanrufe umfasst im Wesentlichen zwei Anwendungen: die Client-App und die .NET-Dienst-App.

Für die lokale Bereitstellung müssen wir beide Anwendungen starten. Wenn über den Browser auf die Server-App zugegriffen wird, wird die lokal bereitgestellte Client-App für die Benutzeroberfläche verwendet.

Sie können das Beispiel lokal testen, indem Sie mehrere Browsersitzungen mit der URL Ihres Anrufs öffnen, um einen Anruf mit mehreren Benutzern zu simulieren.

Vor dem erstmaligen Ausführen des Beispiels

  1. Öffnen Sie eine Instanz von PowerShell, des Windows-Terminals, einer Eingabeaufforderung oder eines gleichwertigen Tools, und navigieren Sie zu dem Verzeichnis, in dem Sie das Beispiel klonen möchten.
  2. git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git
  3. Rufen Sie im Azure-Portal die Connection String (Verbindungszeichenfolge) ab. Weitere Informationen zu Verbindungszeichenfolgen finden Sie unter Erstellen einer Azure Communication Services-Ressource.
  4. Nachdem Sie die Connection String abgerufen haben, fügen Sie sie der Datei Calling/appsetting.json im Ordner für die .NET-Dienst-App (Service .NET) hinzu. Geben Sie Ihre Verbindungszeichenfolge in die Variable ein: ResourceConnectionString.

Lokaler Testlauf

  1. Wechseln Sie zum Ordner „Calling“, und öffnen Sie die Projektmappe Calling.csproj in Visual Studio.
  2. Führen Sie das Calling-Projekt aus. Der Browser wird unter localhost:5001 geöffnet.

Veröffentlichen des Beispiels in Azure

  1. Klicken Sie mit der rechten Maustaste auf das Projekt Calling, und wählen Sie „Veröffentlichen“ aus.
  2. Erstellen Sie ein neues Veröffentlichungsprofil, und wählen Sie Ihr Azure-Abonnement aus.
  3. Fügen Sie vor dem Veröffentlichen Ihre Verbindungszeichenfolge mit Edit App Service Settings hinzu. Fügen Sie ResourceConnectionString als Schlüssel ein, und geben Sie Ihre Verbindungszeichenfolge (Kopie aus „appsettings.json“) als Wert ein.

Bereinigen von Ressourcen

Wenn Sie ein Communication Services-Abonnement bereinigen und entfernen möchten, können Sie die Ressource oder die Ressourcengruppe löschen. Wenn Sie die Ressourcengruppe löschen, werden auch alle anderen Ressourcen gelöscht, die ihr zugeordnet sind. Weitere Informationen zum Bereinigen von Ressourcen finden Sie hier.

Nächste Schritte

Weitere Informationen finden Sie in den folgenden Artikeln:

Zusätzliche Lektüre

  • Beispiele: In der Übersicht über Beispiele finden Sie weitere Beispiele.
  • Redux: Clientseitige Zustandsverwaltung
  • Fluent-UI: UI-Bibliothek von Microsoft
  • React: Bibliothek zum Erstellen von Benutzeroberflächen
  • ASP.NET Core: Framework für die Erstellung von Webanwendungen

Das Hero-Beispiel für Gruppenanrufe für iOS von Azure Communication Services veranschaulicht, wie das Calling iOS SDK von Communication Services verwendet werden kann, um eine Benutzeroberfläche für Gruppenanrufe mit Sprach- und Videofunktion zu erstellen. In dieser Beispiel-Schnellstartanleitung wird beschrieben, wie Sie das Beispiel einrichten und ausführen. Es ist auch eine Übersicht über das Beispiel vorhanden, um Informationen zum Kontext bereitzustellen.

Code herunterladen

Suchen Sie das Projekt für dieses Beispiel auf GitHub. Eine Version des Beispiels mit Teams-Interoperabilität kann in einer separaten Verzweigung gefunden werden.

Übersicht

Beim diesem Beispiel handelt es sich um eine native iOS-Anwendung, für die die iOS-SDKs von Azure Communication Services zum Entwickeln einer Benutzeroberfläche für Anrufe mit Sprach- und Videofunktion verwendet werden. In der Anwendung wird eine serverseitige Komponente verwendet, um Zugriffstoken bereitzustellen, die dann zum Initialisieren des Azure Communication Services-SDK genutzt werden. Informationen zum Konfigurieren dieser serverseitigen Komponente finden Sie im Tutorial Erstellen eines vertrauenswürdigen Authentifizierungsdiensts mithilfe von Azure Functions.

Das Beispiel sieht wie folgt aus:

Screenshot: Landing Page der Beispielanwendung

Wenn Sie die Schaltfläche „Start new call“ (Neuen Anruf starten) auswählen, wird von der iOS-Anwendung ein neuer Anruf erstellt, und Sie werden als Teilnehmer hinzugefügt. Die Anwendung ermöglicht es Ihnen, einem vorhandenen Azure Communication Services-Anruf beizutreten, indem Sie die ID des vorhandenen Anrufs angeben.

Nachdem Sie einem Anruf beigetreten sind, werden Sie aufgefordert, der Anwendung die Berechtigung zum Zugreifen auf Ihre Kamera und das Mikrofon zu gewähren. Sie werden außerdem aufgefordert, einen Anzeigenamen anzugeben.

Screenshot: Bildschirm zur Vorbereitung von Anrufen in der Beispielanwendung

Nachdem Sie Ihren Anzeigenamen und Ihre Geräte konfiguriert haben, können Sie dem Anruf beitreten. Der Hauptbereich für Anrufe, der die zentrale Anrufbenutzeroberfläche enthält, wird angezeigt.

Screenshot: Hauptbildschirm der Beispielanwendung

Komponenten des Hauptbildschirms für Anrufe:

  • Medienkatalog: Der Hauptbereich, in dem die Teilnehmer angezeigt werden. Wenn ein Teilnehmer seine Kamera aktiviert hat, wird der Videofeed hier angezeigt. Jeder Teilnehmer verfügt über eine individuelle Kachel, auf der sein Anzeigename und der Videostream (falls vorhanden) angezeigt werden. Für den Medienkatalog wird die Anzeige von mehreren Teilnehmern unterstützt, und die Anzeige wird entsprechend aktualisiert, wenn Teilnehmer für den Anruf hinzugefügt oder entfernt werden.
  • Aktionsleiste: Diese Leiste enthält die wichtigsten Anrufsteuerelemente. Mit diesen Steuerelementen können Sie Kamera und Mikrofon ein- und ausschalten, Ihren Bildschirm freigeben und den Anruf verlassen.

Unten sind weitere Informationen zu den Voraussetzungen und Schritten zum Einrichten des Beispiels angegeben.

Voraussetzungen

Lokales Ausführen des Beispiels

Das Beispiel für Gruppenanrufe kann lokal mit Xcode ausgeführt werden. Entwickler können entweder ihr physisches Gerät oder einen Emulator verwenden, um die Anwendung zu testen.

Vor dem erstmaligen Ausführen des Beispiels

  1. Installieren Sie Abhängigkeiten, indem Sie pod install ausführen.
  2. Öffnen Sie AzureCalling.xcworkspace in Xcode.
  3. Aktualisieren Sie AppSettings.plist. Legen Sie den Wert für den communicationTokenFetchUrl-Schlüssel auf die URL für Ihren Authentifizierungsendpunkt fest.

Ausführen des Beispiels

Erstellen Sie das Beispiel in Xcode, und führen Sie es aus.

(Optional) Schützen eines Authentifizierungsendpunkts

Zu Demonstrationszwecken wird in diesem Beispiel standardmäßig ein öffentlich zugänglicher Endpunkt verwendet, um ein Azure Communication Services-Zugriffstoken abzurufen. Für Produktionsszenarien empfehlen wir Ihnen, für die Bereitstellung eigener Token Ihren eigenen geschützten Endpunkt zu erstellen.

Wenn weitere Konfigurationsschritte ausgeführt werden, wird für dieses Beispiel auch die Verbindungsherstellung mit einem per Azure Active Directory (Azure AD) geschützten Endpunkt unterstützt. So kann erreicht werden, dass die Benutzeranmeldung für die App erzwungen wird, um ein Azure Communication Services-Zugriffstoken abzurufen. Sehen Sie sich die folgenden Schritte an:

  1. Aktivieren Sie die Azure Active Directory-Authentifizierung in Ihrer App.
  2. Navigieren Sie in Azure Active Directory unter „App-Registrierungen“ zur Übersichtsseite Ihrer registrierten App. Notieren Sie sich die Werte für Application (client) ID, Directory (tenant) ID und Application ID URI.

Azure Active Directory-Konfiguration im Azure-Portal

  1. Öffnen Sie AppSettings.plist in Xcode, und fügen Sie die folgenden Schlüsselwerte hinzu:
    • communicationTokenFetchUrl: URL zum Anfordern des Azure Communication Services-Tokens
    • isAADAuthEnabled: Boolescher Wert, mit dem angegeben wird, ob die Tokenauthentifizierung von Azure Communication Services erforderlich ist
    • aadClientId: Ihre Anwendungs-ID (Client)
    • aadTenantId: Ihre Verzeichnis-ID (Mandant)
    • aadRedirectURI: Der Umleitungs-URI sollte das folgende Format aufweisen: msauth.<app_bundle_id>://auth
    • aadScopes: Array mit Berechtigungsbereichen, die von Benutzern für die Autorisierung angefordert werden. Fügen Sie dem Array <Application ID URI>/user_impersonation hinzu, um Zugriff auf den Authentifizierungsendpunkt zu gewähren.

Bereinigen von Ressourcen

Wenn Sie ein Communication Services-Abonnement bereinigen und entfernen möchten, können Sie die Ressource oder die Ressourcengruppe löschen. Wenn Sie die Ressourcengruppe löschen, werden auch alle anderen Ressourcen gelöscht, die ihr zugeordnet sind. Weitere Informationen zum Bereinigen von Ressourcen finden Sie hier.

Nächste Schritte

Weitere Informationen finden Sie in den folgenden Artikeln:

Zusätzliche Lektüre

Das Hero-Beispiel für Gruppenanrufe für Android von Azure Communication Services veranschaulicht, wie das Calling Android SDK von Communication Services verwendet werden kann, um eine Benutzeroberfläche für Gruppenanrufe mit Sprach- und Videofunktion zu erstellen. In dieser Beispiel-Schnellstartanleitung wird beschrieben, wie Sie das Beispiel einrichten und ausführen. Es ist auch eine Übersicht über das Beispiel vorhanden, um Informationen zum Kontext bereitzustellen.

Code herunterladen

Suchen Sie das Projekt für dieses Beispiel auf GitHub. Eine Version des Beispiels mit Teams-Interoperabilität kann in einer separaten Verzweigung gefunden werden.

Übersicht

Beim diesem Beispiel handelt es sich um eine native Android-Anwendung, für die die Android-SDKs von Azure Communication Services zum Entwickeln einer Benutzeroberfläche für Anrufe mit Sprach- und Videofunktion verwendet werden. In der Anwendung wird eine serverseitige Komponente verwendet, um Zugriffstoken bereitzustellen, die dann zum Initialisieren des Azure Communication Services-SDK genutzt werden. Informationen zum Konfigurieren dieser serverseitigen Komponente finden Sie im Tutorial Erstellen eines vertrauenswürdigen Authentifizierungsdiensts mithilfe von Azure Functions.

Das Beispiel sieht wie folgt aus:

Screenshot: Landing Page der Beispielanwendung

Wenn Sie die Schaltfläche „Start new call“ (Neuen Anruf starten) auswählen, wird von der Android-Anwendung ein neuer Anruf erstellt, und Sie werden als Teilnehmer hinzugefügt. Darüber hinaus ermöglicht die Anwendung es Ihnen, einem vorhandenen Azure Communication Services-Anruf beizutreten, indem Sie die ID des vorhandenen Anrufs angeben.

Nachdem Sie einem Anruf beigetreten sind, werden Sie aufgefordert, der Anwendung die Berechtigung zum Zugreifen auf Ihre Kamera und das Mikrofon zu gewähren. Sie werden außerdem aufgefordert, einen Anzeigenamen anzugeben.

Screenshot: Bildschirm zur Vorbereitung von Anrufen in der Beispielanwendung

Nachdem Sie Ihren Anzeigenamen und Ihre Geräte konfiguriert haben, können Sie dem Anruf beitreten. Der Hauptbereich für Anrufe, der die zentrale Anrufbenutzeroberfläche enthält, wird angezeigt.

Screenshot: Hauptbildschirm der Beispielanwendung

Komponenten des Hauptbildschirms für Anrufe:

  • Medienkatalog: Der Hauptbereich, in dem die Teilnehmer angezeigt werden. Wenn ein Teilnehmer seine Kamera aktiviert hat, wird der Videofeed hier angezeigt. Jeder Teilnehmer verfügt über eine individuelle Kachel, auf der sein Anzeigename und der Videostream (falls vorhanden) angezeigt werden. Für den Medienkatalog wird die Anzeige von mehreren Teilnehmern unterstützt, und die Anzeige wird entsprechend aktualisiert, wenn Teilnehmer für den Anruf hinzugefügt oder entfernt werden.
  • Aktionsleiste: Diese Leiste enthält die wichtigsten Anrufsteuerelemente. Mit diesen Steuerelementen können Sie Kamera und Mikrofon ein- und ausschalten, Ihren Bildschirm freigeben und den Anruf verlassen.

Unten sind weitere Informationen zu den Voraussetzungen und Schritten zum Einrichten des Beispiels angegeben.

Voraussetzungen

Lokales Ausführen des Beispiels

Das Beispiel für Gruppenanrufe kann lokal mit Android Studio ausgeführt werden. Entwickler können entweder ihr physisches Gerät oder einen Emulator verwenden, um die Anwendung zu testen.

Vor dem erstmaligen Ausführen des Beispiels

  1. Öffnen Sie Android Studio, und wählen Sie Open an Existing Project
  2. Öffnen Sie den Ordner AzureCalling in der heruntergeladenen Version für das Beispiel.
  3. Erweitern Sie zu aktualisierende App/Assets appSettings.properties. Legen Sie als Voraussetzung den Wert für den communicationTokenFetchUrl-Schlüssel auf die URL für Ihren Authentifizierungsendpunkt fest.

Ausführen des Beispiels

Kompilieren Sie das Beispiel in Android Studio, und führen Sie es aus.

(Optional) Schützen eines Authentifizierungsendpunkts

Zu Demonstrationszwecken wird in diesem Beispiel standardmäßig ein öffentlich zugänglicher Endpunkt verwendet, um ein Azure Communication Services-Token abzurufen. Für Produktionsszenarien empfehlen wir Ihnen, für die Bereitstellung eigener Token Ihren eigenen geschützten Endpunkt zu erstellen.

Wenn weitere Konfigurationsschritte ausgeführt werden, wird für dieses Beispiel auch die Verbindungsherstellung mit einem per Azure Active Directory (Azure AD) geschützten Endpunkt unterstützt. So kann erreicht werden, dass die Benutzeranmeldung für die App erzwungen wird, um ein Azure Communication Services-Token abzurufen. Sehen Sie sich die folgenden Schritte an:

  1. Aktivieren Sie die Azure Active Directory-Authentifizierung in Ihrer App.

  2. Navigieren Sie in Azure Active Directory unter „App-Registrierungen“ zur Übersichtsseite Ihrer registrierten App. Notieren Sie sich die Werte für Package name, Signature hash und MSAL Configutaion.

Azure Active Directory-Konfiguration im Azure-Portal

  1. Bearbeiten Sie AzureCalling/app/src/main/res/raw/auth_config_single_account.json, und legen Sie isAADAuthEnabled so fest, dass Azure Active Directory aktiviert wird

  2. Bearbeiten Sie AndroidManifest.xml, und legen Sie android:path auf einen Signaturhash fest. (Optional. Der aktuelle Wert verwendet einen Hash aus dem gebündeltem debug.keystore. Wenn ein anderer Keystore verwendet wird, muss dies aktualisiert werden.)

    <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. Kopieren Sie die MSAL Android-Konfiguration aus dem Azure-Portal, und fügen Sie es in AzureCalling/app/src/main/res/raw/auth_config_single_account.json ein. Schließen Sie „account_mode“ : „SINGLE“ ein

       {
          "client_id": "",
          "authorization_user_agent": "DEFAULT",
          "redirect_uri": "",
          "account_mode" : "SINGLE",
          "authorities": [
             {
                "type": "AAD",
                "audience": {
                "type": "AzureADMyOrg",
                "tenant_id": ""
                }
             }
          ]
       }
    
  4. Bearbeiten Sie AzureCalling/app/src/main/res/raw/auth_config_single_account.json, und legen Sie den Wert für den Schlüssel communicationTokenFetchUrl auf die URL für Ihren Authentifizierungsendpunkt fest.

  5. Bearbeiten Sie AzureCalling/app/src/main/res/raw/auth_config_single_account.json und legen Sie den des Werts für den Schlüssel aadScopes aus den Bereichen Azure Active Directory Expose an API fest

Bereinigen von Ressourcen

Wenn Sie ein Communication Services-Abonnement bereinigen und entfernen möchten, können Sie die Ressource oder die Ressourcengruppe löschen. Wenn Sie die Ressourcengruppe löschen, werden auch alle anderen Ressourcen gelöscht, die ihr zugeordnet sind. Weitere Informationen zum Bereinigen von Ressourcen finden Sie hier.

Nächste Schritte

Weitere Informationen finden Sie in den folgenden Artikeln:

Zusätzliche Lektüre