Azure İletişim Hizmetleri UI kitaplığı JavaScript paketleri ile Teams Çağrı Kuyruğu ve Otomatik Operatör'e çağrı yapmaya başlayın

Önemli

Azure Communication Services'in bu özelliği şu anda önizlemede. Önizlemedeki özellikler genel kullanıma açıktır ve tüm yeni ve mevcut Microsoft müşterileri tarafından kullanılabilir.

Hizmet seviyesi sözleşmesi olmaksızın önizleme API'leri ve SDK'leri sağlanır. Üretim iş yükleri için onları kullanmamanızı öneririz. Bazı özellikler desteklenmeyebilir veya özellikler kısıtlanmış olabilir.

Daha fazla bilgi için, Microsoft Azure Önizlemeleri için Ek Kullanım Koşulları bölümüne bakın.

İşletme ile müşteri arasındaki iletişimi geliştirmek amacıyla, Azure Communication Services UI Library, UI Kütüphanesini kullanarak platformlar arası çözümleri denemek için JavaScript paketleri sağlar. Bu eğitim, UI kütüphanesi ve Teams kullanarak bir görüşmeye katılmanın en hızlı yoludur.

Bu eğitimi takip etmek şunları sağlayacaktır:

Müşterilerinizi işletmenizle bağlantıya geçirmenizi sağlayacak çağrı deneyimini herhangi bir web sayfasına yerleştirmenize olanak tanır.
React dışındaki platformlarda çağrı deneyimi oluşturun

Önkoşullar

Bu adımların tamamlanması, bütün deneyimi bitirmeden önce gereklidir. Teams Ses Uygulamaları veya Teams kiracı federasyonu kurulumu hakkında sorularınız varsa, Teams yöneticinizle iletişime geçin.

Visual Studio Code, desteklenen platformlardan birinde.
Node.js, Aktif LTS ve Bakım LTS sürümleri Node 20 LTS önerilir. node --version komutunu kullanarak sürümünüzü kontrol edin.
Azure İletişim Hizmetleri kaynağı. İletişim Kaynağı Oluştur.
Azure İletişim Hizmetleri kaynağınızla uyumlu hale getirmek için Teams kiracı kurulumunu tamamlayın.
Teams Çağrı Kuyrukları ve Azure İletişim Hizmetleri ile çalışmak.
Teams Otomatik Operatörleri ve Azure İletişim Hizmetleri ile Çalışmak.

Node ve VS Code Kontrolü

Bu komutla Node'un doğru şekilde yüklendiğini kontrol edebilirsiniz.

node -v

Çıktı, yüklü olan sürümü size bildirir; Node kurulu değilse ve PATH'ye eklenmemişse başarısız olur. Node'da olduğu gibi, bu komutla Visual Studio Code'un kurulu olup olmadığını kontrol edebilirsiniz.

code --version

Node'da olduğu gibi, VS Code'un makinenize yüklenmesi sırasında bir sorun varsa, bu komut başarısız olur.

Başlarken

Bu projeyi 4 kolay adımda oluşturuyoruz.

Projeyi oluşturma
Kodu alın
Azure İletişim Hizmetleri'ni ve Teams'i ayarlama
Uygulamayı Çalıştırın

1. Projenin oluşturulması

Projeye başlamadan önce, yeni bir klasör oluşturacağız, ardından terminal veya komut istemcisine aşağıdaki komutu yazacağız.

Windows için komut istemini kullanarak şu komutu kullanın:

mkdir ui-library-js-test-application; cd ui-library-js-test-application

macOS'ta terminal kullanarak bu komutu kullanın:

mkdir ui-library-js-test-application && cd ui-library-js-test-application

Bu betikler yeni bir klasör oluşturur ve sizi oraya taşır.

Sonraki adımda index.html adında yeni bir dosya oluşturmak istiyoruz. Bu, arama deneyimini eklediğimiz web sayfasıdır.

2. Kodu almak

İlk olarak, Giden Çağrı Bileşik JavaScript dosyasındanJavaScript paketini indirin. Bu demeti index.html ile aynı dizine koyun.

Ardından VS Code'da index.html dosyasını açıp aşağıdaki kod parçasını eklemek isteyeceksiniz.

<!DOCTYPE html>

<head>
  <meta charset="utf-8" />
  <title>Embedded call composite basic example</title>
  <style>
    /* These styles are something we provide for the calling experience, please update for your needs */
    /* these apply to the calling experience you will need to style your button how your desire */
    #outbound-call-composite-container-ready {
      height: 22rem;
      width: 32rem;
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      box-shadow: 0 0 0.5rem 0;
      border-radius: 1rem;
      padding: 0.5rem;
      z-index: 5;
    }
  </style>
</head>

<body>
  <div id="outbound-call-composite-container"></div>
  <button id="start-call-button">Your calling button</button>
  <!-- replace with https://github.com/Azure/communication-ui-library/releases/latest/download/outboundCallComposite.js for development and prototyping -->
  <script src="./outboundCallComposite.js"></script>
  <script type="module">
    const createCallingExperience = async () => {
      const userId = { communicationUserId: "<Add your ACS ID here>" };
      const token = "<Enter your ACS token>";
      const displayName = "Enter the DisplayName for your user";

      const callAdapter = await outboundCallComposite.loadCallComposite(
        {
          userId: userId,
          token: token,
          displayName: displayName,
          targetCallees: [
            { teamsAppId: "<Enter your Teams voice application Resource Account ID here>", cloud: "public" },
          ], // Provide the identifier you want to call, can be flat as a string.
        },
        document.getElementById("outbound-call-composite-container"),
        {
          options: {
            callControls: {
              cameraButton: true,
              screenShareButton: false,
              moreButton: true,
              peopleButton: false,
              raiseHandButton: false,
              displayType: "compact",
            },
            localVideoTile: { position: "floating" },
          },
        }
      );

      window.onbeforeunload = () => {
        callAdapter.dispose();
      };
      // Update the container id to trigger the styles we set above
      const container = document.getElementById("outbound-call-composite-container");
      container.setAttribute("id", "outbound-call-composite-container-ready");
    };
    const startCallButton = document.getElementById("start-call-button");
    startCallButton.onclick = createCallingExperience;
  </script>
</body>

Önemli

Burada dikkat edilmesi gereken önemli bir nokta, bu dosya index.html ve JavaScript paketi outboundCallComposite.js'nin, bu dosyadaki içe aktarımlardan hiçbirini düzenlemek istemiyorsanız, aynı klasörde olması gerektiğidir.

3. Azure İletişim Hizmetleri ve Teams Ses Uygulamanızı Ayarlama

Şimdi, yerel kullanıcının kimliğini oluşturmak istiyoruz, böylece bunu yerel kullanıcımızı doğrulamak ve çağrıyı başlatmak için kullanabiliriz. Kullanıcı için ve token kullanıcı için id bu değerlere sahip olduğunuzda, daha önce yaptığımız dosyada index.html bazı düzenlemeler yapmak istiyoruz.

const userId = { communicationUserId: "<Add your ACS ID here>" };
const token = "<Enter your ACS token>";
const displayName = "Enter the DisplayName for your user";

Bu bilgileri Azure portalından veya Azure CLI'dan aldığınız userId ve token ile güncellemek istiyoruz. displayName'yu da ayarlamalısınız.

Sıradaki adım olarak, daha önce Azure İletişim hizmetleri kaynağınızı birleştirdiğinizde elde edilen Teams Ses Uygulamanız için bir Düzenleme Kaynak Hesap Kimliği ayarlamak istiyoruz. Bu yapılmadıysa Teams yöneticinizle iletişime geçin.

const callAdapter = await outboundCallComposite.loadCallComposite(
    {
        userId: userId,
        token: token,
        displayName: displayName,
        targetCallees: [
        { teamsAppId: "<Enter your Teams voice application Resource Account ID here>", cloud: "public" }, // <- update this teamsAppId value.
        ],
    },
    document.getElementById("outbound-call-composite-container")
);

4. Uygulamayı Çalıştırma

Tüm kurulumu bitirdiğimize göre, şimdi uygulamayı çalıştırma zamanı.

O dizinde bir terminal veya komut istemi penceresi açın ve aşağıdaki komutu çalıştırın.

npx http-server@latest -p 3000

Bu Node kullanan betik, bir HTTP sunucusu başlatır ve index.html dosyası ile JavaScript paketini barındırır. Bir tarayıcıda http://localhost:3000. açın Beyaz bir sayfa üzerinde bir düğme görmelisiniz ve ona tıkladığınızda aşağıdaki ekranı görmelisiniz.

Önemli

Dikkat, eğer yerel sunucu kullanmadan sayfaya gitmeye çalışırsanız, güvenlik nedenleriyle arama deneyiminiz çalışmayacaktır.

CallComposite'nde görünen düğmesine tıklayarak Teams sesli uygulamanızda bir arama başlatın.

Üretime Geçiş

Şu anda bu eğitim ve JS paketleri genel önizlemeye sunulmuştur. Aramak için Tıkla konusunda heyecanlıysanız ve bugün ürününüz için Tıkla ve Ara deneyimleri oluşturmak için nasıl kullanabileceğinizi CallComposite görmek istiyorsanız, GitHub depomuzda UI kitaplığını diğer Node Framework'lere nasıl entegre edeceğinizi gösterecek bir tartışma gönderimiz var. Az önce yaptığınız öğreticinin adımları, bu gösteride ana hatlarıyla belirtilenlere doğrudan çevrilir ve UI kitaplığı kompozitlerinin React dışındaki çerçevelere yüklenmesi hakkında bilgi verir.

Sonraki Adımlar

Teams sesli uygulamaları hakkında daha fazla bilgi için, Teams otomatik yanıtlayıcılar ve Teams çağrı kuyruklarıyla ilgili belgelerimize göz atın. Ya da ayrıca React kullanarak daha kapsamlı bir deneyim oluşturmak için eğitimimize bakın.

Hızlı Başlangıç: Arama uygulamanızı Teams çağrı kuyruğuna katın

Hızlı Başlangıç: Çağrı uygulamanızı Teams Otomatik Karşılama'ya Bağlayın

Hızlı Başlangıç: Azure İletişim Hizmetleri UI kitaplığı ile Teams Çağrı Kuyruğu ve Otomatik Danışma için arama yapmaya başlama

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-06-23

Azure İletişim Hizmetleri UI kitaplığı JavaScript paketleri ile Teams Çağrı Kuyruğu ve Otomatik Operatör'e çağrı yapmaya başlayın

Önkoşullar

Node ve VS Code Kontrolü

Başlarken

1. Projenin oluşturulması

2. Kodu almak

3. Azure İletişim Hizmetleri ve Teams Ses Uygulamanızı Ayarlama

4. Uygulamayı Çalıştırma

Üretime Geçiş

Sonraki Adımlar

Geri Bildirim

Ek kaynaklar