2022.03.28
まとめ
この記事を読んだ人へのオススメ
-
2022.05.18
-
2022.04.18
-
2022.07.01
-
2022.10.11
ブログ
2022.03.28
本記事では、Twilioでもっとも多い利用用途である「ブラウザフォンの実装方法」についてご紹介いたします。
ブラウザフォンは、文字通りウェブブラウザ(SafariやGoogle Chromeなど)を用いて電話ができるツールのことです。
パソコンとインターネット環境・ブラウザ環境さえあれば、URLを共有するだけですぐに使い始められます。専用のソフトをインストールする必要もありません。
また従来の固定電話と異なり、オフィス内に電話機を設置する必要がありません。そのため場所を選ばず、すぐに電話窓口を立ち上げられることも大きな特徴です。
簡単にシステム構成図をご紹介します。
ここでは、簡易的なブラウザフォンの実装方法をNode.jsを利用してご紹介いたします。
※他の言語についてはクイックスタートをご覧ください。
まず発着信用の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は、取得したアクセストークンに含まれるTwiML APP SIDの情報を利用します。よってアクセストークンにTwiML APP SIDを設定するため、作成した発着信用TwiML返却APIをTwiML APPに設定します。
TwiML APPの設定画面を開き、Product一覧からProgrammable Voiceを選択します。
Programmable Voiceの画面が開いたら、TwiML > TwiML Appsの順でクリックして画面を開きます。
画面が開いたら、”Create new TwiML App”をクリックして、TwiML Appを作成します。
”Create new TwiML App”をクリック後、作った発着信用TwiML返却APIのURLを設定します。
作成したTwiML Appを開くとTwiML APP SIDを確認できます。メモをとっておきましょう。
続いて、ブラウザフォンの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のクイックスタートの利用方法をご紹介します。
まずは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をクリックすると、電話を発信できます。
まとめ
本ブログでご紹介した通り、Twilioを利用すれば、たった百数行のコードだけでブラウザフォンを実装できます。
またTwilioでは保留やグループ通話、ウィスパリングなど、ビジネスフォンを作る際に必要な機能などを実装することも可能です。
アカウントは”無料アカウント作成”から作成できます。利用に必要なポイントも最初はお試しとして付与されているため、すぐに使い始められます。
これを機に、ぜひTwilioを使ったブラウザフォンを作ってみてはいかがでしょうか。
KDDIウェブコミュニケーションズは、常に「開発者目線」を大切にしており、ブログ記事がお役に立てれば幸いでございます。
2022.04.18
2022.05.18
2022.10.11
2022.07.01
2022.09.20
2022.02.17
2022.08.23
2022.10.11
2022.09.20
2022.08.23
2022.07.15