Začínáme se skupinou volajícím Hero Sample

  • Článek
  • 11 min ke čtení

Ukázka Azure Communication Services skupiny volajících hrdiny ukazuje, jak lze Communication Services webové sady SDK volání skupiny k vytvoření prostředí pro volání skupiny.

V tomto rychlém startu s ukázkou se dozvíte, jak ukázka funguje, než ukázku spustíme na místním počítači. Pak nasadíme ukázku do Azure s využitím vlastních Azure Communication Services prostředků.

Stažení kódu

Projekt pro tuto ukázku najdete na GitHub. Verzi ukázky, která obsahuje funkce aktuálně ve verzi Public Preview, jako jsou Teams Interop a Call Recording, najdete v samostatné větvi.

Přehled

Ukázka obsahuje aplikaci na straně klienta i aplikaci na straně serveru. Klientská aplikace je webová aplikace React/Redux, která používá rozhraní Fluent uživatelského rozhraní od Microsoftu. Tato aplikace odesílá požadavky do ASP.NET Core na straně serveru, která pomáhá aplikaci na straně klienta připojit se k Azure.

Ukázka vypadá takhle:

Snímek obrazovky zobrazující úvodní stránku ukázkové aplikace

Když stisknete tlačítko Spustit volání, webová aplikace načte přístupový token uživatele z aplikace na straně serveru. Tento token se pak použije k připojení klientské aplikace k Azure Communication Services. Po načtení tokenu se zobrazí výzva k zadání fotoaparátu a mikrofonu, který chcete použít. Zařízení budete moct zakázat nebo povolit pomocí přepínacích ovládacích prvků:

Snímek obrazovky s předvolávkovací obrazovkou ukázkové aplikace

Jakmile nakonfigurujete zobrazovaný název a zařízení, můžete se připojit k relaci volání. Pak uvidíte hlavní plátno pro volání, kde je základní prostředí pro volání.

Snímek obrazovky znázorňující hlavní obrazovku ukázkové aplikace

Součásti hlavní volající obrazovky:

  • Galerie médií: Hlavní fáze, ve které se zobrazují účastníci. Pokud má účastník povolenou kameru, zobrazí se zde jeho kanál videa. Každý účastník má jednotlivou dlaždici, která zobrazuje zobrazované jméno a stream videa (pokud existuje).
  • Hlavička: V tomto místě jsou umístěné primární ovládací prvky volání, které přepíná nastavení a boční panel účastníka, zapne nebo vypne video a zmíchá video, sdílí obrazovku a volání opustí.
  • Boční panel: Tady se při přepnutí pomocí ovládacích prvků v záhlaví zobrazují informace o účastníkech a nastaveních. Komponentu můžete zavřít pomocí X v pravém horním rohu. Boční panel Účastníci zobrazí seznam účastníků a odkaz na pozvání dalších uživatelů ke konverzaci. Nastavení boční panel umožňuje konfigurovat nastavení mikrofonu a fotoaparátu.

Poznámka

Na základě omezení sady WEB Calling SDK se vykreslí jenom jeden vzdálený stream videa. Další informace najdete v tématu Volání podpory streamu sady SDK.

Níže najdete další informace o požadavcích a krocích k nastavení ukázky.

Požadavky

Místní nasazení služby & klientských aplikacích

Ukázka volání skupiny je v podstatě dvě aplikace: ClientApp a Service.NET aplikace.

Když chceme aplikaci nasadit místně, musíme spustit obě aplikace. Když je serverová aplikace navštívená v prohlížeči, použije pro uživatelské prostředí místně nasazenou aplikaci ClientApp.

Ukázku můžete místně otestovat tak, že otevřete více relací prohlížeče s adresou URL vašeho volání a nasimulujte volání více uživatelů.

Před prvním spuštěním ukázky

  1. Otevřete instanci PowerShellu, Terminál Windows, příkazový řádek nebo ekvivalent a přejděte do adresáře, do který chcete ukázku naklonovat.
  2. git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git
  3. Získejte Connection String z Azure Portal. Další informace o připojovacích řetězcích najdete v tématu Vytvoření Azure Communication Services prostředků.
  4. Jakmile získáte , přidejte připojovací řetězec do souboru Connection String Calling/appsetting.json, který najdete ve složce Service .NET. Zadejte připojovací řetězec do proměnné : ResourceConnectionString .

Místní spuštění

  1. Přejděte do složky Volání a otevřete Calling.csproj řešení v Visual Studio.
  2. Spusťte Calling projekt. Prohlížeč se otevře na adrese localhost:5001 .

Publikování ukázky do Azure

  1. Klikněte pravým tlačítkem na Calling projekt a vyberte Publikovat.
  2. Vytvořte nový profil publikování a vyberte své předplatné Azure.
  3. Před publikováním přidejte připojovací řetězec pomocí a jako klíč vyplňte a jako hodnotu zadejte připojovací řetězec Edit App Service Settings ResourceConnectionString (zkopírovaný ze souboru appsettings.json).

Vyčištění prostředků

Pokud chcete vyčistit a odebrat předplatné Communication Services, můžete odstranit prostředek nebo skupinu prostředků. Odstraněním skupiny prostředků se odstraní také všechny ostatní prostředky, které jsou k ní přidružené. Přečtěte si další informace o vyčištění prostředků.

Další kroky

Stáhněte si ukázku z GitHub

Další informace najdete v následujících článcích:

Další materiály ke čtení

  • Ukázky – Další ukázky a příklady najdete na naší stránce s přehledem ukázek.
  • Redux – Správa stavu na straně klienta
  • FluentUI – knihovna uživatelského rozhraní s microsoftem
  • React – knihovna pro vytváření uživatelských rozhraní
  • ASP.NET Core – rozhraní pro vytváření webových aplikací

Skupina komunikačních služeb Azure, která volá Hero Sample pro iOS , ukazuje, jak se komunikační služby, které volají sadu iOS SDK, dají použít k vytvoření skupinového volajícího prostředí, které zahrnuje hlasové a video. V tomto rychlém startu se dozvíte, jak nastavit a spustit ukázku. Pro kontext je k dispozici přehled ukázky.

Stažení kódu

Vyhledejte projekt pro tuto ukázku na GitHub. verzi ukázky s Teams spolupráci najdete v samostatné větvi.

Přehled

Ukázka je nativní aplikace pro iOS, která používá sady SDK služby Azure Communications pro iOS k sestavení volání, které umožňuje volání hlasu i audiovizuálního rozhraní. Aplikace používá serverovou komponentu ke zřízení přístupových tokenů, které se pak používají k inicializaci sady Azure Communication Services SDK. Pokud chcete tuto komponentu na straně serveru nakonfigurovat, využijte Azure Functions kurzu pro důvěryhodnou službu .

Ukázka vypadá takto:

Snímek obrazovky znázorňující cílovou stránku ukázkové aplikace

Když stisknete tlačítko spustit nové volání, aplikace pro iOS vytvoří nové volání a spojí ho. Aplikace umožňuje připojit stávající volání služby Azure Communication Services zadáním ID existujícího volání.

Po připojení k volání se zobrazí výzva, abyste aplikaci udělili oprávnění k přístupu k fotoaparátu a mikrofonu. Zobrazí se také výzva k zadání zobrazovaného názvu.

Snímek obrazovky znázorňující obrazovku před voláním ukázkové aplikace

Jakmile nakonfigurujete své zobrazované jméno a zařízení, můžete se připojit k volání. Zobrazí se hlavní plátno volání, kde se nachází základní volající prostředí.

Snímek obrazovky znázorňující hlavní obrazovku ukázkové aplikace

Součásti hlavní volající obrazovky:

  • Galerie médií: hlavní fáze, kde se zobrazují účastníci. Pokud má účastník zapnutou kameru, zobrazí se zde jeho video kanál. Každý účastník má jednotlivou dlaždici, která zobrazuje zobrazované jméno a datový proud videa (když je nějaký). Galerie podporuje více účastníků a je aktualizována při přidání nebo odebrání účastníků do volání.
  • Panel akcí: tady je místo, kde se nacházejí ovládací prvky primárního volání. Tyto ovládací prvky umožňují zapnout nebo vypnout video a mikrofon, sdílet obrazovku a opustit volání.

Níže najdete další informace o požadavcích a krocích pro nastavení ukázky.

Požadavky

Místní spuštění ukázky

Ukázku volání skupiny lze spustit místně pomocí XCode. Vývojáři mohou aplikaci otestovat buď pomocí fyzického zařízení, nebo emulátoru.

Před prvním spuštěním ukázky

  1. Nainstalujte závislosti spuštěním pod install .
  2. Otevřete AzureCalling.xcworkspace v Xcode.
  3. Aktualizace AppSettings.plist . Nastavte hodnotu communicationTokenFetchUrl klíče na adresu URL vašeho koncového bodu ověřování.

Spustit ukázku

Sestavte a spusťte ukázku v XCode.

Volitelné Zabezpečení koncového bodu ověřování

Pro demonstrační účely Tato ukázka ve výchozím nastavení používá k načtení přístupového tokenu služby Azure Communication Services veřejně přístupný koncový bod. V produkčních scénářích doporučujeme použít vlastní zabezpečený koncový bod ke zřízení vlastních tokenů.

v případě další konfigurace tato ukázka podporuje připojení ke koncovému bodu chráněného Azure Active Directory (Azure AD), takže přihlášení uživatele vyžaduje, aby aplikace mohla načíst přístupový token služby Azure Communication Services. Viz následující postup:

  1. povolte Azure Active Directory ověřování ve vaší aplikaci.
  2. v části Azure Active Directory registrace aplikací přejít na stránku přehled vaší registrované aplikace. Poznamenejte si Application (client) ID , Directory (tenant) ID , Application ID URI

konfigurace Azure Active Directory Azure Portal.

  1. Otevřete AppSettings.plist v Xcode přidejte následující klíčové hodnoty:
    • communicationTokenFetchUrl: Adresa URL pro vyžádání tokenu služby Azure Communication Services
    • isAADAuthEnabled: Logická hodnota určující, zda je vyžadováno ověřování tokenu služby Azure Communication Services.
    • aadClientId: ID aplikace (klienta)
    • aadTenantId: Vaše ID adresáře (tenant)
    • aadRedirectURI: Identifikátor URI přesměrování by měl být v tomto formátu: msauth.<app_bundle_id>://auth
    • aadScopes: Pro autorizaci je pole oborů oprávnění požadováno uživatelem. Přidejte <Application ID URI>/user_impersonation do pole, abyste udělili přístup ke koncovému bodu ověřování.

Vyčištění prostředků

Pokud chcete vyčistit a odebrat předplatné služby Communications Services, můžete prostředek nebo skupinu prostředků odstranit. Odstraněním skupiny prostředků se odstraní také všechny další prostředky, které jsou k ní přidružené. Přečtěte si další informace o vyčištění prostředků.

Další kroky

Stažení ukázky z GitHub

Další informace najdete v následujících článcích:

Další materiály ke čtení

Ukázka Azure Communication Services skupině volající hrdinu pro Android ukazuje, jak lze Android SDK volání Communication Services použít k vytvoření skupinového volajícího prostředí, které zahrnuje hlas a video. V tomto ukázkovém rychlém startu se dozvíte, jak ukázku nastavit a spustit. Přehled ukázky je k dispozici pro kontext.

Stažení kódu

Projekt pro tuto ukázku najdete na GitHub. Verzi ukázky s Teams interop najdete v samostatné větvi.

Přehled

Ukázka je nativní aplikace pro Android, která používá Azure Communication Services Android SDK k vytvoření volajícího prostředí, které zahrnuje hlasové volání i volání videa. Aplikace používá komponentu na straně serveru ke zřízení přístupových tokenů, které se pak používají k inicializaci Azure Communication Services SDK. Pokud chcete nakonfigurovat tuto součást na straně serveru, můžete postupovat podle kurzu Důvěryhodné služby Azure Functions serveru.

Ukázka vypadá takhle:

Snímek obrazovky zobrazující úvodní stránku ukázkové aplikace

Když stisknete tlačítko Spustit nový hovor, aplikace pro Android vytvoří nové volání a připojí se k němu. Aplikace také umožňuje připojit se k existujícímu Azure Communication Services volání zadáním ID existujícího volání.

Po připojení k hovoru budete vyzváni, abyste aplikaci udělili oprávnění pro přístup k fotoaparátu a mikrofonu. Zobrazí se také dotaz, jestli chcete zadat zobrazovaný název.

Snímek obrazovky s předvolávkovací obrazovkou ukázkové aplikace

Jakmile nakonfigurujete zobrazovaný název a zařízení, můžete volání připojit. Uvidíte hlavní plátno pro volání, kde je základní prostředí pro volání.

Snímek obrazovky znázorňující hlavní obrazovku ukázkové aplikace

Součásti hlavní volající obrazovky:

  • Galerie médií: Hlavní fáze, ve které se zobrazují účastníci. Pokud má účastník povolenou kameru, zobrazí se zde jeho kanál videa. Každý účastník má jednotlivou dlaždici, která zobrazuje zobrazované jméno a stream videa (pokud existuje). Galerie podporuje více účastníků a je aktualizována, když účastníci jsou přidáni nebo odebráni do volání.
  • Panel akcí: Tady jsou umístěné primární ovládací prvky volání. Tyto ovládací prvky umožňují zapnout nebo vypnout video a mikrofon, sdílet obrazovku a opustit volání.

Níže najdete další informace o požadavcích a krocích k nastavení ukázky.

Požadavky

Místní spuštění ukázky

Ukázku volání skupiny je možné spustit místně pomocí Android Studio. Vývojáři mohou aplikaci otestovat buď pomocí fyzického zařízení, nebo emulátoru.

Před prvním spuštěním ukázky

  1. Otevřete Android Studio a vyberte Open an Existing Project
  2. Otevřete složku AzureCalling ve stažené verzi ukázky.
  3. Rozbalte app/assets (aplikace/prostředky) a aktualizujte appSettings.properties . Nastavte hodnotu klíče na adresu URL koncového bodu ověřování, communicationTokenFetchUrl která je nastavená jako předpoklad.

Spuštění ukázky

Sestavte a spusťte ukázku v Android Studio.

(Volitelné) Zabezpečení koncového bodu ověřování

Pro demonstrační účely používá tato ukázka ve výchozím nastavení veřejně přístupný koncový bod k načtení Azure Communication Services tokenu. V produkčních scénářích doporučujeme ke zřízení vlastních tokenů použít vlastní zabezpečený koncový bod.

S další konfigurací tato ukázka podporuje připojení ke koncovému bodu chráněnému službou Azure Active Directory (Azure AD), aby aplikace vyžadovala přihlášení uživatele k načtení Azure Communication Services tokenu. Projděte si následující kroky:

  1. Povolte Azure Active Directory ověřování ve vaší aplikaci.

  2. Přejděte na stránku s přehledem registrované aplikace v Azure Active Directory registrace aplikací. Poznamenejte si Package name , Signature hash , . MSAL Configutaion

Azure Active Directory konfiguraci na Azure Portal.

  1. Upravit AzureCalling/app/src/main/res/raw/auth_config_single_account.json a nastavit pro povolení isAADAuthEnabled Azure Active Directory

  2. Upravte AndroidManifest.xml hodnotu hash podpisu úložiště klíčů a android:path nastavte ji na . (Volitelné. Aktuální hodnota používá hodnotu hash ze sady debug.keystore. Pokud se používá jiné úložiště klíčů, je nutné ho aktualizovat.)

    <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. Zkopírujte konfiguraci MSAL pro Android z Azure Portal a vložte ji do AzureCalling/app/src/main/res/raw/auth_config_single_account.json . Zahrnout "account_mode" : "SINGLE"

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

  4. Upravte AzureCalling/app/src/main/res/raw/auth_config_single_account.json a nastavte hodnotu klíče na communicationTokenFetchUrl adresu URL vašeho zabezpečeného koncového bodu ověřování.

  5. Upravte AzureCalling/app/src/main/res/raw/auth_config_single_account.json a nastavte hodnotu klíče z aadScopes Azure Active Directory Expose an API oborů.

Vyčištění prostředků

Pokud chcete vyčistit a odebrat předplatné Communication Services, můžete odstranit prostředek nebo skupinu prostředků. Odstraněním skupiny prostředků se odstraní také všechny ostatní prostředky, které jsou k ní přidružené. Přečtěte si další informace o vyčištění prostředků.

Další kroky

Stáhněte si ukázku z GitHub

Další informace najdete v následujících článcích:

Další materiály ke čtení