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

  • [アーティクル]

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

重要

Azure Communication Services が緊急電話番号への緊急通話をサポートしているのは、米国、プエルトリコ、カナダ、デンマーク、イギリス、オーストラリアにおいてのみです。

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

サンプル コード

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

注意

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

前提条件

設定

新しい 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 アプリケーションが表示されます。

完成した JavaScript アプリケーションのスクリーンショット。

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

重要

Azure Communication Services が緊急電話番号への緊急通話をサポートしているのは、米国、プエルトリコ、カナダ、デンマーク、イギリス、オーストラリアにおいてのみです。

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

サンプル コード

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

前提条件

前提条件のチェック

  • 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)。

完成したアプリケーションを示すスクリーンショット。

重要

Azure Communication Services が緊急電話番号への緊急通話をサポートしているのは、米国、プエルトリコ、カナダ、デンマーク、イギリス、オーストラリアにおいてのみです。

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

前提条件

前提条件のチェック

  • 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) キーボード ショートカットを使用します。

クイック スタート アプリの最終的な外観

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

警告

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

Note

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

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

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

次の手順

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