[Twilio]ブラウザで着信通話を受けてみる#10

ブラウザフォンで発着信をする

前回はブラウザフォンを実装してみたわけですが、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)をすれば、会話ができます。

まとめ

今回はブラウザで着信をうけてみました。もちろん、着信だけでなく発信も可能です。
発信のサンプルものっているので、公式サイトで確認してみてください。

参考サイトなど

• 公式: http://kddi-web.twilio.jp/
• Github: http://twilio.github.io/twilio-node/
• ブラウザーで着信通話を受ける: http://jp.twilio.com/docs/quickstart/java/client/incoming-calls