[Twilio]ブラウザフォンを作ってみる#9

クラウド電話API -Twilio

#Node.js

#Twilio

#JavaScript

中村修太

2013.04.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Twilioクライアントを使えばブラウザフォンが実装できます

いままでは電話機とTwilioサーバの機能を利用して、いろいろな機能を試してみました。
しかし、Twilioの持っている機能はこれだけではありません。
Twilioはクライアントサイド用のJacsScriptライブラリである、「Twilioクライアント」を提供しています。
これは、公式サイトでは次のように説明されています。

従来の電話ネットワークを越えて、Twilio の可能性を拡張します。
かつて、Twilioで音声を伝達するには、電話を使って PSTN を経由させる方法しかありませんでした。
Twilio クライアントを使えば、従来のような電話とのやり取りに依存した Twilio アプリケーションの構築にとらわれる必要はありません。
さらに、ユーザーが作成した既存のアプリケーションは、そのまま Twilio クライアントと通信することができます。

Twilioクライアントを使用すれば、ブラウザ上から既存のTwilioアプリケーションとそのまま通信を行ったり、
電話や他のクライアントと音声通話を行うこともできるようです。
今回は、Twilioクライアントを使って、ブラウザからTwilioに電話をかけてみます。
いままで使用していたサンプルを元に、jade + Javascript + expressを使用してブラウザフォンを作ってみましょう。

環境構築方法

実行環境およびTwilioアカウントについては、第１回記事と第２回記事を見て設定＆確認しておいてください。
今回も第４回のサンプルをベースに作成するので、
サンプルを用意しましょう。
なお、今回はHerokuへデプロイする必要はないので、Heroku環境は用意する必要はありません。
(ローカルで動くexpress + node環境があればOK)

ブラウザフォンを実装

今回は、簡単なブラウザフォンを実装してみます。

ここのサンプルをベースに、ブラウザフォンを実装する
Callボタンを押すと、Twilioアプリに接続して通話状態になり、メッセージが流れる
Hangupボタンを押すと通話終了

画面はこんな感じです。サンプルではcssも用意されています。
twilio9-1

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ボタンを押すと、途中でも通話が終了します。