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

Belangrijk

Deze functie van Azure Communication Services is momenteel beschikbaar als preview-versie. Functies in preview zijn openbaar beschikbaar en kunnen worden gebruikt door alle nieuwe en bestaande Microsoft-klanten.

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

Zie Aanvullende gebruiksvoorwaarden voor Microsoft Azure Previewsvoor 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.

Als je deze handleiding volgt, zal:

  • 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.

Controleren van 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. Het proces 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.

  1. Het project maken
  2. De code ophalen
  3. Azure Communication Services en Teams instellen
  4. 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 van het Uitgaande aanroep samengestelde JavaScript-bestand. 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. Het instellen van Azure Communication Services en uw Teams Voice-applicatie

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 en token die u hebt verkregen via de Azure Portal of de Azure CLI. U moet ook evenals uw displayName instellen.

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 http://localhost:3000. in een browser U ziet een witte pagina met een knop en wanneer u erop klikt, ziet u het volgende scherm.

Belangrijk

Opmerking: als u probeert naar de pagina te gaan die geen lokale host gebruikt, werkt uw belervaring niet vanwege beveiligingsredenen.

Schermopname van het beginscherm van de voorbeeld-app voor js-bundel.

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

In productie nemen

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 kunt gebruiken om Click to Call-ervaringen voor uw product te creëren, hebben we een discussiepost 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 zich direct naar wat wordt uitgelegd in deze demonstratie over het laden van UI-bibliotheekcomponenten 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

Snelstart: Uw oproep-app koppelen aan een Teams Auto Assistent

Quickstart: Aan de slag met de UI-bibliotheek van Azure Communication Services voor het bellen naar de Teams-oproepwachtrij en Auto Attendant

  • Last updated on