Skip to content

Commit e6329a2

Browse files
GleasonKGleasonK
committed
Updated controller and added features to each demo
1 parent a53b252 commit e6329a2

File tree

7 files changed

+135
-50
lines changed

7 files changed

+135
-50
lines changed

‎embed.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@
2828
</head>
2929
<body>
3030
<div id="vid-box"></div>
31-
<div id="stream-info" ><img src="img/person_dark.png"/><span id="here-now">0</span></div>
31+
<div id="stream-info"><img src="img/person_dark.png"/><span id="here-now">0</span></div>
3232
</body>
3333

3434
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
3535
<script src="js/webrtc.js"></script>
3636
<script src="js/rtc-controller.js"></script>
37-
<script>
37+
<script>
3838

3939
(function(){
4040

‎embed_demo.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<html>
2+
<head>
3+
<title>WebRTC Embed Demo</title>
4+
</head>
5+
<body style="text-align: center">
6+
<div id="embed"></div>
7+
<h1 id="stream-name"></h1>
8+
</body>
9+
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
10+
<script type="text/javascript">
11+
12+
(function(){
13+
14+
var urlargs = urlparams();
15+
var embed_box = document.getElementById('embed');
16+
var stream_name = document.getElementById('stream-name');
17+
18+
// Handle error if stream is not in urlargs.
19+
if (!('stream' in urlargs)) {
20+
handleNoStream();
21+
return;
22+
}
23+
var stream = urlargs.stream;
24+
var width = 500;
25+
var height = 500;
26+
27+
if ('width' in urlargs) width = urlargs.width;
28+
if ('height' in urlargs) height = urlargs.height;
29+
30+
stream_name.innerHTML = "Currently Watching: " + stream;
31+
genEmbed(width,height);
32+
33+
34+
function genEmbed(w,h){
35+
var url = "http://kevingleason.me/SimpleRTC/embed.html?stream=" + stream;
36+
var embed = document.createElement('iframe');
37+
embed.src = url;
38+
embed.width = w;
39+
embed.height = h;
40+
embed.setAttribute("frameborder", 0);
41+
embed_box.innerHTML = embed.outerHTML; // For a preview
42+
}
43+
44+
// Get URL params
45+
function urlparams() {
46+
var params = {};
47+
if (location.href.indexOf('?') < 0) return params;
48+
PUBNUB.each(
49+
location.href.split('?')[1].split('&'),
50+
function(data) { var d = data.split('='); params[d[0]] = d[1]; }
51+
);
52+
return params;
53+
}
54+
55+
function handleNoStream(){
56+
embed_box.innerHTML="ERROR! Stream not found in URL params.";
57+
}
58+
59+
}());
60+
61+
</script>
62+
</html>

‎embed_test.html‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,6 @@ <h2><a href="stream.html">Streaming & Embedding</a></h2>
4646
<p>Stream video from one device to many listeners. Also embed that
4747
live video feed anywhere you want!</p>
4848

49-
50-
5149
</section>
5250

5351
<footer>

‎js/rtc-controller.js‎

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
/* WebRTC PubNub Controller
2+
* Author: Kevin Gleason
3+
* Date: July 15, 2015
4+
* Description: A wrapper library for the PubNub WebRTC SDK to make simple video
5+
* functions a breeze to implement.
6+
*
7+
* TODO: make getVideoElement a native non-jQuery function
8+
*
9+
*/
10+
111
(function(){
212

313

@@ -93,6 +103,13 @@ var CONTROLLER = window.CONTROLLER = function(phone){
93103
publishCtrl(controlChannel(name), "userJoin", phone.number());
94104
}
95105

106+
CONTROLLER.leaveStream = function(name){
107+
var ch = (name ? name : phone.number()) + "-stream";
108+
pubnub.unsubscribe({
109+
channel : ch,
110+
});
111+
}
112+
96113
CONTROLLER.send = function( message, number ) {
97114
if (phone.oneway) return stream_message(message);
98115
phone.send(message, number);
@@ -119,10 +136,12 @@ var CONTROLLER = window.CONTROLLER = function(phone){
119136
};
120137

121138
CONTROLLER.hangup = function(number){
122-
if (number) {
139+
if (number) {
140+
if (phone.oneway) CONTROLLER.leaveStream(number);
123141
phone.hangup(number);
124142
return publishCtrl(controlChannel(number), "userLeave", phone.number())
125143
}
144+
if (phone.oneway) CONTROLLER.leaveStream();
126145
phone.hangup();
127146
for (var i=0; i < userArray.length; i++) {
128147
var cChan = controlChannel(userArray[i].number);
@@ -166,6 +185,10 @@ var CONTROLLER = window.CONTROLLER = function(phone){
166185
CONTROLLER.isOnline(number+"-stream", cb);
167186
};
168187

188+
CONTROLLER.getVideoElement = function(number){
189+
return $('*[data-number="'+number+'"]');
190+
}
191+
169192
function manage_users(session){
170193
if (session.number == phone.number()) return; // Do nothing if it is self.
171194
var idx = findWithAttr(userArray, "number", session.number); // Find session by number
@@ -178,7 +201,7 @@ var CONTROLLER = window.CONTROLLER = function(phone){
178201
}
179202
}
180203
userArray = userArray.filter(function(s){ return !s.closed; }); // Clean to only open talks
181-
console.log(userArray);
204+
// console.log(userArray);
182205
}
183206

184207
function add_to_stream(number){
@@ -198,7 +221,7 @@ var CONTROLLER = window.CONTROLLER = function(phone){
198221
}
199222

200223
function publishCtrl(ch, type, data){
201-
console.log("Pub to " + ch);
224+
// console.log("Pub to " + ch);
202225
var msg = {type: type, data: data};
203226
pubnub.publish({
204227
channel: ch,
@@ -211,7 +234,7 @@ var CONTROLLER = window.CONTROLLER = function(phone){
211234
pubnub.subscribe({
212235
channel : ctrlChan,
213236
message : receive,
214-
connect : function() { console.log("Subscribed to " + ctrlChan); }
237+
connect : function() {} // console.log("Subscribed to " + ctrlChan); }
215238
});
216239
}
217240

@@ -239,7 +262,7 @@ var CONTROLLER = window.CONTROLLER = function(phone){
239262
if (idx != -1) audiotogglecb(userArray[idx], audEnabled);
240263
break;
241264
}
242-
console.log(m);
265+
// console.log(m);
243266
}
244267

245268
function findWithAttr(array, attr, value) {
@@ -257,7 +280,7 @@ var CONTROLLER = window.CONTROLLER = function(phone){
257280
})();
258281

259282
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
260-
// Request fresh TURN servers from XirSys
283+
// Request fresh TURN servers from XirSys - Need to explain.
261284
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
262285
function get_xirsys_servers() {
263286
var servers;

‎minivid2.html‎

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
display: block;
2020
margin: 0 auto;
2121
}
22+
23+
input[type="submit"]{
24+
width:50px;
25+
}
2226
</style>
2327

2428
</head>
@@ -27,24 +31,24 @@
2731
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
2832
<!-- My Phone Number & Dial Areas -->
2933
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
30-
<div id="vid-box"></div>
31-
<div id="vid-thumb"></div>
32-
33-
<form name="loginForm" id="login" action="#" onsubmit="return login(this);">
34-
<input type="text" name="username" id="username" placeholder="Pick a username!" />
35-
<input type="submit" name="login_submit" value="Log In">
36-
</form>
37-
38-
39-
<form name="callForm" id="call" action="#" onsubmit="return makeCall(this);">
40-
<input type="text" name="number" placeholder="Enter user to dial!" />
41-
<input type="submit" value="Call"/>
42-
</form>
43-
44-
<div id="inCall">
45-
<button id="end" onclick="end()">End</button> <button id="mute" onclick="mute()">Mute</button> <button id="pause" onclick="pause()">Pause</button>
46-
</div>
47-
<div id="logs"></div>
34+
<div id="vid-box"></div>
35+
<div id="vid-thumb"></div>
36+
37+
<form name="loginForm" id="login" action="#" onsubmit="return login(this);">
38+
<input type="text" name="username" id="username" placeholder="Pick a username!" />
39+
<input type="submit" name="login_submit" value="Log In">
40+
</form>
41+
42+
43+
<form name="callForm" id="call" action="#" onsubmit="return makeCall(this);">
44+
<input type="text" name="number" placeholder="Enter user to dial!" />
45+
<input type="submit" value="Call"/>
46+
</form>
47+
48+
<div id="inCall">
49+
<button id="end" onclick="end()">End</button> <button id="mute" onclick="mute()">Mute</button> <button id="pause" onclick="pause()">Pause</button>
50+
</div>
51+
<div id="logs"></div>
4852

4953
<p><b>To Use:</b></p>
5054
<p>Type a username and click Log in. If input turns green you are ready to receive/place a call.</p>
@@ -78,13 +82,14 @@
7882
});
7983
ctrl.receive(function(session){
8084
session.connected(function(session){ video_out.appendChild(session.video); addLog(session.number + " has joined."); });
81-
session.ended(function(session) { getVideo(session.number).remove(); addLog(session.number + " has left."); });
85+
session.ended(function(session) { ctrl.getVideoElement(session.number).remove(); addLog(session.number + " has left."); });
8286
});
8387
ctrl.videoToggled(function(session, isEnabled){
84-
getVideo(session.number).toggle(isEnabled);
88+
ctrl.getVideoElement(session.number).toggle(isEnabled);
8589
addLog(session.number+": video enabled - " + isEnabled);
8690
});
8791
ctrl.audioToggled(function(session, isEnabled){
92+
ctrl.getVideoElement(session.number).css("opacity",isEnabled ? 1 : 0.75);
8893
addLog(session.number+": audio enabled - " + isEnabled);
8994
});
9095
return false;
@@ -103,8 +108,8 @@
103108

104109
function mute(){
105110
var audio = ctrl.toggleAudio();
106-
if (!audio){ $("#mute").html("Unmute"); }
107-
else { $("#mute").html("Mute"); }
111+
if (!audio) $("#mute").html("Unmute");
112+
else $("#mute").html("Mute");
108113
}
109114

110115
function end(){
@@ -113,8 +118,8 @@
113118

114119
function pause(){
115120
var video = ctrl.toggleVideo();
116-
if (!video){ $('#pause').html('Unpause'); }
117-
else { $('#pause').html('Pause'); }
121+
if (!video) $('#pause').html('Unpause');
122+
else $('#pause').html('Pause');
118123
}
119124

120125
function getVideo(number){

‎stream.html‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<style>
8-
#vid-box, #vid-thumb {
8+
#vid-box{
99
text-align: center;
1010
}
1111

@@ -23,12 +23,10 @@
2323
display: inline-block;
2424
height: 20px;
2525
}
26-
27-
#vid-thumb, #vid-thumb video{
28-
width: 200px;
29-
display: block;
30-
margin: 0 auto;
31-
}
26+
27+
input[type="submit"], button {
28+
width: 50px;
29+
}
3230
</style>
3331

3432
</head>
@@ -38,7 +36,6 @@
3836
<!-- My Phone Number & Dial Areas -->
3937
<!-- =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= -->
4038
<div id="vid-box"></div>
41-
<div id="vid-thumb"></div>
4239

4340
<form name="streamForm" id="stream" action="#" onsubmit="return stream(this);">
4441
<input type="text" name="streamname" id="streamname" placeholder="Pick a stream name!" />
@@ -76,6 +73,7 @@
7673
var video_out = document.getElementById("vid-box");
7774
var embed_code = document.getElementById("embed-code");
7875
var embed_demo = document.getElementById("embed-demo");
76+
var here_now = document.getElementById('here-now');
7977
var streamName;
8078

8179
function stream(form) {
@@ -102,7 +100,7 @@
102100
session.ended(function(session) { addLog(session.number + " has left."); console.log(session)});
103101
});
104102
ctrl.streamPresence(function(m){
105-
$('#here-now').html(m.occupancy+'');
103+
here_now.innerHTML=m.occupancy;
106104
addLog(m.occupancy + " currently watching.");
107105
});
108106
return false;
@@ -116,7 +114,7 @@
116114
subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe', // Your Sub Key
117115
oneway : true
118116
});
119-
var ctrl = window.ctrl = CONTROLLER(phone, true);
117+
var ctrl = window.ctrl = CONTROLLER(phone);
120118
ctrl.ready(function(){
121119
ctrl.isStreaming(num, function(isOn){
122120
if (isOn) ctrl.joinStream(num);
@@ -129,7 +127,7 @@
129127
session.ended(function(session) { addLog(session.number + " has left."); });
130128
});
131129
ctrl.streamPresence(function(m){
132-
$('#here-now').html(m.occupancy+'');
130+
here_now.innerHTML=m.occupancy;
133131
addLog(m.occupancy + " currently watching.");
134132
});
135133
return false;
@@ -145,7 +143,7 @@
145143

146144
function end(){
147145
if (!window.phone) return;
148-
phone.hangup();
146+
ctrl.hangup();
149147
phone.pubnub.unsubscribe(phone.number());
150148
}
151149

@@ -156,9 +154,9 @@
156154
embed.src = url;
157155
embed.width = w;
158156
embed.height = h;
159-
embed.frameborder=0;
160-
embed_demo.innerHTML = embed.outerHTML;
161-
embed_code.innerHTML = '';
157+
embed.setAttribute("frameborder", 0);
158+
embed_demo.innerHTML = "<a href='embed_demo.html?stream="+streamName+"&width="+w+"&height="+h+"'>Embed Demo</a>"
159+
embed_code.innerHTML = 'Embed Code: ';
162160
embed_code.appendChild(document.createTextNode(embed.outerHTML));
163161
}
164162

0 commit comments

Comments
 (0)