快速入門：外撥給電話號碼的通話

文章
09/25/2024

使用通訊服務的通話 SDK，將 PSTN 通話新增至應用程式，以開始使用 Azure 通訊服務。

重要

Azure 通訊服務僅支援北美洲、波多黎各、加拿大、丹麥、英國和澳洲的緊急號碼緊急電話。

Azure 通訊服務語音電話 (PSTN) 可用來撥打北美洲、波多黎各和加拿大的 911 緊急號碼、在丹麥撥打 112 緊急號碼、在澳洲撥打 000 緊急號碼，以及在英國撥打 999 和 112 緊急號碼。 Azure 通訊服務目前不支援從這些國家或區域外部撥打這些緊急號碼，或在其他國家或區域內撥打緊急服務。

範例程式碼

在 GitHub 上找到此快速入門的最終程式碼

注意

您可以使用 Azure 通訊服務 UI 程式庫，以存取外撥給電話號碼的通話。 UI 程式庫讓開發人員只需使用幾行程式碼，就能將已啟用 PSTN 的通話用戶端新增至其應用程式中。

必要條件

具有有效訂用帳戶的 Azure 帳戶。免費建立帳戶。
已部署通訊服務資源。建立通訊服務資源。
在通訊服務資源中取得的電話號碼，或已設定的 Azure 通訊服務直接路由。如果您有免費的訂用帳戶，則可以取得試用電話號碼。
用來啟用通話用戶端的 User Access Token。如需如何取得 User Access Token 的詳細資訊

設定

建立新的 Node.js 應用程式

開啟您的終端機或命令視窗，為您的應用程式建立新的目錄，並瀏覽至該目錄。

mkdir calling-quickstart
cd calling-quickstart

執行 npm init -y 以使用預設設定建立 package.json 檔案。

npm init -y

Install the package

使用 npm install 命令，以安裝適用於 JavaScript 的 Azure 通訊服務通話 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();

啟動通話

指定您在通訊服務資源中取得的電話號碼，將用來開始通話：

警告

電話號碼應以 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 應用程式的螢幕擷取畫面。

您可以在新增的文字欄位中提供電話號碼，並按一下 [啟動通話] 按鈕，以對實際的電話號碼進行通話。

重要

Azure 通訊服務僅支援北美洲、波多黎各、加拿大、丹麥、英國和澳洲的緊急號碼緊急電話。

範例程式碼

在 GitHub 上找到此快速入門的最終程式碼

必要條件

具有有效訂用帳戶的 Azure 帳戶。免費建立帳戶。
已部署通訊服務資源。建立通訊服務資源。
在通訊服務資源中取得的電話號碼，或已設定的 Azure 通訊服務直接路由。如果您有免費的訂用帳戶，則可以取得試用電話號碼。
用來啟用通話用戶端的 User Access Token。如需如何取得 User Access Token 的詳細資訊
完成開始將通話新增至應用程式的快速入門

先決條件檢查

若要檢視與您通訊服務資源相關聯的電話號碼，請登入 Azure 入口網站、尋找您的通訊服務資源，然後從左側瀏覽窗格開啟 [電話號碼] 索引標籤。

設定

將 PSTN 功能新增至您的應用程式

修改 MainActivity.java，將 PhoneNumber 類型新增至您的應用程式：

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

啟動通話

指定您從通訊服務資源內取得的電話號碼。會將此號碼作為來電者識別碼以開始通話：

警告

請注意，電話號碼應以 E. 164 國際標準格式提供。 (例如：+12223334444)

修改 MainActivity.java 中的 startCall() 事件處理常式，使其處理電話通話：

    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);
    }

啟動應用程式並呼叫 Echo Bot

應用程式現在可以使用工具列上的 [執行應用程式] 按鈕 (Shift+F10) 來啟動。若要撥打電話，請在新增的文字欄位中提供電話號碼，然後選取 [通話] 按鈕。

警告

請注意，電話號碼應以 E. 164 國際標準格式提供。 (例如：+12223334444)

螢幕擷取畫面：顯示已完成的應用程式。

重要

Azure 通訊服務僅支援北美洲、波多黎各、加拿大、丹麥、英國和澳洲的緊急號碼緊急電話。

必要條件

具有有效訂用帳戶的 Azure 帳戶。免費建立帳戶。
已部署通訊服務資源。建立通訊服務資源。
在通訊服務資源中取得的電話號碼，或已設定的 Azure 通訊服務直接路由。如果您有免費的訂用帳戶，則可以取得試用電話號碼。
用來啟用通話用戶端的 User Access Token。如需如何取得 User Access Token 的詳細資訊
完成開始將通話新增至應用程式的快速入門

先決條件檢查

若要檢視與您通訊服務資源相關聯的電話號碼，請登入 Azure 入口網站、尋找您的通訊服務資源，然後從左側瀏覽窗格開啟 [電話號碼] 索引標籤。
您可以使用適用於 iOS 的 Azure 通訊服務通話 SDK，建置與執行應用程式：

設定

啟動通話

指定您在通訊服務資源中取得的電話號碼，將用來開始通話：

警告

請注意，電話號碼應以 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")
                    }
                }
            }
        }
    }

執行程式碼

您可以藉由選取 [產品] > [執行] 或使用 (⌘-R) 鍵盤快速鍵，在 iOS 模擬器上建置並執行應用程式。

快速入門應用程式的最終外觀與風格

您可以在新增的文字欄位中提供電話號碼並按一下 [啟動通話] 按鈕，以進行通話。

警告

請注意，電話號碼應以 E. 164 國際標準格式提供。 (例如：+12223334444)

注意

第一次進行通話時，系統會提示您需要麥克風的存取權。在實際執行環境應用程式中，您應該使用 AVAudioSession API 檢查權限狀態，並在未授與權限時，正常地更新應用程式的行為。

清除資源

如果您想要清除並移除通訊服務訂用帳戶，您可以刪除資源或資源群組。刪除資源群組也會刪除與其相關聯的任何其他資源。深入了解如何清除資源。

下一步

如需詳細資訊，請參閱下列文章：

分享方式：

快速入門：外撥給電話號碼的通話

範例程式碼

必要條件

設定

建立新的 Node.js 應用程式

Install the package

設定應用程式架構

啟動通話

結束通話

執行程式碼

範例程式碼

必要條件

先決條件檢查

設定

將 PSTN 功能新增至您的應用程式

啟動通話

啟動應用程式並呼叫 Echo Bot

必要條件

先決條件檢查

設定

啟動通話

執行程式碼

清除資源

下一步

意見反映

更多資源