ブログ

ブラウザを電話機やIP電話に!Twilio Client ブラウザフォンの作り方

本記事では、Twilioでもっとも多い利用用途である「ブラウザフォンの実装方法」についてご紹介いたします。

目次

ブラウザフォンについて

ブラウザフォンは、文字通りウェブブラウザ(SafariやGoogle Chromeなど)を用いて電話ができるツールのことです。

パソコンとインターネット環境・ブラウザ環境さえあれば、URLを共有するだけですぐに使い始められます。専用のソフトをインストールする必要もありません。

また従来の固定電話と異なり、オフィス内に電話機を設置する必要がありません。そのため場所を選ばず、すぐに電話窓口を立ち上げられることも大きな特徴です。

Twilioを使ったブラウザフォンのシステム構成

簡単にシステム構成図をご紹介します。

Twilioを使ったブラウザフォンのシステム構成

Twilioを使ったブラウザフォンの実装方法

ここでは、簡易的なブラウザフォンの実装方法をNode.jsを利用してご紹介いたします。
※他の言語についてはクイックスタートをご覧ください。

発着信用TwiML返却API

まず発着信用のTwiMLを生成するAPIを実装します。
電話番号に着信があった際はブラウザフォンを鳴らし、ブラウザフォンから発信された際は通話を転送するTwiMLを返すAPIを作成します。

const VoiceResponse = require("twilio").twiml.VoiceResponse;

exports.voiceResponse = function voiceResponse(requestBody) {
  const toNumberOrClientName = requestBody.To;
  const callerId = "+815012345678"; //Twilioで購入した電話番号
  let twiml = new VoiceResponse();

  // Twilioで購入した電話番号が発信先だった場合、ブラウザフォンに電話を転送します。
  if (toNumberOrClientName == callerId) {
    let dial = twiml.dial();

    // Client Nameは電話を繋げたいクライアント名を設定します。
    dial.client("Client Name");

  } else if (requestBody.To) {
    // ここからは、ブラウザフォンから発信する際に利用します。

    // 発信元番号(Twilioで購入した電話番号)を設定します。
// ここを設定しないと、非通知での着信となります。 let dial = twiml.dial( { callerId } ); // 発信先が、電話番号か別のブラウザフォンか確認し、発信先を設定します。 const attr = isAValidPhoneNumber(toNumberOrClientName) ? "number" : "client";
    // オプションなしで、発信先を設定します。
// オプションを設定したい場合は、{}にパラメータを設定してください。 dial[attr]({}, toNumberOrClientName); } else { twiml.say("Thanks for calling!"); } return twiml.toString(); }; /** * 電話番号か確認します * @param {Number|String} number * @return {Boolean} */ function isAValidPhoneNumber(number) { return /^[\d\+\-\(\) ]+$/.test(number); }

TwiML APPに発着信用TwiML返却APIを設定

ブラウザフォンから発信する際に利用するTwiMLは、取得したアクセストークンに含まれるTwiML APP SIDの情報を利用します。よってアクセストークンにTwiML APP SIDを設定するため、作成した発着信用TwiML返却APIをTwiML APPに設定します。

TwiML APPを作成

TwiML APPの設定画面を開き、Product一覧からProgrammable Voiceを選択します。

Programmable Voiceの画面が開いたら、TwiML > TwiML Appsの順でクリックして画面を開きます。
画面が開いたら、”Create new TwiML App”をクリックして、TwiML Appを作成します。

TwiML APPにAPIを設定

”Create new TwiML App”をクリック後、作った発着信用TwiML返却APIのURLを設定します。

  • Friendly Name:任意の名前
  • Request URL:発着信用TwiML返却APIのURL

作成したTwiML Appを開くとTwiML APP SIDを確認できます。メモをとっておきましょう。

トークン取得API

続いて、ブラウザフォンのIDと発信用のTwiML APP SIDを含んだトークンを返すAPIを作成します。

サンプルコードの中で出てくるAPIキーの作る方は、下記記事をご覧ください。

Twilio API Keyの使い方と発行方法

const AccessToken = require("twilio").jwt.AccessToken;
const VoiceGrant = AccessToken.VoiceGrant;

exports.tokenGenerator = function tokenGenerator() {
  // ブラウザフォンを識別するためのシステムで一意の名前
  // 実際のシステム開発の際は、動的に変わるように設計してください。
  const identity = "Client Name";
  
  // AccountSid
  const accountSid = "ACXXXXXXXXXXXX";
  // SKから始まるApiKey
  const apiKey = "SKXXXXXXXXXXXX";
  // Secret
  const apiSecret = "XXXXXXXXXXXXXX";
  // TwiML App Sid
  const twimlAppSid = "APXXXXXXXXXXX";

  // アクセストークンを作成
  const accessToken = new AccessToken(
    accountSid,
    apiKey,
    apiSecret
  );
// アクセストークンにブラウザフォンのIDを設定 accessToken.identity = identity;
// ブラウザフォンから発信する際に利用するTwiML App SIDと着信許可を設定 const grant = new VoiceGrant({ outgoingApplicationSid: twimlAppSid, incomingAllow: true, }); accessToken.addGrant(grant); // ブラウザフォンのIDとアクセストークンを含んだJSONを返却する return { identity: identity, token: accessToken.toJwt(), }; };

ブラウザフォン

APIの準備ができたら、次はクライアント部分を実装していきましょう。

※Twilio JavaScript SDKはVersion 2.0よりCDNでは提供されなくなりました。
※便宜上、SDKはインストールした状態といたします。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>twilio phone</title>
        <script src="twilio.min.js"></script>
    </head>
    <body>
        <input type="text" id="phone-number">
        <button id="outgoing" onclick="makeCall()">発信</button>
        <button id="hangup" onclick="hangup()">切断</button>
        <button id="accept" onclick="accept()">接続</button>

        <script>
            let device = null;
            const request = new XMLHttpRequest();

            let connectObj = null;

            connect();

            // Twilioに接続
            function connect() {
                // Twilioセットアップ
                request.open('GET', 'https://your-url/token', true);

                request.onload = function () {
                    var data = JSON.parse(this.response);
                    
                    var option = {
                        edge: 'tokyo'
                    }
                    device = new Twilio.Device(data.token, option);
                    // 発着信するためにTwilioに登録します。
                    device.register();

                    device.on("registered", function () {
                        // 登録が完了した時に呼ばれます
                        console.log('registered');
                    });

                    device.on('error', function (error) {
                        // 接続エラーが発生した際に呼び出される
                        console.log('error');
                    });

                    device.on('incoming', function (conn) {
                        // 着信があった際に呼び出される
                        console.log('incoming');
                        connectObj = conn;
                    });

                };
                request.send();
            }

            // 発信ボタン押下
            function makeCall() {
                const params = {
                    To: document.getElementById('phone-number').value
                };

                if (device) {
                    const outgoingConnection = device.connect({ params });
                }
            }

            // 切断ボタン押下
            function hangup() {
                if (device) {
                    device.disconnectAll();
                }
            }

            // 接続ボタン押下
            function accept() {
                if (connectObj != null) {
                    connectObj.accept();
                }
            }
        </script>
    </body>
</html>

ブラウザフォンのクイックスタート

これまでもっともシンプルな実装方法をご紹介してきましたが、Twilioではマイクの設定など、より高度なアプリケーションをクイックスタートとして提供しております。

ここでは、そのクイックスタートの利用方法についてご紹介いたします。※本記事ではNode.jsのクイックスタートの利用方法をご紹介します。

推奨環境

  • Nodejs
    • version 14.0 以上
  • ngrok
  • WebRTCが利用可能なウェブブラウザ
    • Google Chrome
    • Firefox

セットアップ

まずはgitリポジトリから対象のソースコードをダウンロードします。

// リポジトリをclone(ダウンロード)
git clone https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-node.git
// 該当のリポジトリへ移動
cd voice-javascript-sdk-quickstart-node

続いて環境変数を設定します。
環境変数のテンプレートのファイルをコピーして".env"ファイルを作成します。

cp .env.example .env

作成した.envファイルの中身に、下記値を設定します。

変数名 設定値
TWILIO_ACCOUNT_SID Twilioのコンソールから取得できるAccount SID
TWILIO_TWIML_APP_SID 発信時に利用するTwiML APPのSID
TWILIO_CALLER_ID 発着信に利用するTwilioで購入した電話番号
例:+815012345678
TWILIO_API_KEY/TWILIO_API_SECRET API KeyのSIDとSECRET

Nodeのモジュールをインストールします。

npm install

インストールしたモジュールの中からTwilioのJavaScript SDKをクライアントから呼び出せるよう、publicフォルダにコピーします。

cp node_modules/@twilio/voice-sdk/dist/twilio.min.js public

準備が完了したら、サーバーを起動します。

npm start
// http://localhost:3000 で動作していることを確認できます。

最後にngrokを利用して、ローカル環境を外部から参照できるようにします。

ngrok http 3000

表示された、URLに"/voice"を追加したものをTwiML APPに設定して、セットアップは完了です。

サンプルアプリの利用方法

アプリを起動し、ngrokのURLを開くと、ブラウザフォンの画面が表示されます。

表示されたブラウザフォンの”Start up the Device”をクリックし、デバイスをTwilioに登録すると、通話の発着信が可能になります。

スクリーンショット 2022-02-18 14.12.26

発着信が可能になると、下記画面に変化します。

Your Device Infoではスピーカーやマイクの設定が可能です。またMake a Callでは発信先の電話番号(例:+819012345678)を入力してCallをクリックすると、電話を発信できます。

まとめ

本ブログでご紹介した通り、Twilioを利用すれば、たった百数行のコードだけでブラウザフォンを実装できます。

またTwilioでは保留やグループ通話、ウィスパリングなど、ビジネスフォンを作る際に必要な機能などを実装することも可能です。

アカウントは”無料アカウント作成”から作成できます。利用に必要なポイントも最初はお試しとして付与されているため、すぐに使い始められます。

これを機に、ぜひTwilioを使ったブラウザフォンを作ってみてはいかがでしょうか。

KDDIウェブコミュニケーションズ
KDDIウェブコミュニケーションズ

KDDIウェブコミュニケーションズは、常に「開発者目線」を大切にしており、ブログ記事がお役に立てれば幸いでございます。

お問い合わせはこちら

Share!!

  • お役立ち情報
  • イベント情報
  • 相談会申込
  • 導入事例