Freigeben über

Erste Schritte mit Anrufen von JavaScript-Paketen der Benutzeroberflächenbibliothek für Azure Communication Services an die Teams-Anrufwarteschleife und automatische Telefonzentrale

Wichtig

Dieses Feature von Azure Communication Services befindet sich derzeit in der Vorschau. Features in der Vorschau sind öffentlich verfügbar und können von allen neuen und vorhandenen Microsoft-Kunden verwendet werden.

Vorschau-APIs und -SDKs werden ohne Vereinbarung zum Servicelevel bereitgestellt. Es wird empfohlen, diese nicht für Produktionsworkloads zu verwenden. Bestimmte Features werden möglicherweise nicht unterstützt oder Funktionen sind eingeschränkt.

Weitere Informationen finden Sie unter Zusätzliche Nutzungsbestimmungen für Microsoft Azure-Vorschauen.

Um die Kundenkommunikation zu unterstützen, bietet die UI-Bibliothek für Azure Communication Services JavaScript-Pakete, um plattformübergreifende Lösungen für die Verwendung der UI-Bibliothek zu testen. Dieses Tutorial ist der schnellste Weg, um mithilfe der UI-Bibliothek und Microsoft Teams an einem Anruf teilzunehmen.

In diesem Tutorial werden folgende Schritte erläutert:

  • Ermöglichen einer Anruferfahrung auf einer beliebigen Webseite, die Ihre Kundinnen und Kunden mit Ihrem Unternehmen verbindet
  • eine Anruferfahrung in anderen Plattformen als React erstellen

Voraussetzungen

Die folgenden Schritte müssen abgeschlossen werden, bevor Sie die gesamte Erfahrung abschließen können. Wenden Sie sich an Ihren Teams-Administrator, wenn Sie Fragen zum Einrichten der Teams-Voice-Anwendungen oder des Teams-Mandantenverbunds haben.

Überprüfen auf Node- und VS-Code

Sie können mithilfe des folgenden Befehls überprüfen, ob Node ordnungsgemäß installiert wurde.

node -v

Die Ausgabe informiert Sie über die installierte Version. Der Befehl schlägt fehl, wenn Node nicht installiert und zu Ihrem PATH hinzugefügt wurde. Genau wie bei Node können Sie mit dem folgenden Befehl überprüfen, ob Visual Studio Code installiert wurde.

code --version

Wie bei Node schlägt dieser Befehl fehl, wenn ein Problem beim Installieren von VS Code auf Ihrem Computer aufgetreten ist.

Erste Schritte

Wir erstellen dieses Projekt mithilfe von 4 einfachen Schritten.

  1. Erstellen des Projekts
  2. Abrufen des Codes
  3. Einrichten von Azure Communication Services und Teams
  4. Ausführen der Anwendung

1. Erstellen des Projekts

Zunächst erstellen wir einen neuen Ordner für das Projekt. Dafür, führen wir den folgenden Befehl im Terminal oder in der Eingabeaufforderung aus.

Verwenden Sie für die Eingabeaufforderung unter Windows den folgenden Befehl:

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

Verwenden Sie für Terminal unter macOS den folgenden Befehl:

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

Diese Skripts erstellen einen neuen Ordner und rufen ihn auf.

Als Nächstes möchten wir eine neue Datei namens index.html erstellen. Dies ist die Webseite, an die wir die Anruferfahrung anfügen.

2. Abrufen des Codes

Laden Sie zunächst das JavaScript-Paket aus der JavaScript-Datei „Outbound Call Composite“ herunter. Platzieren Sie dieses Paket im selben Verzeichnis wie Ihre index.html.

Öffnen Sie dann index.html in VS Code, und fügen Sie das folgende Codeschnipsel hinzu.

<!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>

Wichtig

Beachten Sie, dass sich diese Datei index.html und das JavaScript-Bündel outboundCallComposite.js im selben Ordner befinden müssen, wenn Sie keinen der Importe in dieser Datei bearbeiten möchten.

3. Einrichten von Azure Communication Services und Ihrer Teams-Voice-Anwendung

Als Nächstes möchten wir die Identität des lokalen Benutzers erstellen, damit wir sie verwenden können, um unseren lokalen Benutzer zu authentifizieren und den Anruf zu starten. Sobald Sie diese Werte für die id und das token für den Benutzer haben, möchten wir einige Änderungen in der zuvor erstellen Datei index.html vornehmen.

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

Wir möchten diese Informationen mit den userId und token aktualisieren, die Sie aus dem Azure-Portal oder über die Azure CLI bezogen haben. Sie müssen außerdem Ihren displayName festlegen.

Als Nächstes möchten wir eine Bearbeitung vornehmen, um die Ressourcenkonto-ID für Ihre Teams-Voice-Anwendung festzulegen, die Sie zuvor beim Herstellen eines Verbunds mit Ihrer Azure Communication Services-Ressource abgerufen haben. Wenden Sie sich an Ihren Teams-Administrator, falls dies noch nicht geschehen ist.

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. Ausführen der Anwendung

Nachdem wir nun das gesamte Setup abgeschlossen haben, können wir die Anwendung ausführen.

Öffnen Sie ein Terminal- oder Eingabeaufforderungsfenster in diesem Verzeichnis, und führen Sie den folgenden Befehl aus.

npx http-server@latest -p 3000

Dieses Skript startet mithilfe von Node einen HTTP-Server und hostet die Datei index.html und das JavaScript-Paket. Öffnen Sie http://localhost:3000. in einem Browser. Es sollte eine weiße Seite mit einer Schaltfläche angezeigt werden. Wenn Sie darauf klicken, sollte der folgende Bildschirm angezeigt werden.

Wichtig

Hinweis: Wenn Sie versuchen, zu der Seite zu wechseln, die nicht den lokalen Host verwendet, funktioniert Ihre Anruferfahrung aufgrund von Sicherheitsgründen nicht.

Screenshot des Startbildschirms der JavaScript-Bundle-Beispielanwendung.

Klicken Sie auf die Schaltfläche start call, die in der UI-Bibliothek CallComposite angezeigt wird, um einen Anruf an Ihre Teams-Voice-App zu initiieren.

In die Produktion bringen

Derzeit befinden sich dieses Tutorial und die JS-Pakete in der öffentlichen Vorschauversion. Wenn Sie sich für „Click to Call“ begeistern und herausfinden möchten, wie Sie CallComposite verwenden können, um „Click to Call“-Erfahrungen für Ihr Produkt zu erstellen, haben wir einen Diskussionsbeitrag in unserem GitHub-Repository bereitgestellt, der Ihnen zeigt, wie Sie die UI-Bibliothek auf anderen Node-Frameworks integrieren können. Die Schritte des Tutorials, das Sie gerade abgeschlossen haben, lassen sich direkt auf das in diesem Beitrag beschriebene Vorgehen zum Laden der UI-Bibliotheks-Composites in andere Frameworks als React übertragen.

Nächste Schritte

Weitere Informationen zu Teams-Voice-Anwendungen finden Sie in unserer Dokumentation zu automatischen Teams-Telefonzentralen und Teams-Anrufwarteschlangen. Alternativ können Sie sich auch unser Tutorial ansehen, um eine umfassendere Erfahrung mithilfe von React zu erstellen.

Schnellstart: Verknüpfen Ihrer Anruf-App mit einer Teams-Anrufwarteschlange

Schnellstart: Einbindung Ihrer Anruf-App in einen automatischen Telefonassistenten für Teams

Schnellstart: Erste Schritte mit Anrufen der Benutzeroberflächenbibliothek für Azure Communication Services an die Teams-Anrufwarteschleife und automatische Telefonzentrale

  • Last updated on