この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Twilioクライアントを使えばブラウザフォンが実装できます
いままでは電話機とTwilioサーバの機能を利用して、いろいろな機能を試してみました。 しかし、Twilioの持っている機能はこれだけではありません。 Twilioはクライアントサイド用のJacsScriptライブラリである、「Twilioクライアント」を提供しています。 これは、公式サイトでは次のように説明されています。
従来の電話ネットワークを越えて、Twilio の可能性を拡張します。 かつて、Twilioで音声を伝達するには、電話を使って PSTN を経由させる方法しかありませんでした。 Twilio クライアントを使えば、従来のような電話とのやり取りに依存した Twilio アプリケーションの構築にとらわれる必要はありません。 さらに、ユーザーが作成した既存のアプリケーションは、そのまま Twilio クライアントと通信することができます。
Twilioクライアントを使用すれば、ブラウザ上から既存のTwilioアプリケーションとそのまま通信を行ったり、 電話や他のクライアントと音声通話を行うこともできるようです。 今回は、Twilioクライアントを使って、ブラウザからTwilioに電話をかけてみます。 いままで使用していたサンプルを元に、jade + Javascript + expressを使用してブラウザフォンを作ってみましょう。
環境構築方法
実行環境およびTwilioアカウントについては、第1回記事と第2回記事を見て設定&確認しておいてください。 今回も第4回のサンプルをベースに作成するので、サンプルを用意しましょう。 なお、今回はHerokuへデプロイする必要はないので、Heroku環境は用意する必要はありません。 (ローカルで動くexpress + node環境があればOK)
ブラウザフォンを実装
今回は、簡単なブラウザフォンを実装してみます。
- ここのサンプルをベースに、ブラウザフォンを実装する
- Callボタンを押すと、Twilioアプリに接続して通話状態になり、メッセージが流れる
- Hangupボタンを押すと通話終了
画面はこんな感じです。サンプルではcssも用意されています。
twilioアプリケーションを修正
app.jsにルート情報を追加します。 /browserPhoneをリクエストすると、ブラウザフォン用の画面へ遷移します。 /createTokenは、通話用に必要なトークンを取得するためのURLです。
・
・
//ブラウザフォン画面
app.get('/browserPhone', routes.browserPhone);
//ケイパビリティトークン生成
app.post('/createToken', routes.createToken);
・
・
index.jsに関数を追加しましょう。まずはブラウザフォン画面です。 単に画面を表示しているだけです。
・
・
exports.browserPhone = function (req, res) {
res.render('browserPhone', { title: 'browser phone' });
};
遷移先のブラウザフォン画面で、views/browserPhone.jadeファイルです。 twilioクライアントとjqueryを使用しています。
doctype 5
html
head
title= title
script(src="//static.twilio.com/libs/twiliojs/1.1/twilio.min.js", type="text/javascript")
script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js", type="text/javascript")
link(rel='stylesheet', href='//static0.twilio.com/packages/quickstart/client.css')
script(src="/javascripts/browserPhone.js", type="text/javascript")
body
h1= title
button#call.call Call
button#hangup.hangup Hangup
#log Loading pigeons...
画面で使用する、javascripts/browserPhone.jsを記述します。 通話ボタンが押されると、取得したトークンを使用して、Twilio.Device.connect()関数で通話のための接続をしています。 また、Twilio.Deviceの状態が変化したとき、画面のdiv領域にメッセージを設定しています。
$(function () {
//ready状態になった時に実行
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");
});
//Callボタン
$("#call").click(function () {
//トークン取得
$.ajax({
type: 'POST',
scriptCharset: 'utf-8',
dataType: 'json',
url: '/createToken',
success: function (res) {
//トークンをセットしてデバイスのセットアップ&接続
Twilio.Device.setup(res.token, {debug: true});
Twilio.Device.connect();
},
error: function (err) {
console.log(err);
}
});
});
//Hangupボタン
$("#hangup").click(function () {
//通話終了
Twilio.Device.disconnectAll();
});
});
デバイスからTwilioへ通信をする際は、「ケイパビリティトークン」というトークンを使用して通信を行います。 このトークンを使用することで、AuthTokenを隠した状態で安全にクライアントからTwilioへ通信を行うことができます。 /createTokenリクエストをpostで受けると、ケイパビリティトトークンを生成してJSON形式で返します。 index.jsに、トークンを生成するcreateToken関数を定義しましょう。
・
・
exports.createToken = function (req,res) {
//テスト用SID
var appSid = "APabe7650f654fc34655fc81ae71caa3ff";
//ACCOUNT_SIDとAUTH_TOKENは自分の環境のものを設定
var capability = new twilio.Capability(<ACCOUNT_SID>, <AUTH_TOKEN>);
capability.allowClientOutgoing(appSid);
var token = capability.generate();
res.writeHead(200, {'content-type': 'text/json' });
res.end(JSON.stringify({ token : token}) );
}
また、ここでアプリケーション用SID(appSid)を固定値で指定しています。 このIDはTwilioアプリケーション固有のIDです。ここではメッセージが流れる、Twilioが用意しているSIDを使用しています。 SIDを自分のTwilioアプリケーションのSIDにすれば、そこに宛てて接続を試みます。
ローカルでnodeを起動して確認
アプリケーションを記述が終わったら、ローカルでnodeを起動して動作を確認してみましょう。
% cd /path/your/twilio //作成しているtwilioアプリケーションへ移動
% node app.js
Express server listening on port 3000
http://localhost:3000/browserPhoneにアクセスすると、ブラウザフォン画面が表示されます。 ここでCallボタンを押すと、(マイク接続の許可確認が出て@Chrome)Twilioへ接続されてメッセージ音声が流れます。 メッセージの途中でも、Hangupボタンを押すと、途中でも通話が終了します。
まとめ
今回はシンプルなブラウザフォンを作ってみました。 これを応用すれば、ブラウザから固定電話へかけたり、ブラウザで着信を受けたり、クライアント同士で通話したりするもの可能なはずです。 次回以降、引き続きブラウザフォンの機能を試していく予定です。
参考サイトなど
- 公式: http://kddi-web.twilio.jp/
- Github: http://twilio.github.io/twilio-node/
- Twilio Client Java クイックスタート: http://jp.twilio.com/docs/quickstart/java/client/incoming-calls