你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

开始使用针对 Teams 呼叫队列和自动助理的 Azure 通信服务 UI 库 JavaScript 捆绑包通话

项目
06/19/2024

重要

Azure 通信服务的这一功能目前以预览版提供。

预览版 API 和 SDK 在没有服务级别协议的情况下提供。建议不要将它们用于生产工作负荷。某些功能可能不受支持或者已受限。

有关详细信息，请参阅 Microsoft Azure 预览版补充使用条款。

为了促进客户通信的更好业务，Azure 通信服务 UI 库提供了 JavaScript 捆绑包，以尝试使用 UI 库的跨平台解决方案。本教程是使用 UI 库和 Teams 进入通话的最快方法。

遵循本教程将：

允许你在任何网页上提供通话体验，将客户与你的企业联系起来
在 React 以外的平台中创建通话体验

先决条件

这些步骤需要完成才能完成整个体验。如果对设置 Teams 语音应用程序或 Teams 租户联合身份验证有疑问，请联系 Teams 管理员。

安装在某个受支持的平台上的 Visual Studio Code。
建议使用 Node.js、活动 LTS 和维护 LTS 版本 Node 20 LTS。可以使用 node --version 命令检查你的版本。
一个 Azure 通信服务资源。创建通信资源。
完成 Teams 租户设置，以便与 Azure 通信服务资源互操作
使用 Teams 呼叫队列和 Azure 通信服务。
使用 Teams 自动助理和 Azure 通信服务。

检查节点和 VS Code

可以使用此命令检查是否已正确安装 Node。

node -v

输出会告知已安装的版本，如果未安装 Node 并将其添加到 PATH，它将失败。就像使用 Node 一样，可以使用此命令检查是否安装了 Visual Studio Code。

code --version

与 Node 一样，如果在计算机上安装 VS Code 时出现问题，此命令将失败。

使用入门

我们通过 4 个简单的步骤创建此项目。

创建项目
获取代码
设置 Azure 通信服务和 Teams
运行应用程序

1.创建项目

若要开始，我们将为项目创建一个新文件夹，在终端或命令提示符下运行以下命令。

对于使用命令提示符的 Windows，请使用以下命令：

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

对于使用终端的 macOS，请使用以下命令：

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

这些脚本将创建一个新文件夹并将其移动到其中。

接下来，我们希望创建一个名为 index.html 的新文件。这是我们将通话体验附加到的网页。

2.获取代码

首先，从出站调用复合 JavaScript 文件下载 JavaScript 捆绑包。将此捆绑包放在与 index.html 相同的目录中。

接下来，需要在 VS Code 中打开 index.html 并添加以下代码片段。

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

[!重要提示] 请务必注意，如果希望不编辑此文件中的任何导入，此文件 index.html 和 JavaScript 捆绑包 outboundCallComposite.js 必须位于同一文件夹中。

3.设置 Azure 通信服务和 Teams 语音应用程序

接下来，我们要创建本地用户的标识，以便我们可以使用该标识对本地用户进行身份验证并启动呼叫。为用户提供 id 和 token 这些值后，我们希望在之前创建的 index.html 文件中进行一些编辑。

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

我们希望使用从 Azure 门户或 Azure CLI 获取的 userId 和 token 更新此信息。还应设置你的 displayName。

接下来，我们希望进行编辑，以便在联合 Azure 通信服务资源时设置之前提取的 Teams 语音应用程序的资源帐户 ID。 如果尚未执行此操作，请与 Teams 管理员联系。

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.运行应用程序

完成所有设置后，即可运行应用程序。

在该目录中打开终端或命令提示符窗口并运行以下命令。

npx http-server@latest -p 3000

此脚本使用 Node 启动 HTTP 服务器并托管 index.html 文件和 JavaScript 捆绑包。在浏览器中，打开 http://localhost:3000. 此时会看到一个带有按钮的白色页面，单击该页面时，应会看到以下屏幕。

[!重要提示] 请注意，如果尝试转到页面不使用本地主机，则通话体验将因安全原因而不起作用。

单击 UI 库 CallComposite 中显示的 start call 按钮，启动对 Teams 语音应用的呼叫。

投入生产

目前，本教程和 JS 捆绑包以公共预览版提供。如果你对“单击以呼叫”感兴趣，并希望了解如何使用 CallComposite 为产品创建“单击以呼叫”体验，我们将在我们的 GitHub 存储库中发表讨论文章，其中将介绍如何在其他 Node Framework 上集成 UI 库。刚刚完成的教程步骤直接转换为本节目中概述的内容，并告知在其他框架中加载 UI 库复合，而不是 React。

后续步骤

有关 Teams 语音应用程序的详细信息，请查看有关 Teams 自动助理和 Teams 呼叫队列的文档。或者，请参阅我们的教程，了解如何使用 React 构建更完整的体验。

快速入门：在 Teams 呼叫队列中加入通话应用

快速入门：在 Teams 自动助理中加入呼叫应用

快速入门：开始使用针对 Teams 呼叫队列和自动助理的 Azure 通信服务 UI 库调用

通过