Skip to content

Instantly share code, notes, and snippets.

@vilu

vilu/gist:7508d35ae5675aea0e08

Created December 18, 2014 16:30
Show Gist options
  • Save vilu/7508d35ae5675aea0e08 to your computer and use it in GitHub Desktop.
Save vilu/7508d35ae5675aea0e08 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.http
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Web phone</title>
<script type="text/javascript">
window.onerror = function (error) {
$("#log").text("An unknown error just ocurred");
$("#instructions").show();
$("#instructions").html("Please contact support");
}
</script>
<script type="text/javascript" src="https://static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
body {
text-align: center;
margin: 0;
background-color: white;
overflow:hidden;
}
#log {
width: 250px;
height: 10px;
background: #777777;
padding: 10px;
/*margin-left: -243px;*/
margin: 5px auto 0 auto;
border: 1px solid #d4d4d4;
text-decoration: none;
font:12px/normal sans-serif;
color: #F5F5F5;
white-space: nowrap;
outline: none;
background-color: #404040;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#777777), to(#999999));
background-image: -moz-linear-gradient(#777777, #999999);
background-image: -o-linear-gradient(#777777, #999999);
background-image: linear-gradient(#777777, #999999);
-webkit-background-clip: padding;
-moz-background-clip: padding;
-o-background-clip: padding-box;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
line-height: 10px;
border-radius: 5px;
/* IE hacks */
zoom: 1;
*display: inline;
}
button.hangup, input {
-moz-box-shadow: 1px 2px 10px #BBB;
-webkit-box-shadow: 1px 2px 10px #BBB;
box-shadow: 1px 2px 10px #BBB;
}
button.hangup {
position: relative;
overflow: visible;
display: inline-block;
padding: 0.5em 1em;
border: 1px solid #d4d4d4;
margin: 20px 0 0 0;
text-decoration: none;
text-shadow: 1px 1px 0 #fff;
font:25px/normal sans-serif;
font-weight: bold;
color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
background-image: -o-linear-gradient(#f4f4f4, #ececec);
background-image: linear-gradient(#f4f4f4, #ececec);
-webkit-background-clip: padding;
-moz-background-clip: padding;
-o-background-clip: padding-box;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* IE hacks */
zoom: 1;
*display: inline;
}
button.hangup:hover,
button.hangup:focus,
button.hangup:active,
button.hangup.active {
border-color: #3072b3;
border-bottom-color: #2a65a0;
text-decoration: none;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
color: #fff;
background-color: #3C8DDE;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
background-image: -moz-linear-gradient(#599bdc, #3072b3);
background-image: -o-linear-gradient(#599bdc, #3072b3);
background-image: linear-gradient(#599bdc, #3072b3);
}
button.hangup:active,
button.hangup.active {
border-color: #2a65a0;
border-bottom-color: #3884CF;
background-color: #3072b3;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
background-image: -moz-linear-gradient(#3072b3, #599bdc);
background-image: -o-linear-gradient(#3072b3, #599bdc);
background-image: linear-gradient(#3072b3, #599bdc);
}
/* overrides extra padding on button elements in Firefox */
button.hangup::-moz-focus-inner {
padding: 0;
border: 0;
}
/*button.hangup:before {
content: "";
position: relative;
top: 1px;
float:left;
width: 44px;
height: 37px;
margin: 0 0.75em 0 -0.25em;
background: url(http://static0.twilio.com/packages/quickstart/buttons.png) 0 99px no-repeat;
}
*/
button.hangup:before { background-position: 0 -131px; }
button.hangup:hover:before,
button.hangup:focus:before,
button.hangup:active:before { background-position: 0 -88px; }
/* override the Flash permission window position */
div div {
margin-top: 50px !important;
}
</style>
<script type="text/javascript">
Twilio.Device.setup("eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJBQzExNDliMWY2ZWEwMDg0NTQ1MWFjODU2NTM2MzliY2ZkIiwiZXhwIjoiMTQxODkyMzc4NSIsInNjb3BlIjoic2NvcGU6Y2xpZW50OmluY29taW5nP2NsaWVudE5hbWU9djZlOGNmZTkzX2EzMDVfNDRjMl84M2NlXzkyM2UwYzZmOWJlMyBzY29wZTpjbGllbnQ6b3V0Z29pbmc_YXBwU2lkPUFQYzZiZDFhMDQ4Y2ZmN2ZkMTAzODA5Y2E1MTFjZTgyOGYmY2xpZW50TmFtZT12NmU4Y2ZlOTNfYTMwNV80NGMyXzgzY2VfOTIzZTBjNmY5YmUzIn0.DWJh1Oyxqy3tz07kP7p6K4r9VTeSmmbtqKWCWWOjlJc");
Twilio.Device.ready(function (device) {
$("#log").text("Click Allow and then the Close button...");
});
Twilio.Device.error(function (error) {
$("#log").text("Error: " + error.message);
// Show the instructions to accept Flash
$("#hangupbtn").hide();
$("#log").show();
});
Twilio.Device.connect(function (conn) {
$("#log").text("Call connected");
$("#hangupbtn").show();
});
Twilio.Device.disconnect(function (conn) {
$("#log").text("Call ended. Thank you.");
$("#hangupbtn").hide();
});
Twilio.Device.incoming(function (conn) {
$("#log").text("Incoming connection from " + conn.parameters.From);
// accept the incoming connection and start two-way audio
conn.accept();
});
function hangup() {
Twilio.Device.disconnectAll();
}
Twilio.Device.connect({"from" : "vc", "src" : 2, "cp" : "6e8cfe93-a305-44c2-83ce-923e0c6f9be3"});
</script>
</head>
<body>
<div id="log">Loading...</div>
<button id="hangupbtn" style="display:none;margin-top:80px;" class="hangup" onclick="hangup();">Hangup</button>
<div id="instructions" style="display:none;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment