Skip to content

Commit 57ef96a

Browse files
stephenlbstephenlb
committed
added GUI and updated bugs fixes in webrtc.js
1 parent 0b04583 commit 57ef96a

8 files changed

+354
-14
lines changed

‎css/bootstrap.min.css

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/styles.css

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
2+
/* Phone Number Display */
3+
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
4+
#my-number-section {
5+
margin: 100px 0px;
6+
}
7+
#my-number-title {
8+
font-size: 20px;
9+
font-weight: 400;
10+
line-height: 20px;
11+
}
12+
#my-number {
13+
font-family: "Helvetica Neue";
14+
font-size: 110px;
15+
line-height: 110px;
16+
font-weight: 100;
17+
}
18+
19+
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
20+
/* Video Display */
21+
/* =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
22+
#video-display {
23+
display: inline-block;
24+
width: 98%;
25+
height: 300px;
26+
border: 1px solid #eee;
27+
border-radius: 3px;
28+
margin: 20px 0px;
29+
text-align: center;
30+
color: #eee;
31+
font-size: 150px;
32+
line-height: 300px;
33+
}

‎fonts/glyphicons-halflings-regular.svg

+229
Loading

‎fonts/glyphicons-halflings-regular.ttf

40.3 KB
Binary file not shown.

‎fonts/glyphicons-halflings-regular.woff

22.8 KB
Binary file not shown.

‎index.html

+81-8
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,97 @@
44
<title>WebRTC Peer Connections</title>
55
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
8+
<link href="css/styles.css" rel="stylesheet" type="text/css">
79
</head>
810
<body>
911

10-
<input id="number" value="425-888-1234">
11-
<button id="dial">Call Phone</button>
12+
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
13+
<!-- My Phone Number & Dial Areas -->
14+
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
15+
<div class="container">
16+
<div class="row">
17+
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
18+
<!-- MY PHONE NUMBER -->
19+
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
20+
<div class="col-sm-6">
21+
<div id="my-number-section" class="text-center">
22+
<div id="my-number">LOADING</div>
23+
<div id="my-number-title">
24+
call me. this is my phone number.
25+
</div>
26+
</div>
27+
</div>
28+
29+
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
30+
<!-- MY PHONE NUMBER -->
31+
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
32+
<div class="col-sm-6">
33+
<!-- DISPLAY -->
34+
<div id="video-display">
35+
<span class="glyphicon glyphicon-facetime-video"></span>
36+
</div>
37+
38+
<!-- DIAL CONTROLS -->
39+
<div class="row">
40+
<div class="col-xs-4">
41+
<div class="form-group"><div class="input-group">
42+
<div class="input-group-addon">
43+
<span class="glyphicon glyphicon-earphone"></span>
44+
</div>
45+
<input id="number" class="form-control" placeholder="...">
46+
</div></div>
47+
</div><div class="col-xs-3">
48+
<button id="dial" class="btn btn-primary">Call Friend</button>
49+
</div></div>
50+
</div>
51+
</div>
52+
</div>
53+
54+
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
55+
<!-- TODO -->
56+
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
57+
58+
<div class="container">
59+
<div class="row">
60+
<div class="col-xs-6">
61+
<ol>
62+
<li> resend SDP periodically and dedupe
63+
<li>
64+
<li>
65+
</ol>
66+
</div>
67+
<div class="col-xs-6">
68+
<ol>
69+
<li> resend SDP periodically and dedupe
70+
<li>
71+
<li>
72+
</ol>
73+
</div>
74+
</div>
75+
</div>
76+
1277

1378
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -->
1479
<!-- WebRTC Peer Connections -->
1580
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- -->
1681
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
17-
<script src="webrtc.js"></script>
18-
<script src="sound.js"></script>
82+
<script src="js/webrtc.js"></script>
83+
<script src="js/sound.js"></script>
1984
<script>(function(){
2085

86+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
87+
// Random Number
88+
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
89+
var my_number = PUBNUB.$('my-number');
90+
my_number.number = Math.floor(Math.random()*1000);
91+
my_number.innerHTML = ''+my_number.number;
92+
2193
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
2294
// Calling & Answering Service
2395
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
2496
var phone = PHONE({
25-
phone : '425-888-1234', // listen on this line
97+
phone : my_number.number, // listen on this line
2698
publish_key : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c',
2799
subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe',
28100
ssl : true,
@@ -34,13 +106,14 @@
34106
// Ready to Send or Receive Calls
35107
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
36108
phone.ready(function(response){
109+
// Bind Button Click
37110
PUBNUB.bind( 'click', PUBNUB.$('dial'), function() {
38111

39112
// Make a Phone Call
40113
phone.dial({
41-
number : PUBNUB.$("number").value,
42-
establish : function(session){},
43-
disconnect : function(session){}
114+
number : PUBNUB.$("number").value,
115+
connect : function(session){},
116+
hangup : function(session){}
44117
});
45118

46119
} );

‎sound.js renamed to ‎js/sound.js

File renamed without changes.

‎webrtc.js renamed to ‎js/webrtc.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,8 @@ var PHONE = window.PHONE = function(config) {
102102
number : number,
103103
status : '',
104104
pc : new PeerConnection(rtcconfig),
105-
establish : params && params.establish || function(){},
106-
disconnect : params && params.disconnect || function(){}
105+
establish : params && params.connect || function(){},
106+
disconnect : params && params.hangup || function(){}
107107
};
108108

109109
// Setup Event Methods
@@ -121,9 +121,10 @@ var PHONE = window.PHONE = function(config) {
121121
talk.pc.addStream(mystream);
122122

123123
// Notify of Call Status
124-
update_conversation( number, 'connecting' );
124+
update_conversation( talk, 'connecting' );
125125

126126
// Return Brand New Talk Reference
127+
conversations[number] = talk;
127128
return talk;
128129
})();
129130

@@ -134,8 +135,7 @@ var PHONE = window.PHONE = function(config) {
134135
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
135136
// Notify of Call Status Events
136137
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
137-
function update_conversation( number, status ) {
138-
var talk = conversations[number];
138+
function update_conversation( talk, status ) {
139139
talk.status = status;
140140
callstatuscb(talk);
141141
return talk;
@@ -246,7 +246,7 @@ var PHONE = window.PHONE = function(config) {
246246
var pc = talk.pc;
247247

248248
// Notify of Call Status
249-
update_conversation( number, 'routing' );
249+
update_conversation( talk, 'routing' );
250250

251251
// Add SDP Offer/Answer
252252
pc.setRemoteDescription(

0 commit comments

Comments
 (0)