2022.03.28
本記事では、Twilioでもっとも多い利用用途である「ブラウザフォンの実装方法」についてご紹介いたします。
目次
ブラウザフォンについて
ブラウザフォンは、文字通りウェブブラウザ（SafariやGoogle Chromeなど）を用いて電話ができるツールのことです。
パソコンとインターネット環境・ブラウザ環境さえあれば、URLを共有するだけですぐに使い始められます。専用のソフトをインストールする必要もありません。
また従来の固定電話と異なり、オフィス内に電話機を設置する必要がありません。そのため場所を選ばず、すぐに電話窓口を立ち上げられることも大きな特徴です。
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キーの作る方は、下記記事をご覧ください。
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に登録すると、通話の発着信が可能になります。
発着信が可能になると、下記画面に変化します。
Your Device Infoではスピーカーやマイクの設定が可能です。またMake a Callでは発信先の電話番号（例:+819012345678）を入力してCallをクリックすると、電話を発信できます。
まとめ
この記事を読んだ人へのオススメ
-
2022.02.17
-
2020.04.23
-
2020.06.01
-
2021.03.05
