クイックスタート: 電話番号への発信呼び出し

[アーティクル]
07/19/2023

Communication Services Calling SDK を使用して PSTN 通話をアプリに追加することによって、Azure Communication Services の使用を開始します。

重要

Azure Communication Services では、米国、プエルトリコ、カナダ、デンマーク、英国にのみ、緊急電話番号に緊急通報できます。

Azure Communication Services の音声通話 (PSTN) を使用して緊急電話番号 (米国、プエルトリコ、カナダの場合は 911、デンマークの場合は 112、英国の場合は 999 と 112) にダイヤルできます。現在、Azure Communication Services では、これらの国または地域以外からの緊急電話番号のダイヤル、および他の国や地域の緊急サービスへのダイヤルはサポートされていません。

サンプルコード

このクイックスタートの最終的なコードは GitHub にあります

注意

電話番号への発信通話には、Azure Communication Services UI ライブラリを利用してアクセスできます。この UI ライブラリによって、開発者は PSTN が有効な通話クライアントをわずか数行のコードでアプリケーションに追加できます。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
デプロイ済みの Communication Services リソース。 Communication Services のリソースを作成する。
Communication Services リソースで電話番号を取得している、または Azure Communication Services の直接ルーティングが構成されています。無料サブスクリプションをお持ちの場合は、試用版の電話番号を取得できます。
通話クライアントを有効にするための User Access Token。 User Access Token を取得する方法についての詳細

設定

新しい Node.js アプリケーションを作成する

ターミナルまたはコマンドウィンドウを開き、アプリ用の新しいディレクトリを作成し、そこに移動します。

mkdir calling-quickstart
cd calling-quickstart

既定の設定で npm init -y を実行して、package.json ファイルを作成します。

npm init -y

パッケージをインストールする

npm install コマンドを使用して、JavaScript 用の Azure Communication Services Calling SDK をインストールします。

npm install @azure/communication-common --save
npm install @azure/communication-calling --save

--save オプションを使用すると、package.json ファイル内の依存関係としてライブラリが表示されます。

アプリのフレームワークを設定する

このクイックスタートでは、パーセルを使用してアプリケーション資産をバンドルします。次のコマンドを実行してインストールし、package.json の開発依存関係として一覧表示します。

npm install parcel --save-dev

自分のプロジェクトのルートディレクトリに、index.html ファイルを作成します。このファイルを使用して、ユーザーが電話をかけることができるようにする基本的なレイアウトを構成します。

コードは次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <title>Communication Client - Calling Sample</title>
  </head>
  <body>
    <h4>Azure Communication Services</h4>
    <h1>Calling Quickstart</h1>
    <input 
      id="callee-phone-input"
      type="text"
      placeholder="Who would you like to call?"
      style="margin-bottom:1em; width: 230px;"
    />
    <div>
      <button id="call-phone-button" type="button">
        Start Call
      </button>
      &nbsp;
      <button id="hang-up-phone-button" type="button" disabled="true">
        Hang Up
      </button>
    </div>
    <script src="./app.js" type="module"></script>
  </body>
</html>

このクイックスタートのアプリケーションロジックを格納するために、app.js という名前のファイルを自分のプロジェクトのルートディレクトリに作成します。次のコードを追加して、通話クライアントをインポートし、ビジネスロジックをアタッチできるように DOM 要素への参照を取得します。

import { CallClient, CallAgent } from "@azure/communication-calling";
import { AzureCommunicationTokenCredential } from '@azure/communication-common';

let call;
let callAgent;

const calleePhoneInput = document.getElementById("callee-phone-input");
const callPhoneButton = document.getElementById("call-phone-button");
const hangUpPhoneButton = document.getElementById("hang-up-phone-button");

async function init() {
    const callClient = new CallClient();
    const tokenCredential = new AzureCommunicationTokenCredential('<USER ACCESS TOKEN with VoIP scope>');
    callAgent = await callClient.createCallAgent(tokenCredential);
    //callPhoneButton.disabled = false;
}

init();

電話の呼び出しを開始する

Communication Services リソースで取得した電話番号を指定してください。通話を開始する際に使用します。

警告

電話番号は、E.164 国際標準形式になっている必要があります。 (例: +12223334444)。

callPhoneButton がクリックされたときに、指定した電話番号の呼び出しを開始するイベントハンドラーを追加します。

callPhoneButton.addEventListener("click", () => {
  // start a call to phone
  const phoneToCall = calleePhoneInput.value;
  call = callAgent.startCall(
    [{phoneNumber: phoneToCall}], { alternateCallerId: {phoneNumber: 'YOUR AZURE REGISTERED PHONE NUMBER HERE: +12223334444'}
  });
  // toggle button states
  hangUpPhoneButton.disabled = false;
  callPhoneButton.disabled = true;
});

通話を終了する

hangUpPhoneButton がクリックされたときに現在の通話を終了するイベントリスナーを追加します。

hangUpPhoneButton.addEventListener("click", () => {
  // end the current call
  call.hangUp({
    forEveryone: true
  });

  // toggle button states
  hangUpPhoneButton.disabled = true;
  callPhoneButton.disabled = false;
});

forEveryone プロパティは、すべての通話参加者の通話を終了します。

コードの実行

アプリをビルドして実行するには、コマンド npx parcel index.html を使用します。

ブラウザーを開き、http://localhost:1234/ に移動します。次の Web アプリケーションが表示されます。

Screenshot of the completed JavaScript Application.

追加したテキストフィールドに電話番号を入力し、 [Start Phone Call](通話を開始) ボタンをクリックすることによって、実際の電話番号を呼び出すことができます。

重要

Azure Communication Services では、米国、プエルトリコ、カナダ、デンマーク、英国にのみ、緊急電話番号に緊急通報できます。

サンプルコード

このクイックスタートの最終的なコードは GitHub にあります

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
デプロイ済みの Communication Services リソース。 Communication Services のリソースを作成する。
Communication Services リソースで電話番号を取得している、または Azure Communication Services の直接ルーティングが構成されています。無料サブスクリプションをお持ちの場合は、試用版の電話番号を取得できます。
通話クライアントを有効にするための User Access Token。 User Access Token を取得する方法についての詳細
アプリケーションへの通話の追加の概要に関するクイックスタートを完了します

前提条件のチェック

Communication Services リソースに関連付けられている電話番号を表示するには、Azure portal にサインインし、Communication Services リソースを見つけて、左側のナビゲーションペインから [電話番号] タブを開きます。

設定

PSTN 機能をアプリに追加する

MainActivity.java を編集してアプリに PhoneNumber 型を追加します。

import com.azure.android.communication.common.PhoneNumberIdentifier;

電話の呼び出しを開始する

Communication Services リソース内から取得した電話番号を指定してください。この番号は、呼び出しを開始するための呼び出し元 ID として使用されます。

警告

電話番号は、E.164 国際標準形式になっている必要があります (例: +12223334444)。

startCall() イベントハンドラーで通話を処理するように MainActivity.java を編集します。

    private void startCall() {
        EditText calleePhoneView = findViewById(R.id.callee_id);
        String calleePhone = calleePhoneView.getText().toString();
        PhoneNumberIdentifier callerPhone = new PhoneNumberIdentifier("+12223334444");
        StartCallOptions options = new StartCallOptions();
        options.setAlternateCallerId(callerPhone);
        options.setVideoOptions(new VideoOptions(null));
        call = agent.startCall(
                getApplicationContext(),
                new PhoneNumberIdentifier[] {new PhoneNumberIdentifier(calleePhone)},
                options);
    }

アプリを起動してエコーボットを呼び出す

ツールバーの [Run App](アプリの実行) ボタン (Shift + F10) を使用してアプリを起動できるようになりました。呼び出しを行うには、追加されたテキストフィールドに電話番号を入力し、[呼び出し] ボタンを選択します。

警告

電話番号は、E.164 国際標準形式になっている必要があります (例: +12223334444)。

Screenshot showing the completed application.

重要

Azure Communication Services では、米国、プエルトリコ、カナダ、デンマーク、英国にのみ、緊急電話番号に緊急通報できます。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
デプロイ済みの Communication Services リソース。 Communication Services のリソースを作成する。
Communication Services リソースで電話番号を取得している、または Azure Communication Services の直接ルーティングが構成されています。無料サブスクリプションをお持ちの場合は、試用版の電話番号を取得できます。
通話クライアントを有効にするための User Access Token。 User Access Token を取得する方法についての詳細
アプリケーションへの通話の追加の概要に関するクイックスタートを完了します

前提条件のチェック

Communication Services リソースに関連付けられている電話番号を表示するには、Azure portal にサインインし、Communication Services リソースを見つけて、左側のナビゲーションペインから [電話番号] タブを開きます。
アプリの作成と実行には、iOS 用の Azure Communication Services Calling SDK を使用できます。

設定

電話の呼び出しを開始する

Communication Services リソースで取得した電話番号を指定してください。通話を開始する際に使用します。

警告

電話番号は、E.164 国際標準形式になっている必要があります (例: +12223334444)。

[通話を開始] ボタンをタップしたときに実行される startCall イベントハンドラーに変更を加えます。

func startCall() {
        // Ask permissions
        AVAudioSession.sharedInstance().requestRecordPermission { (granted) in
            if granted {
                let startCallOptions = StartCallOptions()
                startCallOptions.alternateCallerId = PhoneNumberIdentifier(phoneNumber: "<YOUR AZURE REGISTERED PHONE NUMBER>")
                self.callAgent!.startCall(participants: [PhoneNumberIdentifier(phoneNumber: self.callee)], options: startCallOptions) { (call, error) in
                    if (error == nil) {
                        self.call = call
                    } else {
                        print("Failed to get call object")
                    }
                }
            }
        }
    }

コードの実行

iOS シミュレーターでアプリをビルドして実行するには、[製品]>[実行] の順に選択するか、(⌘-R) キーボードショートカットを使用します。

Final look and feel of the quick start app

追加したテキストフィールドに電話番号を入力し、[通話を開始] ボタンをクリックすることによって、電話を呼び出すことができます。

警告

電話番号は、E.164 国際標準形式になっている必要があります (例: +12223334444)。

Note

初めて通話を行うときに、マイクへのアクセスを求めるメッセージが表示されます。実稼働アプリケーションでは、AVAudioSession API を使用してアクセス許可の状態を確認し、アクセス許可が付与されていない場合はアプリケーションの動作を適切に更新する必要があります。

リソースをクリーンアップする

Communication Services サブスクリプションをクリーンアップして解除する場合は、リソースまたはリソースグループを削除できます。リソースグループを削除すると、それに関連付けられている他のリソースも削除されます。詳細については、リソースのクリーンアップに関する記事を参照してください。

次の手順

詳細については、次の記事を参照してください。

Calling SDK の機能について確認する
通話のしくみの詳細について確認する
番号検索機能について

クイック スタート: 電話番号への発信呼び出し

サンプル コード

前提条件

設定

新しい Node.js アプリケーションを作成する

パッケージをインストールする

アプリのフレームワークを設定する

電話の呼び出しを開始する

通話を終了する

コードの実行

サンプル コード

前提条件

前提条件のチェック

設定

PSTN 機能をアプリに追加する

電話の呼び出しを開始する

アプリを起動してエコー ボットを呼び出す

前提条件

前提条件のチェック

設定

電話の呼び出しを開始する

コードの実行

リソースをクリーンアップする

次の手順

その他のリソース

クイックスタート: 電話番号への発信呼び出し

サンプルコード

サンプルコード

アプリを起動してエコーボットを呼び出す