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

Skupina komunikačních služeb Azure, která volá Hero Sample , ukazuje, jak lze použít komunikační služby volání webové sady SDK k vytvoření skupinového volání.

V tomto rychlém startu se dozvíte, jak ukázka funguje před spuštěním ukázky na místním počítači. Pak nasadíme ukázku do Azure s využitím vlastních prostředků služby Azure Communication Services.

Stažení kódu

Vyhledejte projekt pro tuto ukázku na GitHub. verze ukázky, která obsahuje funkce, které jsou aktuálně ve veřejné verzi preview, jako je Teams spolupráce a záznam volání , najdete v samostatné větvi.

Přehled

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

Ukázka vypadá takto:

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

Po stisknutí tlačítka spustit volání načte webová aplikace token přístupu uživatele z aplikace na straně serveru. Tento token se pak použije k připojení klientské aplikace ke komunikačním službám Azure. Po načtení tokenu budete vyzváni k zadání fotoaparátu a mikrofonu, který chcete použít. Pomocí ovládacích prvků přepínací tlačítko budete moct zařízení zakázat nebo povolit.

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 relaci volání. Pak uvidíte 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ý).
  • Záhlaví: Zde jsou umístěny primární ovládací prvky volání pro přepínání nastavení a bočního panelu účastníka, zapnutí a vypnutí videa, sdílení obrazovky a opuštění volání.
  • Boční panel: tady jsou informace o účastnících se účastníků a nastavení při přepínání pomocí ovládacích prvků v záhlaví. Komponenta se může v pravém horním rohu vynechává pomocí ' X '. Na bočním panelu účastníci se zobrazí seznam účastníků a odkaz pro pozvání více uživatelů k chatu. Nastavení boční panel umožňuje konfigurovat nastavení mikrofonu a kamery.

Poznámka

Na základě omezení webového volání sady SDK se vykreslí pouze jeden vzdálený datový proud videa. Další informace najdete v tématu volání podpory služby SDK Stream.

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

Požadavky

Lokálně nasazovat klientské aplikace & služby

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

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

Ukázku můžete otestovat místně tak, že otevřete několik relací prohlížeče s adresou URL volání, abyste mohli simulovat volání více uživatelů.

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

  1. otevřete instanci prostředí PowerShell, Terminál Windows, příkazový řádek nebo ekvivalentní a přejděte do adresáře, do kterého chcete ukázku naklonovat.
  2. git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git
  3. Získat Connection String z Azure Portal. Další informace o připojovacích řetězcích najdete v tématu vytvoření prostředků služby Azure Communication Services.
  4. Po získání přidejte do Connection String souboru Called/appsetting.jsv souboru, který se nachází ve složce služby .NET, připojovací řetězec. Zadejte připojovací řetězec do proměnné: ResourceConnectionString .

Místní spuštění

  1. Přejít na volaný adresář a otevřít Calling.csproj řešení v Visual Studio.
  2. Spusťte Calling projekt. Otevře se prohlížeč v 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ý publikační profil a vyberte své předplatné Azure.
  3. Před publikováním přidejte připojovací řetězec pomocí Edit App Service Settings a ResourceConnectionString jako hodnotu zadejte připojovací řetězec (zkopírovaný z appsettings.json).

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

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 stránce s přehledem ukázek.
  • Redux – Správa stavu na straně klienta
  • FluentUI – knihovna rozhraní založená na Microsoftu
  • knihovna React pro sestavování uživatelských rozhraní
  • ASP.NET Core – rozhraní pro vytváření webových aplikací

Ukázka volání Azure Communication Services skupiny pro iOS ukazuje, jak lze pomocí sady SDK pro volání Communication Services pro iOS vytvořit prostředí pro skupinové volání, 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 iOS, která používá Azure Communication Services SDK pro iOS k vytvoření volajícího prostředí, které zahrnuje hlasové i videohovory. 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.

Ukázka vypadá takhle:

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

Když stisknete tlačítko Spustit nový hovor, aplikace pro iOS vytvoří nové volání a připojí se k němu. Aplikace umožňuje připojit existující 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 pro nastavení ukázky.

Požadavky

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

Ukázku skupinového volání je možné 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. Aktualizujte AppSettings.plist . Nastavte hodnotu klíče communicationTokenFetchUrl na adresu URL vašeho koncového bodu ověřování.

Spuštění ukázky

Sestavte a spusťte ukázku v XCode.

(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 přístupového 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 přístupového 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 Application (client) ID , Directory (tenant) ID , . Application ID URI

Azure Active Directory konfiguraci na Azure Portal.

  1. Otevřete AppSettings.plist v Xcode a přidejte následující hodnoty klíče:
    • communicationTokenFetchUrl: Adresa URL pro vyžádání Azure Communication Services tokenu
    • isAADAuthEnabled: Logická hodnota, která značí, jestli je Azure Communication Services tokenu ověřování povinné.
    • aadClientId: ID vaší aplikace (klienta)
    • aadTenantId: ID vašeho adresáře (tenanta)
    • aadRedirectURI: Identifikátor URI přesměrování by měl být v tomto formátu: msauth.<app_bundle_id>://auth
    • aadScopes: Pole oborů oprávnění požadovaných od uživatelů k autorizaci. Přidání <Application ID URI>/user_impersonation do pole pro udělení přístupu ke koncovému bodu ověřování

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

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

Další materiály ke čtení

Skupina komunikačních služeb Azure, která volá Hero Sample pro Android , ukazuje, jak lze pomocí komunikačních služeb volat Android SDK vytvořit skupinu volání, 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 Android, která používá sady SDK služby Azure Communications Services k sestavování volání, které nabízí 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 Android vytvoří nové volání a spojí ho. Aplikace také 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í 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 AzureCalling složku ve staženém vydání pro ukázku.
  3. Rozbalte položku aplikace nebo prostředky, které chcete aktualizovat appSettings.properties . Nastavte hodnotu klíče communicationTokenFetchUrl na adresu URL vašeho koncového bodu pro ověřování nastaveného jako požadavek.

Spustit ukázku

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

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

V případě demonstračních účely Tato ukázka ve výchozím nastavení používá k načtení 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 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 Package name , Signature hash , MSAL Configutaion

konfigurace Azure Active Directory Azure Portal.

  1. Úpravou AzureCalling/app/src/main/res/raw/auth_config_single_account.json a nastavením isAADAuthEnabled povolíte Azure Active Directory

  2. Upravte AndroidManifest.xml a nastavte android:path hodnotu hash podpisu úložiště klíčů. Volitelné. Aktuální hodnota používá hodnotu hash z balíčku Debug. dataúložiště. 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 do 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. Upravte AzureCalling/app/src/main/res/raw/auth_config_single_account.json a nastavte hodnotu klíče communicationTokenFetchUrl na adresu URL vašeho koncového bodu zabezpečeného ověřování.

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

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

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

Další materiály ke čtení