Aan de slag met de Ui-bibliotheek van Azure Communication Services JavaScript bundelt oproepen naar Teams-oproepwachtrij en Auto Attendant

Artikel
06/14/2024

Belangrijk

Deze functie van Azure Communication Services is momenteel beschikbaar als preview-versie.

Preview-API's en SDK's worden aangeboden zonder een service level agreement. U wordt aangeraden deze niet te gebruiken voor productieworkloads. Sommige functies worden mogelijk niet ondersteund of hebben mogelijk beperkte mogelijkheden.

Raadpleeg aanvullende gebruiksvoorwaarden voor Microsoft Azure Previews voor meer informatie.

Om een betere communicatie tussen klanten en klanten mogelijk te maken, biedt de Ui-bibliotheek van Azure Communication Services JavaScript-bundels om platformoverschrijdende oplossingen uit te proberen voor het gebruik van de UI-bibliotheek. Deze zelfstudie is de snelste manier om in een gesprek te komen met behulp van de UI-bibliotheek en Teams.

Volg deze zelfstudie:

Hiermee kunt u een gesprekservaring plaatsen op elke webpagina die uw klanten verbindt met uw bedrijf
Een belervaring maken op andere platforms dan React

Vereisten

Deze stappen moeten worden voltooid voordat u de hele ervaring kunt voltooien. Neem contact op met uw Teams-beheerder als u vragen hebt over het instellen van de Teams Voice Applications of Teams-tenantfederatie.

Visual Studio Code op een van de ondersteunde platforms.
Node.js, Active LTS en Maintenance LTS versies Node 20 LTS wordt aanbevolen. Gebruik de opdracht node --version om uw versie te controleren.
Een Azure Communication Services-resource. Maak een communicatieresource.
Voltooi de installatie van de Teams-tenant voor interoping met uw Azure Communication Services-resource
Werken met Teams-oproepwachtrijen en Azure Communication Services.
Werken met Teams Auto Attendants en Azure Communication Services.

Controleren op Node en VS Code

U kunt controleren of Node correct is geïnstalleerd met deze opdracht.

node -v

De uitvoer geeft aan welke versie u hebt geïnstalleerd. Deze mislukt als Node niet is geïnstalleerd en toegevoegd aan uw PATH. Net als bij Node kunt u controleren of Visual Studio Code is geïnstalleerd met deze opdracht.

code --version

Net als bij Node mislukt deze opdracht als er een probleem is met het installeren van VS Code op uw computer.

Aan de slag

We maken dit project via vier eenvoudige stappen.

Het project maken
De code ophalen
Azure Communication Services en Teams instellen
De toepassing uitvoeren

1. Het project maken

Om aan de slag te gaan, maken we een nieuwe map voor het project door de volgende opdracht uit te voeren in terminal of opdrachtprompt.

Gebruik deze opdracht voor Windows met behulp van de opdrachtprompt:

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

Gebruik deze opdracht voor macOS met behulp van terminal:

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

Met deze scripts maakt u een nieuwe map en verplaatst u ernaartoe.

Vervolgens willen we een nieuw bestand maken met de naam index.html. Dit is de webpagina waaraan we de belervaring koppelen.

2. De code ophalen

Download eerst de JavaScript-bundel uit het JavaScript-bestand Uitgaande aanroep samengestelde JavaScript. Plaats deze bundel in dezelfde map als uw index.html.

Vervolgens wilt u openen index.html in VS Code en het volgende codefragment toevoegen.

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

[! BELANGRIJK] Het is belangrijk om te weten dat dit bestand index.html en de JavaScript-bundel outboundCallComposite.js zich in dezelfde map moeten bevinden als u geen van de importbewerkingen in dit bestand wilt bewerken.

3. Azure Communication Services en uw Teams Voice-toepassing instellen

Vervolgens willen we de identiteit van de lokale gebruiker maken, zodat we die kunnen gebruiken om onze lokale gebruiker te verifiëren en de aanroep te starten. Zodra u deze waarden voor de id en token voor de gebruiker hebt, willen we enkele wijzigingen aanbrengen in het index.html bestand dat we eerder hebben gemaakt.

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

We willen deze informatie bijwerken met de userId informatie die token u hebt verkregen via Azure Portal of de Azure CLI. U moet ook uw displayName.

Vervolgens willen we een bewerking uitvoeren om de resourceaccount-id in te stellen voor uw Teams Voice-toepassing die eerder is opgehaald toen u uw Azure Communication Services-resource hebt gefedereerd. Neem contact op met uw Teams-beheerder als dit nog niet is gebeurd.

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. De toepassing uitvoeren

Nu we alle installatie hebben voltooid, is het tijd om de toepassing uit te voeren.

Open een terminal- of opdrachtpromptvenster in die map en voer de volgende opdracht uit.

npx http-server@latest -p 3000

Dit script met node start een HTTP-server en host het bestand en de index.html JavaScript-bundel. Open in een browser http://localhost:3000. U ziet een witte pagina met een knop en wanneer u erop klikt, ziet u het volgende scherm.

[! BELANGRIJK] Opmerking: als u naar de pagina wilt gaan die geen lokale host gebruikt, werkt uw belervaring niet vanwege beveiligingsredenen.

Klik op de start call knop in de UI-bibliotheek CallComposite om een oproep naar uw Teams-spraak-app te starten.

Nemen naar productie

Momenteel zijn deze zelfstudie en de JS-bundels beschikbaar als openbare preview. Als u enthousiast bent over Click to Call en wilt zien hoe u de CallComposite click-to-call-ervaringen voor uw product kunt maken, hebben we een discussiebericht in onze GitHub-opslagplaats waarin wordt uitgelegd hoe u de UI-bibliotheek kunt integreren in andere Node Frameworks. De stappen van de zelfstudie die u zojuist hebt uitgevoerd, vertalen naar wat in deze voorstelling wordt beschreven en vertellen over het laden van de ui-bibliotheekcomposieten in andere frameworks dan React.

Volgende stappen

Raadpleeg onze documentatie over Teams Auto Attendants en Teams-oproepwachtrijen voor meer informatie over Teams-spraaktoepassingen. Of zie onze zelfstudie voor het bouwen van een completere ervaring met React.

Quickstart: Uw bel-app toevoegen aan een Teams-oproepwachtrij

Quickstart: Uw bel-app toevoegen aan een Teams Auto Attendant

Quickstart: Aan de slag met de ui-bibliotheek van Azure Communication Services voor oproepen naar Teams-oproepwachtrij en Auto Attendant

Delen via