第24回 Twilio Clientを使ってウェブブラウザに電話機能を持たせてみる

スポンサーリンク

前回の 第23回 Twilio ClientとTwiMLAPPについて の Twilio Clientを使ってブラウザから電話をかけてみます。

目的

Twilio Clientを使ってウェブブラウザに電話機能を持たせる。

開発

始める前に、、、
Twilio Clientを使う場合は、TwiMLAPPを作成する必要があります。
※TwiMLAPPを作成するとAPからはじまるSIDが生成されます。このSIDを使ってケーパビリティトークンを作成しないとTwilioClientを使うことはできません。

サンプルファイルが用意されているのでそれを使って作っていきます。
下記URLにクリックして、【TC-browser-phone-master.zip】というサンプルファイルが圧縮されたフォルダーをダウンロードします。
https://github.com/hunnycode/TC-browser-phone

解凍すると下記3つのファイルを確認することができます。

Services
bootstrap
index.php
TC_BP_TwiML.php

実際に扱っていくファイルは

index.php
TC_BP_TwiML.php

の2ファイルになります。

twilio clientは twilio.js を使っていきます。

index.php

<?php
include 'Services/Twilio/Capability.php';

$accountSid = 'your twilio account SID';
$authToken  = 'your twilio Auth Token';

$capability = new Services_Twilio_Capability($accountSid, $authToken);
$capability->allowClientOutgoing('your twilio APP SID');
$capability->allowClientIncoming("your twilio client name");
$token = $capability->generateToken();
?>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Twilio Client Browser Phone</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script>

	<script type="text/javascript">
	 
		Twilio.Device.setup("<?php echo $token; ?>");

		Twilio.Device.ready(function (device) {
			$("#log").text("待機");
		});
	 
		Twilio.Device.error(function (error) {
			$("#log").text("Error: " + error.message);
		});
	 
		Twilio.Device.connect(function (conn) {
			$("#log").text("成功");
		});
	 
		Twilio.Device.disconnect(function (conn) {
			$("#log").text("終了");
		});
	 
		Twilio.Device.incoming(function (conn) {

	        if (confirm('Accept incoming call from ' + conn.parameters.From + '?')){
	            connection=conn;
	            conn.accept();
	        }
		});
	 
		function call() {
			// get the phone number to connect the call to
			params = {"PhoneNumber": $("#client_to_number").val()};
			Twilio.Device.connect(params);
		}
	 
		function hangup() {
			Twilio.Device.disconnectAll();
		}
	</script>

</head>
<body>
	<table align="center">
		<tr>
			<td>
			    <h1>Twilio Browser Phone</h1>
			    <form>
			    	<table class="table">
			    		<tr>
			    			<td>
					            <input class="input-xlarge" type="text" id="client_to_number" name="client_to_number" placeholder="発信先電話番号を入力してください。">
					            <br/>
					            <button class="btn btn-large btn-primary" type="button" id="client_callBtn" name="client_callBtn" onclick="call();">発信</button>
					            <button class="btn btn-large btn-primary" type="button" id="client_hangBtn" name="client_hangBtn" onclick="hangup();">切断</button>
								<div id="log">Loading pigeons...</div>
			            	</td>
			            </tr>
			        </table>
			    </form>
			</td>
		</tr>
	</table>
</body>
</html>

フロント側を制御しているファイルです。

2行目に先ほど解凍したフォルダーの中に入ってあった /Services/ をインクルードします。
インクルードする先のファイルは /Services/Twilio/Capability.php です。

4, 5行目にTwilioのアカウント情報を入力します。こちらのアカウント情報は管理コンソールへログインして確認可能です。

7~10行目でケーパビリティトークンを発行します。
8行目にTwiMLAPPSのSIDを9行目にTwiMLAPPSのフレンドリーネームを設定します。

20行目でブラウザに電話機能を持たせる Twilio.Device を設定するためのJavaScriptを設定します。

<script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.1/twilio.min.js"></script>

上記のJavaScriptファイルをインクルードして、24行目で Twilio.Device.setup を実行。引数に発行したケーパビリティトークンを持たせて電話機能を作っていきます。

26行目の Twilio.Device.ready は、readyイベントが発生した時に呼び出される。Twilio.Device.setup の処理が終わって最初に呼び出される処理。
ここでは指定の位置に「待機」と表示させる処理を入れてます。

30行目の Twilio.Device.error は、何かしらのエラーが発生した時に呼び出される。詳しくは、エラーコードのリファレンスに書かれています。
ここでは指定の位置にエラーの内容を表示させる処理を入れてます。

34行目の Twilio.Device.connect は、connectイベントを受け取った時に処理が開始する。
ここでは指定の位置に「成功」と表示させる処理をいれてます。

38行目の Twilio.Device.disconnect は、通話が終了した時に処理が開始する。
ここでは指定の位置に「終了」と表示させる処理をいれてます。

42行目の Twilio.Device.incoming は、incomingつまり着信があった時に処理を開始します。ここではJavaScriptのConfirmを使ってダイアログをだし、YESをクリックした場合は accept() を実行して通話を開始します。

50行目のcallメソッドは、「発信」ボタンをクリックした時に処理が走る関数です。ここでは、Twilio.Device.connect を使い引数に宛先の電話番号を渡して処理を走らせます。

56行目のhangupメソッドは、「切断」ボタンをクリックした時に処理が走る関数です。ここでは、 Twilio.Device.disconnectAll() を使ってアクティブなコネクションをすべて切断します。

ケーパビリティトークンを発行するための記述が終わったら実際にサーバにアップしてアクセス。
すると下記画面が表示されることを確認。

スクリーンショット 2015-11-18 16.02.39


次に電話の発着信を制御するファイルを作成。
TC_BP_TwiML.php では、状況によって宛先の振り分けを行っている。

TC_BP_TwiML.php

<?php
header('Content-type: text/xml');
 
// 発信者番号:Twilioから取得された電話番号
$callerId = "your twilio tel number";
// 受信者番号:Twilioの電話番号に電話をかけた際に受信者としてTwilio Client名を設定。(番号でも問題ない)
$number = "your twilio client name";

// 画面から入力された電話番号の取得
if (isset($_REQUEST['PhoneNumber'])) {
	$number = $_REQUEST['PhoneNumber'];
}

// 発信先が番号かClient名かを判別し、発信先を設定する。
if (preg_match("/^[\d\+\-\(\) ]+$/", $number)) {
    $numberOrClient = "<Number>" . $number . "</Number>";
} else {
    $numberOrClient = "<Client>" . $number . "</Client>";
}
?>

<Response>
    <Say language="ja-jp">Twilio Clientから電話をかけます。</Say>
    <Dial callerId="<?php echo $callerId ?>">
        <?php echo $numberOrClient ?>
    </Dial>
    <Say language="ja-jp">通話が終了致しました。</Say>
</Response>

10行目でリクエスト情報の中にある PhoneNumber の値を取り出して条件の分岐をかける。もしも値がセットされている場合は、ブラウザーから電話がかかってきたということ。この情報をもとに TwiMLの Number 名詞を使用するか Client 名詞を使うかを判断し変数に代入。
代入した変数は、24行目以降に書いてある Dial 命令動詞の中にネストする。

5行目にある $callerId と $number に記入して、サーバーにアップ。

これで準備完了。

上記の index.php へアクセスして テキストフォームに番号を入力して発信ボタンをクリックして通話ができたら成功。
※番号はE.164フォーマットで記入する必要あり。
逆にブラウザーへ発信することも可能。

参考文献

・Twilio Client概要:https://jp.twilio.com/docs/api/client
・Twilio Device概要:https://jp.twilio.com/docs/api/client/device
・Twilioクライアントブラウザーソフトフォン:https://jp.twilio.com/docs/tutorials/twilio-client-browser-soft-phone
・パソコンのブラウザで電話の発着信を?Twilio Clientで実現できます(概要):https://www.youtube.com/watch?v=pIYZq1Y7hyE
・パソコンのブラウザで電話の発着信を?Twilio Clientで実現できます(TwiMLAPPS):https://www.youtube.com/watch?v=VQssSUmsWYs
・パソコンのブラウザで電話の発着信を?Twilio Clientで実現できます(TwiMLAPPS – REST):https://www.youtube.com/watch?v=cME1qebjqJ0

ブラウザーで電話機能を作るハンズオンイベントを過去開催したのでそちらの資料もご参考ください。
【スライド】http://www.slideshare.net/YouheiIwasaki/0-twilio-with-jaws-ug-in
【ハンズオン資料】http://qiita.com/youhei_iwasaki/items/6e20d465ed1b6b4b2e85

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

フォローする

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