Teams 通話キューと自動応答を呼び出す Azure Communication Services UI ライブラリ JavaScript バンドルの概要

[アーティクル]
06/17/2024

重要

Azure Communication Services のこの機能は、現在プレビュー段階にあります。

プレビューの API と SDK は、サービスレベルアグリーメントなしに提供されます。運用環境のワークロードには使用しないことをお勧めします。一部の機能はサポート対象ではなく、機能が制限されることがあります。

詳細については、「Microsoft Azure プレビューの追加利用規約」を確認してください。

Azure Communication Services UI ライブラリでは、企業と顧客とのより良いコミュニケーションを促進するために、UI ライブラリを使用するためのクロスプラットフォームソリューションを試す JavaScript バンドルが提供されます。このチュートリアルは、UI ライブラリと Teams を使用して通話を開始する最も簡単な方法です。

このチュートリアルを学習すると、以下が可能になります。

顧客と企業をつなぐ Web ページに通話エクスペリエンスを配置できるようにする
React 以外のプラットフォームで通話エクスペリエンスを作成する

前提条件

エクスペリエンス全体を完了する前に、これらの手順を完了する必要があります。 Teams 音声アプリケーションまたは Teams テナントフェデレーションの設定について質問がある場合は、Teams 管理者にお問い合わせください。

サポートされているプラットフォームのいずれかにインストールされた Visual Studio Code。
Node.js、Active LTS、Maintenance LTS バージョン Node 20 LTS が推奨されます。 node --version コマンドを使用して、現在のバージョンを確認してください。
Azure Communication Services リソース。通信リソースを作成します。
Azure Communication Services リソースとの相互運用のために、Teams テナントのセットアップを完了する
Teams 通話キューと Azure Communication Services の操作。
Teams 自動応答と Azure Communication Services の操作。

Node および VS Code の確認

このコマンドを使用して、Node が正しくインストールされていることを確認できます。

node -v

出力には、インストールしたバージョンが示されます。Node がインストールされておらず、PATH に追加されていない場合は失敗します。 Node と同様に、このコマンドを使用して Visual Studio Code がインストールされているかどうかを確認できます。

code --version

Node と同様に、コンピューターに VS Code をインストールする際に問題が発生した場合、このコマンドは失敗します。

作業の開始

このプロジェクトは、4 つの簡単な手順で作成します。

プロジェクトを作成する
コードを取得する
Azure Communication Services と 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 という新しいファイルを作成します。これは、通話エクスペリエンスをアタッチする Web ページです。

2.コードの取得

まず、Outbound Call Composite 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 Communication Services と Teams 音声アプリケーションの設定

次に、ローカルユーザーの ID を作成し、それを使用してローカルユーザーを認証して通話を開始できるようにします。ユーザーの 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 portal または Azure CLI から取得した userId と token で更新します。 displayName を設定する必要もあります。

次に、先ほど Azure Communication Services リソースのフェデレーションを行ったときにフェッチされた 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 フレームワークに UI ライブラリを統合する方法を参照してください。先ほど行ったこのチュートリアルの手順は、そこで概説されている内容にそのまま反映されており、React 以外のフレームワークでの UI ライブラリ composites の読み込みについて説明したものです。

次のステップ

Teams Voice アプリケーションの詳細については、Teams 自動応答と Teams 通話キューに関するドキュメントを参照してください。 React を使用して、より完全なエクスペリエンスを構築するためのチュートリアルも参照してください。

クイックスタート: 通話アプリを Teams 通話キューに参加させる

クイックスタート: 通話アプリを Teams 自動応答に参加させる

クイックスタート: Teams 通話キューと自動応答を呼び出す Azure Communication Services UI ライブラリの概要

次の方法で共有