Twilioを使ってブラウザ発信をしてみる

スポンサーリンク

20131203114424

今話題のTwilioを使って初めてのブラウザ発信をしてみます。

Twilioとは

WebサービスAPIを使って通話(英語版)やテキストメッセージの送受信をプログラムすることを可能にするサービス。
(wikipediaより)

こちらの記事でも詳しく記述していますが、Twilioでは電話に関する色々なことができます。

例えば、、、

  • 音声を再生
  • 電話の転送
  • カンファレンス(同時に大人数と通話)
  • メッセージの送信
  • 音声の録音、再生

などなど、、、

しかもこれらの機能をわずか数行で実現できるという素晴らしいシステム。

開発

今日はブラウザから発信する機能をPHPで実装してみます。

Twilioアカウントを作成

Twilio公式サイトにアクセスして手順に従ってアカウントを作成します。
作成方法は下記にまとめています。
アカウント取得方法:http://goo.gl/WHzDqR

PHP用ライブラリーをダウンロード

下記ページでライブラリーのダウンロードが可能です。
https://jp.twilio.com/docs/libraries
PHPに限らず様々な言語のライブラリーが用意されているので、皆さんがお使いの言語にあわせて作成できるところもいいですね。

電話をかけるページを作成

下記、phpファイルを作成します。

call.php

<?php
//環境に合わせてCapability.phpまでのパスを記述
include 'Services/Twilio/Capability.php';
 
// Twilioから発行されたACCOUNT SIDとAUTH TOKENをそれぞれ記述
$accountSid = 'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$authToken  = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
 
// Twilio内で作成したアプリケーションのSIDを記述
$appSid     = 'APxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
 
$capability = new Services_Twilio_Capability($accountSid, $authToken);
$capability->allowClientOutgoing($appSid);
$capability->allowClientIncoming('iwasaki');
$token = $capability->generateToken();
?>

<!DOCTYPE html>
<html>
  <head>
    <title>HOGE</title>
    <script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.1/twilio.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
    </script>
    <link href="http://static0.twilio.com/packages/quickstart/client.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
 
      Twilio.Device.setup("<?php echo $token; ?>");
      
      //-------------------現在の状態を#logボックス内に表示
      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);
        // accept the incoming connection and start two-way audio
        conn.accept();
      });
      //-------------------現在の状態を#logボックス内に表示 ここまで

      function call() {
        // get the phone number to connect the call to
        params = {"PhoneNumber": $("#number").val()};
        Twilio.Device.connect(params);
      }
 
      function hangup() {
        Twilio.Device.disconnectAll();
      }
    </script>
  </head>
  <body>
    <button class="call" onclick="call();">
      Call
    </button>
 
    <button class="hangup" onclick="hangup();">
      Hangup
    </button>
 
    <input type="text" id="number" name="number"
      placeholder="Enter a phone number to call"/>
 
    <div id="log">Loading pigeons...</div>
  </body>
</html>

ブラウザを電話として機能を持たせるためには、Twilio Clientという機能を使う必要があります。
※Twilio Clientについては下記記事をご参考に。
第23回 Twilio ClientとTwiMLAPPについて:http://iwasakiyouhei.com/post-678/

ソース内のACCOUNT SIDとAUTH TOKEN、アプリケーションのSIDとフレンドリーネームを入力したら実際にサーバーにアクセス。すると下記のかっこいい画面が表示されます。

20131203114424

ざっくりとして処理の流れは、、、
1. [Call]ボタンがクリックされると、call()関数が走ります。
2. call()関数では、パラメーターとしてPhoneNumberを名前、$(“#number”).val()で実際に入力された番号を取得、それを値とし、Twilio.Device.connectに渡します。

TwiMLの作成

Twilio番号に電話がかかるとTwiMLを実行するように設定していきます。

Twilioについては下記記事をご参考に。
第1回 Twilioとは:http://iwasakiyouhei.com/post-50/

twiml.xml

<?php
header('Content-type: text/xml');

// Twilioで発行されたcaller ID を入力します。
$callerId = "xxxxxxxxxxxx";

// Twilioクライアントの名前を入力します。
$number   = "iwasaki";

// callページで発行されたPhoneNumberをhtmlspecialcharsして受け取ります。
if (isset($_REQUEST['PhoneNumber'])) {
    $number = htmlspecialchars($_REQUEST['PhoneNumber']);
}

// 変数$numebrに入っている値を正規表現で判別。
if (preg_match("/^[\d\+\-\(\) ]+$/", $number)) {
    $numberOrClient = "<Number>" . $number . "</Number>";
} else {
    $numberOrClient = "<Client>" . $number . "</Client>";
}
?>

<Response>
    <Dial callerId="<?php echo $callerId ?>">
          <?php echo $numberOrClient ?>
    </Dial>
</Response>

ここでは、発信者がクライアントかそれ以外かを判定し、マークアップの記述を振り分けています。判定後は Dial というTwiMLの命令動詞を使って相手にコールしています。

ここまでできたら、実際に call.php にアクセスして電話番号をテキストボックスに入力して掛けてみてください。電話がかかったら成功です。

スポンサーリンク
スポンサーリンク
スポンサーリンク

フォローする

スポンサーリンク
スポンサーリンク