この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
ブラウザフォンで発着信をする
前回はブラウザフォンを実装してみたわけですが、welcomeメッセージを聞いただけでした。 ブラウザといえども電話なので、もちろん発着信を行うことができます。今回はブラウザ上で着信を受けてみましょう。
環境構築方法
今回使用した動作環境は以下のとおりです。
- OS : MacOS X 10.7.5
- ブラウザ : Chrome 26
- Node.js : v0.10.4
- npm : 1.2.18
- express : 3.2
- twilio : 1.1.0
今回はexpressのインストールからやってみます。 npmを使用してexpressをインストール、アプリケーション作成を行い、必要モジュールをインストールしましょう。 ※すでにHeroku環境&expressアプリがあればやらなくていいです
% npm install express -g
% express twilio
% cd twilio
% npm install --save
% npn install twilio --save
% git init
Heroku環境の構築は、ここを参考に用意してください。
twilioアプリケーションを修正
今回のサンプルは、ブラウザフォン画面表示後、あらかじめ指定しておいた番号宛てに電話をかけると、 ブラウザ上でコール音がなり、着信をうけることができます。着信を受けると、相手と会話を行うことができます。
1.TwiML Appsを作成
自分用のSIDが必要なので、ここへいき、「TwiML Appを作成する」ボタンを押して、アプリケーションを作成しましょう。 Request URLなどは設定する必要はありません。SIDを覚えておいてください。
2.電話番号管理画面でVoice Request URLを修正
次は使用する番号に着信を受けた際、ブラウザフォンをコールするTwiMLを返すように、ここで使用する番号を選び、Voice Request URLに次の値を指定しましょう。
http://<デプロイしたサーバのドメイン>/dialBrowser
3.twilioアプリケーションを修正
次はアプリケーションの記述です。expressコマンドで作成したアプリに記述していきましょう。 最初はapp.jsにルート情報を追加します。 /browserPhoneはブラウザフォンを表示します。/createTokenではブラウザ通話に必要なトークンを生成します。 /dialBrowserは、Twilioの番号に電話がかかって来た場合、ブラウザフォンを呼び出すためのTwiMLを返します。
・
・
//ブラウザフォン画面
app.get('/browserPhone', routes.browserPhone);
//ケイパビリティトークン生成
app.post('/createToken', routes.createToken);
//ブラウザがダイアルされるように
app.get('/dialBrowser', routes.dialBrowser);
・
・
次はindex.jsで、各リクエストの処理を記述します。 createToken関数で、先ほど登録したアプリケーションのSIDを設定してください。 また、allowClientIncoming関数では、着信を待ち受ける名前を指定します。これはなんでもかまいません。
exports.browserPhone = function (req, res) {
res.render('browserPhone', { title: 'browser phone ' });
};
exports.createToken = function (req,res) {
//アプリケーションSID
var appSid = "<登録したアプリのSID>";
var capability = new twilio.Capability(accountSid, authToken);
capability.allowClientOutgoing(appSid);
capability.allowClientIncoming("<着信を待ち受ける名前>");
var token = capability.generate();
console.log("token:", token);
res.writeHead(200, {'content-type': 'text/json' });
res.end(JSON.stringify({ token : token}) );
}
exports.dialBrowser = function (req,res) {
var resp = new twilio.TwimlResponse();
var opt = {
voice: 'woman',
language: 'ja-jp'
}
resp.dial(function(){this.client("<ダイアルする名前>");});
res.writeHead(200, {'Content-Type': 'text/xml'});
console.log(resp);
res.end(resp.toString());
}
dialBrowser関数では、Twilioの番号に着信があった場合、指定したクライアントへコールします。 ここの名前は、createTokenのallowClientIncomingで指定した名前と同じにします。
遷移先のブラウザフォン画面である、views/browserPhone.jadeファイルを作成します。これは前回のものと同じです。 そして、javascripts/browserPhone.jsを下記のように記述します。
$(function () {
function init() {
//トークン取得
$.ajax({
type: "POST",
scriptCharset: 'utf-8',
dataType: 'json',
url: "/createToken",
success: function (res) {
Twilio.Device.setup(res.token, {debug: true});
},
error: function (err) {
console.log(err);
}
});
}
Twilio.Device.ready(function (device) {
$("#log").text("Ready");
});
Twilio.Device.error(function (error) {
$("#log").text("Error: " + error.message);
});
//接続
Twilio.Device.connect(function (conn) {
$("#log").text("Successfully established call");
});
//通話終了
Twilio.Device.disconnect(function (conn) {
$("#log").text("Call ended");
});
//着信時
Twilio.Device.incoming(function (conn) {
$("#log").text("Incoming connection from " + conn.parameters.From);
conn.accept();
});
//通話ボタン
$("#call").click(function () {
Twilio.Device.connect();
});
//通話ボタン
$("#hangup").click(function () {
//通話終了
Twilio.Device.disconnectAll();
});
//初期化実行
init();
});
基本的に前回と同じなのですが、着信に必要なので、画面にアクセスしたタイミングでトークンを取得するようにしました。 そして、Twilio.Device.incomingが着信時のイベントです。この時点でconn.accept()を実行すれば、相手と接続して通話ができます。
4.Herokuにデプロイして確認
Herokuへログイン後、デプロイしましょう。 ※外部からアクセスできれば、EC2でもなんでもかまいません
% heroku login //IDパスワード入力
% git add .
% git commit -m "ブラウザフォンで着信機能追加"
% git push heroku master
デプロイと起動が完了したら、http://<デプロイしたドメイン>/browserPhoneにアクセスし、 電話機からTwilioの電話番号にかけてみましょう。 ブラウザでコール音がなり、マイク接続許可(@Chrome)をすれば、会話ができます。
まとめ
今回はブラウザで着信をうけてみました。もちろん、着信だけでなく発信も可能です。 発信のサンプルものっているので、公式サイトで確認してみてください。