Hero örneği çağıran grup ile çalışmaya başlama

  • Makale
  • Okumak için 10 dakika

Grup Azure İletişim Hizmetleri Hero Örneği, Bir grup çağırma deneyimi oluşturmak için Web SDK'sı Çağıran İletişim Hizmetleri'nin nasıl kullanıl olduğunu gösteriyor.

Bu Örnek hızlı başlangıçta, örneği yerel makineniz üzerinde çalıştırmadan önce örneğin nasıl çalıştığını öğreneceğiz. Ardından kendi kaynaklarınızı kullanarak örneği Azure'a Azure İletişim Hizmetleri.

Kodu indirin

bu örneğin projesini GitHub. Teams Birlikte Çalışma ve Çağrı Kaydı gibi genel önizlemede olan özellikleri içeren örneğin bir sürümü ayrı bir dalda bulunabilir.

Genel Bakış

Örnekte hem istemci tarafı uygulaması hem de sunucu tarafı uygulaması vardır. İstemci tarafı uygulaması, Microsoft'un React kullanıcı arabirimi çerçevesini kullanan bir Fluent/Redux web uygulamasıdır. Bu uygulama, istemci ASP.NET Core Azure'a bağlanmasına yardımcı olan bir sunucu tarafı uygulamaya istek gönderir.

Örnek şu şekildedir:

Örnek uygulamanın giriş sayfasını gösteren ekran görüntüsü.

"Çağrı başlat" düğmesine bastığınızda, web uygulaması sunucu tarafı uygulamasından bir kullanıcı erişim belirteci getirir. Bu belirteç daha sonra istemci uygulamasını Azure İletişim Hizmetleri. Belirteç alındıktan sonra kullanmak istediğiniz kamerayı ve mikrofonu belirtmeniz istenir. Geçiş denetimleriyle cihazlarınızı devre dışı bırakabilecek/etkinleştirebilirsiniz:

Örnek uygulamanın çağrı öncesi ekranı gösteren ekran görüntüsü.

Görünen adını ve cihazlarınızı yapılandırarak çağrı oturumuna katılabilirsiniz. Daha sonra temel arama deneyiminin bulunduğu ana çağrı tuvali ile karşına inersiniz.

Örnek uygulamanın ana ekranı gösteren ekran görüntüsü.

Ana arama ekranı bileşenleri:

  • Medya Galerisi: Katılımcıların gösterildiği ana aşama. Katılımcının kamerası etkinse video akışı burada gösterilir. Her katılımcının görünen adını ve video akışını (bir kutucuk olduğunda) gösteren ayrı bir kutucuğu var
  • Üst bilgi: Ayarları ve katılımcı yan çubuğu açıp kapatmak, videoyu açıp kapatmak, ekranı paylaşmak ve çağrıyı bırakmak için birincil çağrı denetimlerinin bulunduğu yer burasıdır.
  • Kenar Çubuğu: Burada, üst bilgide denetimler kullanılırken katılımcılar ve ayarlar bilgileri gösterilir. Bileşen, sağ üst köşedeki 'X' kullanılarak silinebilirsiniz. Katılımcılar yan çubuğu, katılımcıların listesini ve sohbete daha fazla kullanıcı davet etmek için bir bağlantı gösterir. Ayarlar çubuğu, mikrofon ve kamera ayarlarını yapılandırmaya olanak sağlar.

Not

Web Çağrısı SDK'sı sınırlamalarına bağlı olarak yalnızca bir uzak video akışı işlenir. Daha fazla bilgi için bkz. SDK Akış Desteğini Çağırma.

Aşağıda önkoşullar ve örneği ayarlama adımları hakkında daha fazla bilgi bulabilirsiniz.

Önkoşullar

hizmeti istemci uygulamalarına & dağıtma

Grup çağırma örneği temelde iki uygulamadır: ClientApp ve Service.NET uygulama.

Yerel olarak dağıtmak için her iki uygulamayı da başlatmamız gerekir. Sunucu uygulaması tarayıcıdan ziyaret edildiklerinde, kullanıcı deneyimi için yerel olarak dağıtılan ClientApp'i kullanır.

Çok kullanıcılı bir çağrının benzetimini yapmak için çağrının URL'sini içeren birden çok tarayıcı oturumu açarak örneği yerel olarak test edin.

Örneği ilk kez çalıştırmadan önce

  1. PowerShell, Windows Terminal, Komut İstemi veya eşdeğer bir örnek açın ve örneği klonlamak istediğiniz dizine gidin.
  2. git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git
  3. Get the Connection String from the Azure portal. Bağlantı dizeleri hakkında daha fazla bilgi için bkz. Kaynak Azure İletişim Hizmetleri oluşturma.
  4. 'yi elde edin, bağlantı dizesini Service .NET klasörünün altında bulunan Connection String Calling/appsetting.json dosyasına ekleyin. Bağlantı dizenizi şu değişkene girdi: ResourceConnectionString .

Yerel çalıştırma

  1. Arama klasörüne gidin ve çözümü Calling.csproj Visual Studio.
  2. Projeyi Calling çalıştırın. Tarayıcı, 'de localhost:5001 açılır.

Örneği Azure'da yayımlama

  1. Projeye sağ tıklayın ve Calling Yayımla'yı seçin.
  2. Yeni bir yayımlama profili oluşturun ve Azure aboneliğinizi seçin.
  3. Yayımlamadan önce bağlantı dizenizi ile ekleyin ve anahtar olarak değerini doldurun ve bağlantı dizenizi Edit App Service Settings ResourceConnectionString (appsettings.json'dan kopyalanan) değer olarak ekleyin.

Kaynakları temizleme

İletişim Hizmetleri aboneliğini temizlemek ve kaldırmak için kaynağı veya kaynak grubunu silebilirsiniz. Kaynak grubunun silinmesi, kaynak grubuyla ilişkilendirilmiş diğer tüm kaynakları da siler. Kaynakları temizleme hakkında daha fazla bilgi.

Sonraki adımlar

Örneği GitHub

Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

Ek okuma

  • Örnekler - Örneklere genel bakış sayfamızda daha fazla örnek ve örnek bulabilirsiniz.
  • Redux - İstemci tarafı durum yönetimi
  • FluentUI - Microsoft destekli UI kitaplığı
  • React - Kullanıcı arabirimleri oluşturma kitaplığı
  • ASP.NET Core - Web uygulamaları için çerçeve

İOS Için Hero örneğini çağıran Azure Iletişim Hizmetleri grubu, IOS SDK 'Sını çağıran iletişim hizmetlerinin, ses ve video içeren bir grup çağırma deneyimi oluşturmak için nasıl kullanılabileceğini gösterir. Bu örnek hızlı başlangıçta, örneği ayarlamayı ve çalıştırmayı öğreneceksiniz. Bağlam için örneğe genel bir bakış sağlanır.

Kodu indirin

GitHubbu örneğe yönelik projeyi bulun. Teams birlikte çalışabilirliğine sahip bir örnek sürümü ayrı bir daldabulunabilir.

Genel Bakış

Örnek, hem ses hem de video çağrılmasını sağlayan bir arama deneyimi oluşturmak için Azure Iletişim Hizmetleri iOS SDK 'larını kullanan yerel bir iOS uygulamasıdır. Uygulama, daha sonra Azure Iletişim Hizmetleri SDK 'sını başlatmak için kullanılan erişim belirteçlerini sağlamak için bir sunucu tarafı bileşeni kullanır. Bu sunucu tarafı bileşeni yapılandırmak için, Azure işlevleri öğreticisiyle güvenilir hizmeti takip edin.

Örnek şöyle görünür:

Örnek uygulamanın giriş sayfasını gösteren ekran görüntüsü.

"Yeni çağrıya başla" düğmesine bastığınızda iOS uygulaması yeni bir çağrı oluşturur ve bu dosyayı birleştirir. Uygulama, var olan çağrının KIMLIĞINI belirterek mevcut bir Azure Iletişim Hizmetleri çağrısına katılırsanız izin verir.

Bir çağrıya katıldıktan sonra, bilgisayarınıza kameranıza ve mikrofona erişim izni vermeniz istenir. Ayrıca, bir görünen ad girmeniz istenir.

Örnek uygulamanın çağrı öncesi ekranını gösteren ekran görüntüsü.

Görüntü adınızı ve cihazlarınızı yapılandırdıktan sonra, çağrıya katabilirsiniz. Çekirdek çağırma deneyiminin yaşadığı ana çağrı tuvalini görürsünüz.

Örnek uygulamanın ana ekranını gösteren ekran görüntüsü.

Ana arama ekranının bileşenleri:

  • Medya Galerisi: katılımcıların gösterildiği ana aşama. Bir katılımcının Kamerası etkinse, video akışları burada gösterilir. Her katılımcının, görünen adını ve video akışını (bir tane olduğunda) gösteren bir tek kutucuğu vardır. Galeri birden çok katılımcıyı destekler ve katılımcılar eklendiğinde veya çağrıya kaldırıldığında güncelleştirilir.
  • Eylem çubuğu: Bu, birincil çağrı denetimlerinin bulunduğu yerdir. Bu denetimler, videonuzu ve mikrofonunuzu açmanıza/kapatmanızı, ekranınızı paylaşmanıza ve çağrıdan ayrılmasına olanak tanır.

Aşağıda, önkoşulları ve örneği ayarlama adımlarını hakkında daha fazla bilgi bulacaksınız.

Önkoşullar

Örneği yerel olarak çalıştırma

Grup çağırma örneği, XCode kullanılarak yerel olarak çalıştırılabilir. Geliştiriciler, uygulamayı test etmek için fiziksel cihazlarını ya da öykünücüyü kullanabilirler.

Örneği ilk kez çalıştırmadan önce

  1. Çalıştırarak bağımlılıkları yükler pod install .
  2. AzureCalling.xcworkspaceXCode 'da açın.
  3. Güncelleştirin AppSettings.plist . Anahtar için değeri communicationTokenFetchUrl kimlik doğrulama uç noktanızın URL 'si olacak şekilde ayarlayın.

Örnek Çalıştır

Örneği XCode 'da derleyin ve çalıştırın.

Seçim Kimlik doğrulama uç noktasının güvenliğini sağlama

Tanıtım amacıyla bu örnek, varsayılan olarak bir Azure Iletişim Hizmetleri erişim belirteci getirmek için genel olarak erişilebilen bir uç nokta kullanır. Üretim senaryolarında kendi belirteçlerinizi sağlamak için kendi güvenli uç noktanızı kullanmanızı öneririz.

ek yapılandırma ile bu örnek, uygulamanın bir azure iletişim hizmetleri erişim belirteci getirmesi için kullanıcı oturum açması gereken Azure Active Directory (Azure AD) korumalı bir uç noktaya bağlanmayı destekler. Aşağıdaki adımlara bakın:

  1. uygulamanızda Azure Active Directory kimlik doğrulamasını etkinleştirin.
  2. Azure Active Directory uygulama kayıtları altında kayıtlı uygulamanıza genel bakış sayfasına gidin. , Application (client) ID ,, Directory (tenant) ID``Application ID URI

Azure portal yapılandırma Azure Active Directory.

  1. AppSettings.plistXcode 'da açın, aşağıdaki anahtar değerlerini ekleyin:
    • communicationTokenFetchUrl: Azure Iletişim Hizmetleri belirteci istemek için URL
    • isAADAuthEnabled: Azure Iletişim Hizmetleri belirtecinin kimlik doğrulamasının gerekli olup olmadığını belirten bir Boole değeri
    • aadClientId: Uygulamanızın (istemci) KIMLIĞI
    • aadTenantId: Dizininiz (kiracı) KIMLIĞINIZ
    • aadRedirectURI: Yeniden yönlendirme URI 'SI şu biçimde olmalıdır: msauth.<app_bundle_id>://auth
    • aadScopes: Kullanıcılardan yetkilendirme için istenen izin kapsamları dizisi. <Application ID URI>/user_impersonationKimlik doğrulama uç noktasına erişim vermek için diziye ekleyin

Kaynakları temizleme

Bir Iletişim Hizmetleri aboneliğini temizleyip kaldırmak istiyorsanız, kaynağı veya kaynak grubunu silebilirsiniz. Kaynak grubunun silinmesi, onunla ilişkili diğer tüm kaynakları da siler. Kaynakları Temizlemehakkında daha fazla bilgi edinin.

Sonraki adımlar

GitHub örneği indirin

Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

Ek okuma

Android Için Hero örneğini çağıran Azure Iletişim Hizmetleri grubu, Android SDK çağıran iletişim hizmetlerinin, ses ve video içeren bir grup çağırma deneyimi oluşturmak için nasıl kullanılabileceğini gösterir. Bu örnek hızlı başlangıçta, örneği ayarlamayı ve çalıştırmayı öğreneceksiniz. Bağlam için örneğe genel bir bakış sağlanır.

Kodu indirin

GitHubbu örneğe yönelik projeyi bulun. Teams birlikte çalışabilirliğine sahip bir örnek sürümü ayrı bir daldabulunabilir.

Genel Bakış

Örnek, hem ses hem de video çağrılmasını sağlayan bir arama deneyimi oluşturmak için Azure Iletişim Hizmetleri Android SDK 'larını kullanan yerel bir Android uygulamasıdır. Uygulama, daha sonra Azure Iletişim Hizmetleri SDK 'sını başlatmak için kullanılan erişim belirteçlerini sağlamak için bir sunucu tarafı bileşeni kullanır. Bu sunucu tarafı bileşeni yapılandırmak için, Azure işlevleri öğreticisiyle güvenilir hizmeti takip edin.

Örnek şöyle görünür:

Örnek uygulamanın giriş sayfasını gösteren ekran görüntüsü.

"Yeni çağrıya başla" düğmesine bastığınızda, Android uygulaması yeni bir çağrı oluşturur ve bu dosyayı birleştirir. Bu uygulama, var olan çağrının KIMLIĞINI belirterek mevcut bir Azure Iletişim Hizmetleri çağrısına katılırsanız de olanak tanır.

Bir çağrıya katıldıktan sonra, bilgisayarınıza kameranıza ve mikrofona erişim izni vermeniz istenir. Ayrıca, bir görünen ad girmeniz istenir.

Örnek uygulamanın çağrı öncesi ekranını gösteren ekran görüntüsü.

Görüntü adınızı ve cihazlarınızı yapılandırdıktan sonra, çağrıya katabilirsiniz. Çekirdek çağırma deneyiminin yaşadığı ana çağrı tuvalini görürsünüz.

Örnek uygulamanın ana ekranını gösteren ekran görüntüsü.

Ana arama ekranının bileşenleri:

  • Medya Galerisi: katılımcıların gösterildiği ana aşama. Bir katılımcının Kamerası etkinse, video akışları burada gösterilir. Her katılımcının, görünen adını ve video akışını (bir tane olduğunda) gösteren bir tek kutucuğu vardır. Galeri birden çok katılımcıyı destekler ve katılımcılar eklendiğinde veya çağrıya kaldırıldığında güncelleştirilir.
  • Eylem çubuğu: Bu, birincil çağrı denetimlerinin bulunduğu yerdir. Bu denetimler, videonuzu ve mikrofonunuzu açmanıza/kapatmanızı, ekranınızı paylaşmanıza ve çağrıdan ayrılmasına olanak tanır.

Aşağıda, önkoşulları ve örneği ayarlama adımlarını hakkında daha fazla bilgi bulacaksınız.

Önkoşullar

Örneği yerel olarak çalıştırma

Grup çağırma örneği, Android Studio kullanılarak yerel olarak çalıştırılabilir. Geliştiriciler, uygulamayı test etmek için fiziksel cihazlarını ya da öykünücüyü kullanabilirler.

Örneği ilk kez çalıştırmadan önce

  1. Android Studio açın ve seçin Open an Existing Project
  2. AzureCallingÖrnek için indirilen sürümün içindeki klasörü açın.
  3. Güncelleştirilecek uygulama/varlıklar ' ı genişletin appSettings.properties . Anahtar için değeri communicationTokenFetchUrl kimlik doğrulama uç noktasının ön koşul olarak AYARLANDıĞı URL olacak şekilde ayarlayın.

Örnek Çalıştır

Android Studio ' de örneği derleyin ve çalıştırın.

Seçim Kimlik doğrulama uç noktasının güvenliğini sağlama

Tanıtım amacıyla bu örnek, varsayılan olarak bir Azure Iletişim Hizmetleri belirteci getirmek için genel olarak erişilebilen bir uç nokta kullanır. Üretim senaryolarında kendi belirteçlerinizi sağlamak için kendi güvenli uç noktanızı kullanmanızı öneririz.

ek yapılandırma ile bu örnek, uygulamanın bir azure iletişim hizmetleri belirtecini getirmesi için kullanıcı oturum açması gereken Azure Active Directory (Azure AD) korumalı bir uç noktaya bağlanmayı destekler. Aşağıdaki adımlara bakın:

  1. uygulamanızda Azure Active Directory kimlik doğrulamasını etkinleştirin.

  2. Azure Active Directory uygulama kayıtları altında kayıtlı uygulamanıza genel bakış sayfasına gidin. , Package name ,, Signature hash``MSAL Configutaion

Azure portal yapılandırma Azure Active Directory.

  1. AzureCalling/app/src/main/res/raw/auth_config_single_account.json isAADAuthEnabled Azure Active Directory etkinleştirmek için Düzenle ve ayarla

  2. Düzenleyin AndroidManifest.xml ve android:path anahtar deposu imza karmasını olarak ayarlayın. Seçim. Geçerli değer, paketlenmiş hata ayıklama. KeyStore 'dan karma kullanır. Farklı bir anahtar deposu kullanılıyorsa, bu güncelleştirilmiş olmalıdır.)

    <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. Azure portal MSAL Android yapılandırmasını kopyalayın ve öğesine yapıştırın AzureCalling/app/src/main/res/raw/auth_config_single_account.json . Ekle "account_mode": "SINGLE"

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

  4. AzureCalling/app/src/main/res/raw/auth_config_single_account.jsonAnahtar değerini, communicationTokenFetchUrl güvenli kimlik doğrulama uç noktanızın URL 'si olacak şekilde düzenleyin ve ayarlayın.

  5. AzureCalling/app/src/main/res/raw/auth_config_single_account.jsonKapsamlardan anahtar için değeri düzenleyin ve ayarlayın aadScopes Azure Active Directory Expose an API

Kaynakları temizleme

Bir Iletişim Hizmetleri aboneliğini temizleyip kaldırmak istiyorsanız, kaynağı veya kaynak grubunu silebilirsiniz. Kaynak grubunun silinmesi, onunla ilişkili diğer tüm kaynakları da siler. Kaynakları Temizlemehakkında daha fazla bilgi edinin.

Sonraki adımlar

GitHub örneği indirin

Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

Ek okuma