Compartir a través de

Introducción a los conjuntos de JavaScript de la biblioteca de interfaz de usuario de Azure Communication Services que llaman a la cola de llamadas de Teams y al operador automático

  • Artículo

Importante

Esta característica de Azure Communication Services se encuentra actualmente en versión preliminar.

Las API y los SDK en versión preliminar se proporcionan sin contrato de nivel de servicio. Se recomienda no usarlos para las cargas de trabajo de producción. Es posible que algunas características no sean compatibles o que sus funcionalidades estén limitadas.

Para obtener más información, consulte Términos de uso complementarios para las Versiones preliminares de Microsoft Azure.

Para facilitar una mejor comunicación de empresa a cliente, la biblioteca de interfaz de usuario de Azure Communication Services proporciona conjuntos de JavaScript para probar soluciones multiplataforma para usar la biblioteca de interfaz de usuario. Este tutorial es la forma más rápida de entrar en una llamada mediante la biblioteca de interfaz de usuario y Teams.

Después de este tutorial:

  • Le permite realizar una experiencia de llamada en cualquier página web que conecte a sus clientes con su negocio.
  • Creación de una experiencia de llamada en plataformas que no sean React

Requisitos previos

Estos pasos deben completarse antes de poder completar toda la experiencia. Póngase en contacto con el administrador de Teams si tiene preguntas sobre cómo configurar las aplicaciones de voz de Teams o la federación de inquilinos de Teams.

Comprobación de Node y VS Code

Puede comprobar que Node se instaló correctamente con este comando.

node -v

La salida indica la versión que tiene instalada, se produce un error si Node no está instalado ni se agregó a PATH. Al igual que con Node, puede comprobar si Visual Studio Code está instalado con este comando.

code --version

Al igual que con Node, este comando produce un error si se produce un problema al instalar VS Code en el equipo.

Introducción

Creamos este proyecto a través de 4 sencillos pasos.

  1. Creación del proyecto
  2. Obtención del código
  3. Configuración de Azure Communication Services y Teams
  4. Ejecución de la aplicación

1. Creación del proyecto

Para empezar, vamos a crear una nueva carpeta para que el proyecto ejecute el siguiente comando en terminal o símbolo del sistema.

Para Windows que usan el símbolo del sistema, use este comando:

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

Para macOS que usan el terminal, use este comando:

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

Estos scripts crean una nueva carpeta y le mueven a ella.

A continuación, queremos crear un nuevo archivo denominado index.html. Esta es la página web a la que adjuntamos la experiencia de llamada.

2. Obtención del código

En primer lugar, descargue el conjunto de JavaScript desde el archivo JavaScript de la composición de llamadas salientes. Coloque este conjunto en el mismo directorio que el index.html.

A continuación, quiere abrir index.html en VS Code y agregar el siguiente fragmento de código.

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

[¡IMPORTANTE!] Aquí es importante tener en cuenta que este archivo index.html y el conjunto de JavaScript outboundCallComposite.js deben estar en la misma carpeta si no desea editar ninguna de las importaciones en este archivo.

3. Configuración de Azure Communication Services y la aplicación de voz de Teams

A continuación, queremos crear la identidad del usuario local para poder usarla para autenticar a nuestro usuario local e iniciar la llamada. Una vez que tenga esos valores para el id y token del usuario, queremos realizar algunas modificaciones en el archivo index.html que hemos creado anteriormente.

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

Queremos actualizar esta información con el userId y token que obtuvo de Azure Portal o la CLI de Azure. También debe establecer el displayName.

A continuación, queremos realizar una modificación para establecer el identificador de cuenta de recursos de la aplicación de voz de Teams capturado anteriormente, cuando federó el recurso de Azure Communication Services. Póngase en contacto con el administrador de Teams si esto no se ha hecho.

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. Ejecución de la aplicación

Ahora que hemos terminado toda la configuración, es el momento de ejecutar la aplicación.

Abra una ventana del terminal o del símbolo del sistema en ese directorio y ejecute el siguiente comando.

npx http-server@latest -p 3000

Este script mediante Node inicia un servidor HTTP y hospeda el archivo index.html y el conjunto de JavaScript. En un explorador, abra http://localhost:3000.. Debería ver una página blanca con un botón y, al hacer clic en ella, debería ver la siguiente pantalla.

[¡IMPORTANTE!] Tenga en cuenta que, si intenta ir a la página que no usa el host local, la experiencia de llamada no funcionará por motivos de seguridad.

Captura de pantalla de la pantalla principal de la aplicación de ejemplo de conjunto de js.

Haga clic en el botón start call que se muestra en la biblioteca de interfaz de usuarioCallComposite para iniciar una llamada a la aplicación de voz de Teams.

Llevar a la producción

Actualmente, este tutorial y los conjuntos de JS están en versión preliminar pública. Si está deseando hacer clic para llamar y ver cómo puede usar CallComposite para crear experiencias de hacer clic para llamar a su producto hoy, tenemos una entrada de discusión en nuestro repositorio de GitHub que le mostrará cómo integrar la biblioteca de interfaz de usuario en otros marcos de Node. Los pasos del tutorial que acaba de realizar se traducen directamente en lo que se describe en esta entrada y tratan cómo cargar las composiciones de la biblioteca de interfaz de usuario en marcos que no son React.

Pasos siguientes

Para obtener más información sobre las aplicaciones de voz de Teams, consulte nuestra documentación sobre operadores automáticos de Teams y colas de llamadas de Teams. También puede consultar nuestro tutorial para crear una experiencia más completa mediante React.

Inicio rápido: Incorporación de una aplicación de llamadas a una cola de llamadas de Teams

Inicio rápido: Unión de la aplicación de llamadas a un operador automático de Teams

Inicio rápido: Introducción a la llamada de la biblioteca de interfaz de usuario de Azure Communication Services a la cola de llamadas o al operador automático de Teams