Have you heard about Phono, our open source Javascript Phone API project?
Phono is a free HTML5 jQuery-based web phone that you can add to any web page to place or receive open SIP-based VoIP calls to/from any web browser (or iOS/Android mobile device using Phono Mobile)!
Phono can be connected to Tropo to place or receive phone calls to/from real telephone numbers! Phono can also interact with Tropo voice applications directly from a web page using Tropo’s speech recognition and text-to-speech in 24 languages as well as record and play media such as WAV or MP3 files or conduct conference calls, call transfers, call recording, etc.
To make things even better, Phono and Tropo both support SIP headers which are basically key/value pairs of data that you can sent along with calls. SIP headers are very common in call center applications and enterprise screen-pop implementations. Using SIP headers allows Phono to place a call into a Tropo application and pass along data instructing Tropo to transfer the call to another telephone number. This is how all of the click-to-call demo applications work on phono.com. These demo applications are also limited to 10 minutes in length so that you can experience the quality of a Phono call and write your own Tropo application for longer calls.
Because we have had a few questions lately on this topic, I wanted to provide some sample code for both Phono and Tropo to make this easier for you to apply to your application. This demo application allows you to enter a phone number on a web page and call it using Phono and Tropo. The web page has a simple form that asks for a phone number and has a call button that initiates a SIP VoIP call to Tropo app:9996182316. Reviewing the Phono code below, you will find that it uses jQuery to pass the phone number value in the textbox to Tropo as a SIP header.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script src="http://s.phono.com/releases/0.3/jquery.phono.js"></script>
</head>
<body>
<input id="phonenumber" type="text">
<input id="call" type="button" disabled="true" value="Loading..." />
<span id="status"></span>
<script>
$(document).ready(function(){
var phono = $.phono({
apiKey: "your secret key",
onReady: function() {
$("#call").attr("disabled", false).val("Call");
}
});
$("#call").click(function() {
$("#call").attr("disabled", true).val("Busy");
phono.phone.dial("app:9996182316", {
headers: [
{
name:"x-numbertodial",
value:$('#phonenumber').val()
}
],
onRing: function() {
$("#status").html("Ringing");
},
onAnswer: function() {
$("#status").html("Answered");
},
onHangup: function() {
$("#call").attr("disabled", false).val("Call");
$("#status").html("Hungup");
}
});
});
})
</script>
</body>
</html>
You could write a Tropo transfer application using the Scripting API in one line of Ruby code that transfers the call to the phone number in the SIP header like this:
transfer $currentCall.getHeader("x-numbertodial")
What if you wanted to add a timer that ends the call after 10 minutes like we do on phono.com for demo purposes? This feature is also simple but it requires multithreading your Ruby application and using our REST API for sending a signal to interrupt the transfer method once your timer reaches its alarm.
require "net/http"
# Create second thread for timer and announcements
Thread.new do
sleep 600 # Note: Sleep is in seconds so 600 = 10 minutes
http = Net::HTTP.new "api.tropo.com"
request = Net::HTTP::Get.new "/1.0/sessions/#{$currentCall.sessionId}/signals?action=signal&value=limitreached"
response = http.request request
end
say "hold please while we transfer your call."
transfer $currentCall.getHeader("x-numbertodial"), :allowsignals => "limitreached"
say "your limit has been reached."
That’s cool but what if you wanted to block certain phone numbers or limit the demo calls to North America? You could add area codes or phone numbers to a regex array and check the desired phone number against the list of regexes to see if you should allow the call to transfer or not like this example:
phone = $currentCall.getHeader "x-numbertodial"
# Blocked North American area codes
blocked = [
/^\+?1?8[024]9/,
/^\+?1?26[48]/,
/^\+?1?24[26]/,
/^\+?1?34[05]/,
/^\+?1?[62]84/,
/^\+?1?67[10]/,
/^\+?1?78[47]/,
/^\+?1?8[024]9/,
/^\+?1?86[89]/,
/^\+?1?441/,
/^\+?1?473/,
/^\+?1?664/,
/^\+?1?649/,
/^\+?1?721/,
/^\+?1?758/,
/^\+?1?767/,
/^\+?1?876/,
/^\+?1?939/
]
block_call = blocked.any? { |x| phone =~ x }
You could add this code immediately above your transfer and add a conditional statement that says something like this example:
if block_call
say "calls to this area code are blocked."
else
say "hold please while we transfer your call."
transfer phone, :allowsignals => "limitreached"
say "your limit has been reached."
end
You could also add billing functionality to the Tropo script by applying a rate based on country code and multiply it times the number of seconds that the call was in progress. To accomplish this goal, you would add a timestamp at the beginning of the script and a timestamp directly following the transfer method. When either party hangs up, the Tropo script will continue running with the line immediately following the blocked method such as transfer in this case.
If necessary, you could also check to see if the Phono caller is still on the call by interrogating the $currentCall.isActive property or by wrapping your entire application in a while loop like this example:
while $currentCall.isActive
# Do Stuff
end
I think that should get you started! You can now build your next-generation click-to-call application using Phono and Tropo! Please let us know how you are using Phono with your Tropo applications :)
Join us Friday January 27th for our Tropo Drinkup in San Francisco at our SOMA headquarters office and enjoy some complimentary drinks while entertained by future rockstars letting loose on our piano and guitars.
